[Woocommerce] How to add plus and minus buttons to quantity field

WooCommerce plus and minus buttons to the quantity field are a better way to increase or decrease the number of products in the shopping cart.

By default, the quantity field in Woocommerce is a number type input. It looks like a field with arrows up and down. By clicking these arrows, customers can increase or decrease the number of products in the cart or on the product page. There are more elegant views: plus and minus signs instead of arrows look much better. In this post, I share snippets of how to add to WooCommerce plus and minus buttons to the quantity field.

Quantity field by default:

Quantity field with plus and minus buttons:

There are many posts and snippets on replacing arrows with plus and minus signs, but most of them are either the carts with legacy Woocommerce code or the cart without the function of automatic updates the sum of the purchases. And one more problem developers offer to override the quantity-input template. I have tried many different snippets. No one of them was perfect. So, I have modified the code, and viola: I have the code which:

1. Add plus and minus signs

2. Hide default arrows

3. Cart automatically updates after clicking plus or minus and recalculating the total sum

4. Don’t need to override the quantity-input.php template

5. And we add nice SVG plus and minus signs ?

Step 1 – add plus and minus buttons

Add the below code to functions.php file of the child theme or custom PHP snippets plugin:

add_action( 'woocommerce_after_quantity_input_field', 'ab_quantity_plus' );
  
function ab_quantity_plus() {
   echo '<div class="plus"> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.5 9.4h-4.9V4.5a.6.6 0 10-1.2 0v4.9H4.5a.6.6 0 000 1.2h4.9v4.9a.6.6 0 001.2 0v-4.9h4.9a.6.6 0 100-1.2z" fill="currentColor"></path></svg> </div>';
}
  
add_action( 'woocommerce_before_quantity_input_field', 'ab_quantity_minus' );
  
function ab_quantity_minus() {
   echo '<div class="minus"> <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.5 9.45h-11a.55.55 0 000 1.1h11a.55.55 0 000-1.1z" fill="currentColor"></path></svg> </div>';
}

Step 2 — add javascript code

This jQuery code:

1. increase and decrease products quantity when customer click plus and minus button
2. automatically update the cart (recalculate total sum)

Add this code at the end of functions.php file of your child theme of to custom php snippet plugin.

function ab_add_quantity_script(){
    if( ! is_admin() ) { ?>
<script>
jQuery(document).ready(function($){
$(document).on('click', '.plus', function(e) {
    $input = $(this).prev('input.qty');
    var val = parseInt($input.val());
    var step = $input.attr('step');
    step = 'undefined' !== typeof(step) ? parseInt(step) : 1;
    $input.val( val + step ).change();
	$('[name="update_cart"]').trigger('click'); 
});
$(document).on('click', '.minus', function(e) {
    $input = $(this).next('label').next('input.qty');
    var val = parseInt($input.val());
    var step = $input.attr('step');
    step = 'undefined' !== typeof(step) ? parseInt(step) : 1;
    if (val > 0) {
        $input.val( val - step ).change();
    }
	 $('[name="update_cart"]').trigger('click'); 
});
});		
</script>
<?php
    }
}

add_action( 'wp_footer', 'ab_add_quantity_script' );

Step 3 — add css код to remove default arrows from input

This code add to style.css file of your child theme or in Appearance -> Settings -> Additional CSS. Or, if you use Elementor PRO you can add this code in Elementor -> Custom Code section (add it in the < /body> – End)

.quantity input::-webkit-outer-spin-button,
.quantity input::-webkit-inner-spin-button {
     display: none;
     margin: 0;
}
.quantity input.qty {
     appearance: textfield;
     -webkit-appearance: none;
     -moz-appearance: textfield;
}

Step 4 — style plus and minus buttons and input field

This step will depends on theme you use. You can customize it by your own. I created this css using Hello theme from Elementor plugin.

/* input style */
.woocommerce .input-text.qty {
    padding: 0 !important;
    text-align: center !important;
    min-height: 18px;
    max-height: 18px;
    width: 2em;
    border: none;
    background: transparent;
}
.product-quantity .quantity, .product .quantity {
   display: flex;
   align-items: center;
   justify-content: center;
}
th.product-quantity {
   text-align: center
}
.product .cart {
   display: flex;
   align-items: center;
}

/* plus and minus buttons style */

.minus, .plus {
    display: flex;
    align-items: center;
    color: #454545;
    padding: 3px;
    height: 26px;
    width: 26px;   
    border: 1px solid #454545;
    border-radius: 50px;
}

.minus:hover,
.plus:hover {
   color: #454545;
   cursor: pointer;
}

There are many things my clients ask me to add or change in their Woocommerce store. For example, recently my client asked to add a notice how much left to free shipping. If you want the same read my post Display “Left to free shipping” notice on the shopping cart