[Resolved] Giant add to cart button

[Pedro]

Hello! I would like the “add to cart” button on the product page to occupy the full width and be located just below the product quantity.

This is in both versions, mobile and desktop.

I send you a screenshot of how my site looks at the moment: https://www.dropbox.com/s/wj3dyca42fw45r1/Screenshot_2019-03-31-12-53-07-123_com.android.chrome.png?dl=0

How can I do it?

Thank you!!

GeneratePress 2.2.2

GP Premium 1.7.8

[Tom]

Hi there,

Try this:

.woocommerce div.product form.cart div.quantity {
    float: none;
    width: 100%;
    margin-right: 0;
}

.woocommerce div.product form.cart .button {
    width: 100%;
    margin-top: 10px;
    padding: 20px;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Pedro]

Hello Tom!

It worked very well, however now the quantity section is aligned to the right.

I would like this to not happen, I just want the add button to the cart to be bigger.

You can see a screenshot here:

https://www.dropbox.com/s/gwbbfbnzfsu3azu/Screenshot_2019-03-31-21-44-12-297_com.android.chrome.png?dl=0

[David]

Hi there,

add this CSS:

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Pedro]

Hello david! It worked perfectly! Thank you!

[David]

Glad we could be of help.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sam]

Hi there I found this but the add to cart button seems to display strangely on mobile the text moves down below centre and the button does not have as much height as the desktop view.

I am trying to do something similar and hope you can help. Rather than have the add to cart button full width and below the quantity field, I would like to do the following:

1) on the desktop I just want the add to cart button to fill the rest of the space to the right of it (within the .single_variation_wrap div) so it fills all the way to the right.
2) on mobile I would like the buy button to be full width and below the quantity, but with the quantity to be full with as well.

You can see how it is currently on our site here: https://www.supereight.net/shop/adidas-matchbreak-super-shoes-core-black-white-gold-metallic/

Many thanks
Sam

[David]

Hi there,

1. This CSS:

.woocommerce.single-product div.product form.cart .button {
    flex: 1;
}

2. Try this:

@media (max-width: 768px) {
    .woocommerce div.product form.cart div.quantity {
        flex: 1 0 100%;
    }
    .woocommerce div.product form.cart div.quantity a {
        max-width: unset;
        flex: 0 0 25%;
    }
    .woocommerce div.product form.cart div.quantity input {
        max-width: unset;
        flex: 0 0 50%;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sam]

Wow! thanks so much, that did it!

One minor tweak… for the quantity input on mobile you gave it equal widths for each part “33.33%”.

Is it possible to give the number 50% and the plus and minus as 25%?

[David]

I adjusted the code above.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sam]

Awesome! You guys are the best.

[David]

Glad to be of help. Nice looking site.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts