Relocate "Add to cart" button inside the product cart in collection? Debut theme

[Alliance]

Hi guys,

Would like to relocate “Add to cart” button and QTY inside the product cart in collection, Debut theme.

Thank you

allianceautoproducts.com

[rutvik_shop]

Hello @Alliance !

You can relocate the add to cart button and quantity picker by adding custom code to your theme file.

[BSS-Commerce]

Hi @Alliance

Please follow these steps:

Go to Online Store > Theme > Edit Code, then go to the assets folder. Please try adding the following code in any JS file until it looks like you want, usually a theme.js file:

if(window.location.href.indexOf("allianceautoproducts.com/collections") > -1) {
    const list = document.querySelectorAll(".grid-view-item.product-card");
    const addDiv = document.querySelectorAll(".grid__item.grid__item--collection-template.small--one-half.medium-up--one-quarter form");
    var index = 0;
    list.forEach(l => {
        l.style.height = "auto";
        l.appendChild(addDiv[index])
        index ++;
    })
}

I hope that it will work for you.

[Alliance]

Hi,

How to reduce the qty box size and make inline with “Add to cart” button.

Thank you

[rutvik_shop]

Use this CSS to make it align with add to cart button and reduce width.

[Alliance]

[rutvik_shop]

@media only screen and (min-width: 750px){
.input {
margin: 3px 0;
width: 138px;
}
}

[Alliance]

Width still not getting reduced. Reduced it to 3px

[Alliance]

Hi,

Just discovered that it is not working in product page. In collections, doing great.