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

Solve The Big Three Problems With Wholesaling In WooCommerce

Add wholesale pricing to products   Streamline your ordering   Register & manage wholesale customer

Explore The Plugin Suite  

[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']