Increase and Decrease Quantity using Plus + and Minus – Buttons in WooCommerce

Add quantity increase and decrease button in WooCommerce product page using increment  buttons plus + and minus – . These button work great and product will be added to cart.  Also help you to looks better quantity input field.

Add plus + and minus – buttons to quantity input on product page in WooCommerce

If you don’t want to customize your theme you can check out theme most of them already contain this kind of increment buttons for WooCommerce also have more features Check Our Themes

Copy and paste below PHP and jQuery code into theme function.php file. Make sure backup of themes file before doing any changes and you have access to server via hosting panel or FTP to prevent live website down.

/* Show Buttons */
add_action( 'woocommerce_after_add_to_cart_quantity', 'insertcart_display_quantity_plus' );

function insertcart_display_quantity_plus() {
  echo '<button type="button" class="plus" >+</button>';
}
add_action( 'woocommerce_before_add_to_cart_quantity', 'insertcart_display_quantity_minus' );
function insertcart_display_quantity_minus() {
  echo '<button type="button" class="minus" >-</button>';
}

add_action( 'wp_footer', 'insertcart_add_cart_quantity_plus_minus' );
function insertcart_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 }

With the help of above code plus + and minus – increment buttons will be visible near quantity  input field but we need add some CSS to this as well. Here is CSS code for design and fix align issue.

button.minus {
  float: left;
  padding: 8px 14px;
  background: #f1f1f1;
  margin-right: 5px;
  border: 1px solid #ddd;
  border-radius: 50%;
  font-size: 20px;
  font-weight: bold;
}
button.plus {
  float: left;
  padding: 11px 14px;
  background: #f1f1f1;
  margin-right: 5px;
  border: 1px solid #ddd;
  border-radius: 50%;
}

If you have any issue please comment.