
WooCommerce: Add Plus & Minus Buttons To Quantity Input
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; }