[Resolved] WooCommerce Quantity Buttons Problem

[Alberto]

Hello, I have a problem with the woocommerce quantity buttons.

Sometimes they work, other times not. In Chrome they usually work, but not in Safari nor Mobile.

This is the url: https://aloeole.com/product/aloeole-pure-aloe-vera-body-gel/

I don’t know why this is happening…

Thank you!

[Leo]

Hi there,

I just tested the page using my phone with Chrome and Safari but did not notice the issue.

Do you see the same issue in the sample page here?
https://gpsites.co/seller/product/quality-poster/

[Pedro]

Hello Alberto!

Are you building that site with GeneratePress? It is incredible!

I would like to ask you, how did you place the tabs of the drop-down product?

[Alberto]

Hi Leo,

It’s not happening in the “Seller” template. I used the “Merch” one as a base for my design, but in the template it’s working properly, but not in the site. The issue is happening to me mostly in Safari with my Mac.

I’ve inspected the html code and it’s curious, because in Chrome it shows this:

–
<label class=”screen-reader-text” for=”quantity_5f645361c2a20″>Aloe Vera Gel with Hyaluron quantity</label>
<input type=”number” id=”quantity_5f645361c2a20″ class=”input-text qty text” step=”1″ min=”1″ max=”” name=”quantity” value=”1″ title=”Qty” size=”4″ placeholder=”” inputmode=”numeric”>
+

But in Safari the links are missing and the class “buttons-added” it’s not showing neither:

<label class=”screen-reader-text” for=”quantity_5f6453ec9f0f1″>Aloe Vera Gel with Hyaluron quantity</label>
<input type=”number” id=”quantity_5f6453ec9f0f1″ class=”input-text qty text” step=”1″ min=”1″ max=”” name=”quantity” value=”1″ title=”Qty” size=”4″ placeholder=”” inputmode=”numeric”>

Any clue?

Thank you!

[Alberto]

I have checked that it’s a problem of the jQuery declaration. I have a jquery-3.3.1 version declared in a footer hook and somehow it’s making the quantity buttons are not working in safari.

I tried deleting the jquery-3.3.1 declaration and declarating jquery in the function.php file with this:

add_action( ‘wp_enqueue_scripts’, ‘tu_load_jquery’);
function tu_load_jquery() {
wp_enqueue_script( ‘jquery’ );
}

But then my jquery code doesn’t work… I don’t know why.

Thank you!

[Alberto]

Hi Pedro!

Yes, it’s made with gp!

I just hide the default tabs with CSS and put the drop down items in the content of the product. Very easy! 😉

[Leo]

That code shouldn’t be added using a footer hook.

It should be added using one of these methods:
Adding PHP: https://docs.generatepress.com/article/adding-php/

[Alberto]

No Leo, I didn´t add that code in a hook.

I added the the php code in the function.php file of my child theme.

I want to know if there is a problem using the jquery-3.3.1 version with the quantity buttons and because of that, they are not working properly with safari.

[Leo]

Unfortunately this is something you will need to check with WooCommerce’ support as the quantity button is coming directly from the plugin.

Sorry about that!

[Alberto]

Yes, but you have an option in “Customize – Layout – Woocommerce – Single Product – Display quantity buttons” and that option has to has a code associated in some of your files, right?

Where is that code in order to try to replicate or fix the problem?

Thank you!

[Tom]

Actually the theme is responsible for adding the buttons to the quantity field.

Strange that it’s conflicting with specific jQuery versions though – it’s pretty simple jQuery. Can you try the latest 1.12.0-beta version? We did some rewriting of that code that may help.

[Alberto]

Solved it!

Eventually, I didn’t have to update to the beta version, I downgraded the jquery version from 3.3.1 to 1.7.1 and everything works properly now.

Despite of that I don’t know why my code wasn’t working with your jquery version. jQuery versions it’s something I don’t quite understand…

Thank you for your time and sorry for the inconvenience!! 🙂

[Tom]

No problem, glad you got it working 🙂

[Author]

Posts