Make quantity selector next to add to shoppingcart

[Hausi]

Hi,
I want to place Quantity selector next to Add to Cart. I use Dawn theme for my store.

My current store:

The View that I’m expecting:

Website: https://hausi.nl/

PW: theepa

[BSSCommerce-B2B]

Hi @Hausi

You should try following the instructions below

Step 1: Go to Admin → Online store → Theme > Edit code

Step 2: Search for the file base.css and add this code snippet to the end of the file

.product-form__buttons .product-form__submit.button.button--full-width.button--primary {
    margin-top: 25px;
    height: 47px;
}

.product-form__buttons {
    display: flex;
    gap: 10px;
}
.product-form__buttons .product-form__input.product-form__quantity {
   flex: 0 0 0 !important;
}

Step 3: Search for the file global.js or theme.js and add this code snippet to the end of the file

(function() {
    const loop = setInterval(() => {
        var buttons = document.querySelector(".product-form__submit");
        var quantityInput = document.querySelector(".product-form__input.product-form__quantity");

        if (buttons && quantityInput) {
            buttons.parentNode.insertBefore(quantityInput, buttons);
            clearInterval(loop);
        }
    }, 100);
        
        setTimeout(() => {
                console.log("Interval cleared after 10 seconds");
                clearInterval(loop);
            }, 10000);
})();

Result

If it’s helpful, please like and mark it as a solution, thank you

Have a nice day