Quantity buttons + and – click event interfere because of to wide of a selector

[Jaime Martinez]

Hola! First of all, thank you for GP Premium, loving it!

# Description
I found out that within GP Premium the woocommerce.js is interfering with other “quanity input’s behaviour” generated by the “woocommerce_quantity_input” function. This because the selector within woocommerce.js within GP Premium is targeting the “products own” quantity input a bit to greedy / wide.

Currently is:
quantityBoxes = $( 'div.quantity:not(.buttons-added), td.quantity:not(.buttons-added)' ).find( quantitySelector );

# Fix
Fixes the issues by adding form in front of it, which is the <form> element around.

Fix (tested locally):
quantityBoxes = $( 'form div.quantity:not(.buttons-added), td.quantity:not(.buttons-added)' ).find( quantitySelector );

# Example
I’m using WP Clever – Product Bundles plugin which add quantity inputs of bundled products to the page. When clicking on the [ + ] button of “main products” quantity input, then all the other fields also get uppped +1. While it should only +1 the input of itself.

Bundle A / Quantity = 1

Bundle sub-products:
product A / quantiy = 2
product B / quantity = 1
product C / quantity = 1

Currently when upping the Bundle quantity, also sets Product B and C to “2”.

I think other Bundle plugins will experience this also.

# Versions
I’m running everything on the latest version.

# Question
Would you consider adding the CSS class as a fix?

# Reference
https://wordpress.org/plugins/woo-product-bundle/

Kind regards,

Jaime Martinez!

https://jaimemartinez.nl

[David]

Hi there,

the problem is the Qty buttons that GP adds is not just for the Cart – they are also displayed on single products.

But you can disable the Display Qty Buttons in Customizer > Layout > Woocommerce:

https://docs.generatepress.com/article/woocommerce-overview/#single-product

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

[Jaime Martinez]

Hi David, thank you for your quick reply.

The .cart CSS class doens’t related to the Cart page because the CSS class of the <form> element on that page is .woocommerce-cart-form. On the single page, that CSS class is .cart.

Double checking my solution is that I prefixed the CSS selector with form instead of .cart to fix the issue. Because it only targets the “quantity” of the product and not other quantity input field. This way this solution also works on the Single product page && on the Cart page.

I will update my previous code-snippet above.

Also, I don’t want to disable these buttons, I would like them to not interfere with other quantity inputs.

Kinds regards,

Jaime

https://jaimemartinez.nl

[David]

Aah ok – we’ll take a closer look at what we can do with that.

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

[Tom]

Thanks for the heads up here! Should be fixed in 1.12.0. We’ll be releasing alpha.1 on Monday if you’d like to test 🙂

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

[Jaime Martinez]

Thank you very much for the swift reply && solution!

Will check it out!

https://jaimemartinez.nl

[Tom]

No problem! alpha.1 is now available if you’d like to confirm that it’s fixed 🙂

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

[Jaime Martinez]

Yupp it works!

https://jaimemartinez.nl

[Tom]

Awesome, thanks for letting me know! 🙂

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

[Chris]

Hi! I’ve been having a similar problem with SomewhereWarm’s Product Bundles plugin for WooCommerce: the plus and minus quantity buttons weren’t changing the quantity in either single product page or cart. The alpha release fixed this (great!) but there’s still a minor glitch in the styling.

Product Bundle:

Single item:

I thought it would be a good idea to mention this here rather than start a new thread.

[Tom]

Any chance you can link us to that page so we can take a closer look at the CSS?

Thanks!

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

[Chris]

Sorry about that! Should’ve provided a link… 😅

The site is still in development, but I’ve made a copy of a product bundle page (link in the private information).

Hope this helps!

[David]

Hi there,

The bundle button is injecting some hidden HTML between the qty and the add to cart button. Simple fix with a little CSS:

.bundle_button {
    display: flex;
    align-items: center;
}

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

[Chris]

Great! That helped a lot.

For some reason the product bundle add to cart button was also shorter than the single product button, so I added this CSS to adjust it:

.single_add_to_cart_button {
    height: 50px;
}

That seems to have done the trick.

[David]

Glad to hear that!

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

[Author]

Posts