Prior to version 2.3.0, WooCommerce decided to change the + and – buttons to HTML5 input where it has up and down button integrated into the field.
However, there are some older/non-HTML5 themes that might not support HTML5 number input boxes and they still show the old plus/minus buttons.
If your theme is showing the + and – buttons on the Wholesale Order Form and they aren』t working or in case that your theme doesn』t display the quantity plus/minus buttons, you can use the custom code below and put it to your theme/child theme』s functions.php. This will display the quantity buttons on your Wholesale Order Form and make the buttons work properly.
// Add plus and minus button
add_filter( 'wwof_filter_product_item_quantity', function($quantity_field){
$quantity_field = str_replace('
', '
', $quantity_field);
return $quantity_field;
}, 99, 2 );
/* Allow to increate quantity by pressing plus and minus button
*
* Based on WooCommerce Quantity Increment plugin
* (https://github.com/woocommerce/WooCommerce-Quantity-Increment)
*/
add_action( 'wp_footer', function() {
global $post;
if( isset( $post->post_content ) && has_shortcode( $post->post_content , 'wwof_product_listing' ) ) { ?>
(function($) {
$(document).ready(function(){
function wwof_refresh_quantity_increments(){
$( 'div.quantity:not(.buttons_added), td.quantity:not(.buttons_added)' ).addClass( 'buttons_added' ).append( '' ).prepend( '' );
}
$( document ).on( 'updated_wc_div', function() {
wwof_refresh_quantity_increments();
} );
$( document ).on( 'click', '.plus, .minus', function() {
// Get values
var $qty = $( this ).closest( '.quantity' ).find( '.qty'),
currentVal = parseFloat( $qty.val() ),
max = parseFloat( $qty.attr( 'max' ) ),
min = parseFloat( $qty.attr( 'min' ) ),
step = $qty.attr( 'step' );
// Format values
if ( ! currentVal || currentVal === '' || currentVal === 'NaN' ) currentVal = 0;
if ( max === '' || max === 'NaN' ) max = '';
if ( min === '' || min === 'NaN' ) min = 0;
if ( step === 'any' || step === '' || step === undefined || parseFloat( step ) === 'NaN' ) step = 1;
// Change the value
if ( $( this ).is( '.plus' ) ) {
if ( max && ( currentVal >= max ) ) {
$qty.val( max );
} else {
$qty.val( currentVal + parseFloat( step ) );
}
} else {
if ( min && ( currentVal 0 ) {
$qty.val( currentVal - parseFloat( step ) );
}
}
// Trigger change event
$qty.trigger( 'change' );
});
wwof_refresh_quantity_increments();
});
})(jQuery);
<?php
}
} );
Wholesale Order Form with HTML5 input
Wholesale Order Form Quantity Plus and Minus Buttons (This inherit』s your theme』s styling so please style accordingly)