[Resolved] How do you move the Add to Cart button to a line after the quantity selector?

Hi there,

You can use its container <form> to go display in column direction so they stack.

Example CSS:

body.single-product div.product form.cart { flex-direction: column; }

It will stack like this. https://share.getcloudapp.com/2Nuw6dZZ

Also, on mobile, the QTY selector aligns to the right for some reason and would like to keep it to the left.

WooCommerce has this CSS by default:

media="(max-width: 768px)"
.do-quantity-buttons div.quantity {
    justify-content: flex-end;
}

We can override it by adding this CSS:

@media(max-width:768px){
.do-quantity-buttons div.quantity {
    justify-content: flex-start;
}
}

Glad you got it sorted. No problem. 😀

It’s using a different selector.

Try this:

@media(max-width:768px){
.woocommerce-variation-add-to-cart {
    display: flex;
    flex-direction: column;
}
}

And if you want to resize the buttons, use this selector:

button.single_add_to_cart_button.button.alt, button.single_add_to_cart_button.button.qlwcdc_quick_purchase.quick-purchase {
    width: fit-content;
}

Add it in the @media rule.

The CSS did the trick but strangely only for mobile view. How can the same be applied for desktop view?

Ah yeah it was written for mobile.

If you want to apply it on all viewports, simply remove the @media rule.

Example:

.woocommerce-variation-add-to-cart {
    display: flex;
    flex-direction: column;
}

No problem. 😀