Add to Cart Quantity Plus & Minus Buttons

Here’s a snippet you can simply copy/paste to show a “+” and a “-” on each side of the quantity number input on the WooCommerce single product page.

add_action( 'woocommerce_after_quantity_input_field', 'codeithub_display_quantity_plus' );
  
function codeithub_display_quantity_plus() {
   echo '<button type="button" class="plus" >+</button>';
}
  
add_action( 'woocommerce_before_quantity_input_field', 'codeithub_display_quantity_minus' );
  
function codeithub_display_quantity_minus() {
   echo '<button type="button" class="minus" >-</button>';
}
  

  
add_action( 'wp_footer', 'codeithub_add_cart_quantity_plus_minus' );
  
function codeithub_add_cart_quantity_plus_minus() {
 
   if ( ! is_product() && ! is_cart() ) return;
    
   wc_enqueue_js( "   
           
      $('form.cart,form.woocommerce-cart-form').on( 'click', 'button.plus, button.minus', function() {
  
         var qty = $( this ).parent( '.quantity' ).find( '.qty' );
         var val = parseFloat(qty.val());
         var max = parseFloat(qty.attr( 'max' ));
         var min = parseFloat(qty.attr( 'min' ));
         var step = parseFloat(qty.attr( 'step' ));
 
         if ( $( this ).is( '.plus' ) ) {
            if ( max && ( max <= val ) ) {
               qty.val( max );
            } else {
               qty.val( val + step );
            }
         } else {
            if ( min && ( min >= val ) ) {
               qty.val( min );
            } else if ( val > 1 ) {
               qty.val( val - step );
            }
         }
 
      });
        
   " );
}

Before:

See also  Change Add to Cart Quantity into a Drop-down
Default Add to cart Button

After:

Plus and Minus Buttons

Leave a Reply

Your email address will not be published. Required fields are marked *