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

[Allan]

Hello GP Team,

Would like to move the Add to Cart button on single product page below the quantity field.

How do I achieve this? 🙂

[Elvin]

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

[Allan]

Thanks, Elvin!

A couple related questions…

How do I manage spacing so the QTY selector and button don’t touch each other?

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

—–

EDIT:

Oh, I figured the margin part.

This seems to do the trick:

.single_add_to_cart_button { margin-top: 3px!important; }

[Elvin]

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;
}
}

[Allan]

Awesome!

Thank you, Elvin! Have a great day

[Elvin]

Glad you got it sorted. No problem. 😀

[Allan]

Hi! Wanted to ask how to apply the same for other product pages?

Turns out the change didn’t apply to our product with variant: https://workgadgets.ph/product/desk-mat-oversized-mouse-pad/

Is there a catch-all way to apply the change to all product types?

Thanks!

P.S. Shiny new website branding is looking 🔥🔥

[Elvin]

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.

[Allan]

Thanks, Elvin!

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

Pretty strange because the non-variation product didn’t behave like this.

And thanks for the button resize suggestion!

[Elvin]

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;
}

[Allan]

Great! I removed the @media rule as well for the simple product (non-variant) CSS.

Did the trick.

Thanks, Elvin!

[Elvin]

No problem. 😀

[Author]

Posts