How To Add Increment Quantity Plus And Minus (+/-) Buttons On The Order Form (For Non-HTML5 Themes)

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('<div class="quantity">', '<div class="quantity buttons_added"><button type="button" class="minus">-</button>', $quantity_field);
    $quantity_field = str_replace('</div>', '<button type="button" class="plus">+</button></div>', $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' ) ) { ?>
        <script type="text/javascript">
        (function($) {
            
            $(document).ready(function(){
                
                function wwof_refresh_quantity_increments(){
                    $( 'div.quantity:not(.buttons_added), td.quantity:not(.buttons_added)' ).addClass( 'buttons_added' ).append( '<input type="button" value="+" class="plus" />' ).prepend( '<input type="button" value="-" class="minus" />' );
                }
                $( 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 <= min ) ) {
                            $qty.val( min );
                        } else if ( currentVal > 0 ) {
                            $qty.val( currentVal - parseFloat( step ) );
                        }
                    }
                    // Trigger change event
                    $qty.trigger( 'change' );
                });
                wwof_refresh_quantity_increments();
            });
        })(jQuery);
        </script> <?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)

in WooCommerce Wholesale Order Form
[data-image-id='gourmet_bg']
[data-image-id='gourmet_bg']
[data-image-id='gourmet_bg']
[data-image-id='gourmet_bg']
[data-image-id='gourmet_bg']
[data-image-id='gourmet_bg']
[data-image-id='gourmet']
[data-image-id='gourmet']
[data-image-id='gourmet']
[data-image-id='gourmet']
[data-image-id='gourmet']
[data-image-id='gourmet']
[data-image-id='gourmet']
[data-image-id='gourmet']
[data-image-id='gourmet']
[data-image-id='gourmet']