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

Table Of Contents

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