WooCommerce: Add Plus & Minus Buttons To Quantity Input

September 11, 2020

Here’s how you can easily add some plus/minus buttons around the quantity add to cart input.

First, the code to add the buttons to the page.

add_action( 'woocommerce_before_add_to_cart_quantity', 'mystore_display_quantity_plus' );

function mystore_display_quantity_plus() {
   echo '<button type="button" class="plus" >+</button>';
}

add_action( 'woocommerce_after_add_to_cart_quantity', 'mystore_display_quantity_minus' );

function mystore_display_quantity_minus() {
   echo '<button type="button" class="minus" >-</button>';
}

Next the jQuery to control changing the quantity when the buttons are clicked.

add_action( 'wp_footer', 'mystore_add_cart_quantity_plus_minus' );

function mystore_add_cart_quantity_plus_minus() {
   // Only run this on the single product page
   if ( ! is_product() ) return;
?>
<script type="text/javascript">

jQuery(document).ready(function($){

$('form.cart').on( 'click', 'button.plus, button.minus', function() {

// Get current quantity values
   var qty = $( this ).closest( 'form.cart' ).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' ));

// Change the value if plus or minus
   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 );
      }
   }
});

});

</script>
<?php
}

Finally, depending on your theme you may need to add some css. Here is some sample css for the storefront theme to get things looking good.

.single-product .cart {
   display: flex;
}

.single-product div.product form.cart .quantity {
   float: none;
   display: inline-block;
}

.single-product .quantity {
   margin-left: 0.875em !important;
   margin-right: 0.875em !important;
}

.single-product .minus {
   margin-right: 0.875em !important;
}