Here’s a quick snippet you can simply copy/paste or a mini-plugin you can install to show a “+” and a “-” on each side of the quantity number input on the WooCommerce single product page and Cart page.
The custom code 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 the code or install the lightweight plugin and see the magic happen.
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 Buttons @ WooCommerce Add Cart Quantity
* @how-to Get CustomizeWoo.com FREE
* @author Rodolfo Melogli
* @compatible WooCommerce 7
* @donate $9 https://businessbloomer.com/bloomer-armada/
*/
// -------------
// 1. Show plus minus buttons
add_action( 'woocommerce_after_quantity_input_field', 'bbloomer_display_quantity_plus' );
function bbloomer_display_quantity_plus() {
echo '<button type="button" class="plus">+</button>';
}
add_action( 'woocommerce_before_quantity_input_field', 'bbloomer_display_quantity_minus' );
function bbloomer_display_quantity_minus() {
echo '<button type="button" class="minus">-</button>';
}
// -------------
// 2. Trigger update quantity script
add_action( 'wp_footer', 'bbloomer_add_cart_quantity_plus_minus' );
function bbloomer_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( max ).change();
} else {
qty.val( val + step ).change();
}
} else {
if ( min && ( min >= val ) ) {
qty.val( min ).change();
} else if ( val > 1 ) {
qty.val( val - step ).change();
}
}
});
" );
}
Mini-Plugin: Business Bloomer WooCommerce Add to Cart Quantity Plus & Minus Buttons
You don’t feel confident with coding? You need a simple solution for displaying “plus” and “minus” buttons beside the add to cart quantity boxes? You don’t want to purchase yet another bloated, expensive plugin? Great!
Business Bloomer WooCommerce Add to Cart Quantity Plus & Minus Buttons is a mini WooCommerce plugin, without the usual hassles. One feature. Lifetime license. No annoying subscriptions. 1 plugin file. A few lines of code. No banners. No up-sells. No WP notifications. Use it on as many websites as you like. Lifetime support. 1-page documentation. No settings.
Quick demo? Here it is:
As you can see the plugin works straight away. Install it, and see the magic happen!