Archived topic
Quantity buttons + and - click event interfere because of to wide of a selector
14 replies · Started by Jaime Martinez on September 11, 2020
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!
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
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
Aah ok - we'll take a closer look at what we can do with that.
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 :)
Thank you very much for the swift reply && solution!
Will check it out!
No problem! alpha.1 is now available if you'd like to confirm that it's fixed :)
Yupp it works!
Awesome, thanks for letting me know! :)
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.
Any chance you can link us to that page so we can take a closer look at the CSS?
Thanks!
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!
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;
}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.
Glad to hear that!
