[Resolved] Unable to get plus minus buttons to work or hide them on extra product option

[DAVID]

hi,

I am using the Extra Product Options plugin to add additional options in my woocommerce store. However, when a chocolate is added as an option it asks how many you would like to add and a quantity box with plus minus buttons next to it.

Test product page here: https://beerginvino.com/product/dave-test-product/

The plus or minus buttons on the quantity of the additional product do not work – clicking them does nothing. I’ve asked the Extra Product Options plugin support team and they say they don’t add the plus minus buttons in their code, it comes from the theme.

Can you help please? Either with getting to make the plus minus buttons working on the product or hiding them with some css. Neither of which I’ve been able to do so far.

Thanks.

[David]

Hi there,

try adding this CSS:

.tm-extra-product-options .tc-epo-element-product-container-wrap .tc-epo-element-product-container-cart .tm-quantity-alt .quantity {
    display: flex;
    justify-content: flex-start;
}

.tm-quantity-alt input.tm-qty-alt {
    line-height: 2;
}

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

[DAVID]

Thanks David – I don’t see much difference other than the plus minus are now in a horizontal line with the quantity selector.

I can’t figure out what’s happening here. Looks like Generate Press is adding the plus and minus buttons to the quantity selector for the extra product but maybe there’s no javascript being added to those buttons? I can’t see any errors in the console to prevent things happening.

It doesn’t really matter if we can’t get the minus plus buttons to work – if I can hide them somehow that would still be a win.

https://beerginvino.com/product/dave-test-product/

Thanks heaps.

[David]

Try this CSS instead:

.tm-extra-product-options .tc-epo-element-product-container-wrap .tc-epo-element-product-container-cart .tm-quantity-alt .quantity:before,
.tm-extra-product-options .tc-epo-element-product-container-wrap .tc-epo-element-product-container-cart .tm-quantity-alt .quantity:after {
    display: none;
}

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

[DAVID]

That’s cracked it! Thanks heaps.

[David]

Glad to hear that!

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

[Author]

Posts