Home › Forums › Support › Quantity buttons + and – click event interfere because of to wide of a selector
- This topic has 14 replies, 4 voices, and was last updated 5 months, 2 weeks ago by
David.
-
AuthorPosts
-
September 11, 2020 at 12:32 am #1438892
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 addingform
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 = 1Currently 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
September 11, 2020 at 2:03 am #1438970David
StaffCustomer SupportHi 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/September 11, 2020 at 2:26 am #1439006Jaime 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
September 11, 2020 at 2:32 am #1439016David
StaffCustomer SupportAah 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/September 11, 2020 at 11:23 am #1439736Tom
Lead DeveloperLead DeveloperThanks 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-developmentSeptember 15, 2020 at 5:32 am #1443964Jaime Martinez
Thank you very much for the swift reply && solution!
Will check it out!
https://jaimemartinez.nl
September 15, 2020 at 9:54 am #1444530Tom
Lead DeveloperLead DeveloperNo 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-developmentSeptember 15, 2020 at 11:52 am #1444681Jaime Martinez
Yupp it works!
https://jaimemartinez.nl
September 15, 2020 at 12:47 pm #1444756Tom
Lead DeveloperLead DeveloperAwesome, 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-developmentSeptember 16, 2020 at 7:43 pm #1446558Chris
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.
I thought it would be a good idea to mention this here rather than start a new thread.
September 17, 2020 at 9:48 am #1447460Tom
Lead DeveloperLead DeveloperAny 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-developmentSeptember 17, 2020 at 4:34 pm #1447868Chris
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!
September 17, 2020 at 6:45 pm #1447941David
StaffCustomer SupportHi 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/September 17, 2020 at 7:32 pm #1447980Chris
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.
September 18, 2020 at 2:06 am #1448266David
StaffCustomer SupportGlad to hear that!
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.