[Resolved] Full width add to cart button in line with quantity on individual product page

[Westin]

Hey guys,

Just a quick question. I’m trying to do 2 things:

#1. Get a full-width add to cart button on all of my product pages on my woocommerce site.
#2. Make it in line with the order quantity button.

Using previous help topics I’ve been able to get both to work on single products but the CSS I’m using doesn’t seem to work with product bundles and with products that have multiple variations.

I included a link to an example of a product that looks perfect in the private area. I’m trying to get the product bundles and products with variations to mimic how that looks.

I’m wondering if I’m missing something or just need to make a small tweak to make it work? Any help would be greatly appreciated.

Here is the CSS that I found from other generatepress topics on the forums that seems to work for single products.

form.cart {
display: flex;
align-items: center;
}

form.cart button.button.alt {
margin-top: 0px !important;
margin-left: 10px !important;
padding: 0;
flex-grow: 1;
height: 70px !important;
width: 140px !important;
}
.woocommerce .quantity a.minus, .woocommerce .quantity a.plus, .woocommerce .quantity input.qty {
height: 70px !important;
min-height: 70px !important;
width: 70px !important;
}

[Leo]

Hi Westin,

Can you remove the CSS you’ve added and let me have a look?

Thanks 🙂

[Westin]

Hi Leo,

Of course. It’s removed now. Let me know if you need anything else.

[Leo]

Try this:

.bundle_button {
    display: flex;
}
.woocommerce div.product form.cart .button {
    float: none;
    flex: 1;
}

[Westin]

Hi Leo,

The add to cart buttons look good, thank you! I noticed with this CSS that the height of the quantity buttons are slightly smaller than the add to cart buttons (the quantity button is like 5-10 pixels shorter). Is there something that I can add to the CSS to play around with the height of the quantity buttons to match the add to cart?

[Westin]

Hi Leo,

Never mind, I got it! Thank you for your help.

[Leo]

No problem 🙂

[Author]

Posts