Home » WooCommerce: Add to Cart Quantity Plus & Minus Buttons

WooCommerce: Add to Cart Quantity Plus & Minus Buttons

by Tutor Aspire

Here’s a quick 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.

This snippet comes with a jQuery script as well, as we need to detect whether the plus or minus are clicked and consequently update the quantity input. jQuery might look difficult to many, but the beauty of this is that you don’t need to have a degree in jQuery – just copy/paste and see the magic happen.

How to show Plus and Minus buttons beside the Add to Cart Quantity input @ WooCommerce single Product Page

PHP Snippet: Display Plus & Minus Quantity Buttons @ WooCommerce Single Product Page And Cart Page

Note: you will probably also require some custom CSS, as your theme might give a “float” display to the quantity buttons (by default HTML buttons take inline-block).

/**
 * @snippet       Plus Minus Quantity Buttons @ WooCommerce Product Page & Cart
 * @how-to        Get tutoraspire.com FREE
 * @author        Tutor Aspire
 * @compatible    WooCommerce 5
 * @donate $9     https://tutoraspire.com
 */
 
// -------------
// 1. Show plus minus buttons
 
add_action( 'woocommerce_after_quantity_input_field', 'tutoraspire_display_quantity_plus' );
 
function tutoraspire_display_quantity_plus() {
echo '';
}
 
add_action( 'woocommerce_before_quantity_input_field', 'tutoraspire_display_quantity_minus' );
 
function tutoraspire_display_quantity_minus() {
echo '';
}
 
// -------------
// 2. Trigger update quantity script
 
add_action( 'wp_footer', 'tutoraspire_add_cart_quantity_plus_minus' );
 
function tutoraspire_add_cart_quantity_plus_minus() {

if ( ! is_product() && ! is_cart() ) return;
   
wc_enqueue_js( "   
          
$(document).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( min ).change();
} else if ( val > 1 ) {
qty.val( val - step ).change();
}
}

});
 
" );
}

You may also like