-
AuthorPosts
-
February 15, 2016 at 7:21 pm #583706
Today I came across an issue with the quantity selector used in Enfold to replace the original WooCommerce selector. The one used in Enfold does not read the min-value, max-value and step arguments available from the woocommerce_quantity_input_args filter.
Copy the following function to a child theme functions.php:
add_filter( 'woocommerce_quantity_input_args', 'mmx_change_qty', 20, 2 ); function mmx_change_qty( $args, $product ) { $args['input_value'] = 10; // Starting value $args['max_value'] = 50; // Maximum value $args['min_value'] = 10; // Minimum value $args['step'] = 10; // Quantity steps return $args; }
Now call a simple product (not a variable product) in your browser an look into the source code. You will see:
<input type="text" step="10" min="10" max="50" name="quantity" value="10" title="Qty" class="input-text qty text" size="4">
Using a theme that does not replace the woocommerce quantity selector will result in
1. The default value is 10
2. Increments and decrements are in steps of 10
3. 50 is the maximum and 10 the minimum you can orderUsing Enfold you get:
1. The default value is 10
2. Increments and decrements are in steps of 1
3. There is no order limitThe reason for this issue is the function
jQuery(".quantity input[type=number]").each(function(){ .... });
in /enfold/config-woocommerce/woocommerce-mod.js. To make it work you need to read the step, min and max values from the input field and modify the plus.on and minus.on events accordingly.Drop me a note if you need more input.
February 16, 2016 at 9:35 am #583992Hi Michael!
Thank you for the input. We will report this to Kriesi. Would you mind creating a test page so that we can see the issue?
Regards,
IsmaelFebruary 21, 2016 at 7:09 pm #586721@mensmaximus – have you fixed that problem on your end? another user and i do have a problem that is also caused by the custom quantity selectors used in the enfold theme.
see here.
February 21, 2016 at 7:23 pm #586730Hi Ismael,
I had not time to work on it yet. I am busy in a large project and wont be able to care about it till end of March.
The solution I can think of is to read the entire input element and to parse it to get the values of min, max and step.
Regards
Michael
February 24, 2016 at 3:44 pm #588430Had to solve it early due to customers request ;-)
In /enfold/config-woocommerce/woocommerce-mod.js replace the existing code from line 15 to 38 with the following new code:
jQuery(".quantity input[type=number]").each(function() { var number = $(this), max = parseFloat( number.attr( 'max' ) ), min = parseFloat( number.attr( 'min' ) ), step = parseInt( number.attr( 'step' ), 10 ), newNum = jQuery(jQuery('<div />').append(number.clone(true)).html().replace('number','text')).insertAfter(number); number.remove(); setTimeout(function(){ if(newNum.next('.plus').length == 0) { var minus = jQuery('<input type="button" value="-" class="minus">').insertBefore(newNum), plus = jQuery('<input type="button" value="+" class="plus">').insertAfter(newNum); minus.on('click', function(){ var the_val = parseInt( newNum.val(), 10 ) - step; the_val = the_val < 0 ? 0 : the_val; the_val = the_val < min ? min : the_val; newNum.val(the_val); }); plus.on('click', function(){ var the_val = parseInt( newNum.val(), 10 ) + step; the_val = the_val > max ? max : the_val; newNum.val(the_val); }); } },10); });
The quantity button now wroks with the max, min and step values.
February 25, 2016 at 3:33 pm #589180Hi!
Glad you figured it out and thank you for sharing your solution :)
Best regards,
YigitMarch 15, 2016 at 4:29 pm #598461 -
AuthorPosts
- The topic ‘WooCommerce Quantity Selector’ is closed to new replies.