[Resolved] add to cart button missing from variable product on mobile

[sparkle]

hi there, i noticed on this site, my variable product does not have the ‘add to cart’ button on it, how can i get it back?

[Ying]

Hi there,

Can you find this CSS you added to your child theme? https://www.screencast.com/t/nMcVxYR0q

.add-to-cart-panel form.cart, .woocommerce div.product form.cart {
    flex-wrap: inherit!important;
}

Try remove it, or add an media query to it, the issue should be fixed, eg:

@media (max-width: 768px) {
.add-to-cart-panel form.cart, .woocommerce div.product form.cart {
    flex-wrap: inherit!important;
}
}

[sparkle]

thank you.

[sparkle]

i think i had added that so the woo booster flexible price items appeared properly (the default is with the $ after the entry field but before the add to cart button), but now they’re all in the right order but 100% wide…

[David]

Hi there,

the width 100% is coming from this CSS:

body.woocommerce div.summary.entry-summary form.cart input#wcj_open_price.text, div#product-2442 div.summary.entry-summary form.cart button.single_add_to_cart_button.button.alt {
    width: 100% !important;
    order: 2;
    margin:2px
}

[sparkle]

thanks. i’ll adjust… 🙂 you guys are great. <3

[David]

Glad we could be of help 🙂

[sparkle]

actually on smallest screens, it’s still not showing the add to cart button…. why?

https://imgur.com/a/HKKgPq7

[sparkle]

oh nevermind, i found the culprit. 🙂

[David]

Glad to hear that!

[Author]

Posts