In this tutorial, we are going to show you a very simple way to show a +
and a -
(plus & minus) on each side of the quantity number input on the WooCommerce single product page. We will also show you how you can apply this to the product archive page as well.
For this, we use jQuery as we need to detect whether the plus or minus are clicked so that we can update the quantity input value. jQuery code can be daunting for some, but the beauty of this is that it’s a simple copy and paste tutorial.
Do note, you may require some additional CSS to what we have provided to match the theme of your website. We’ve added some CSS to this tutorial to get you going. What you will end up with is something like this:
Here is the snippet to add plus and minus buttons in WooCommerce
You can simply copy and paste the below code to your functions.php
file:
/**
* Plus Minus Quantity Buttons @ WooCommerce Single Product Page
*/
// -------------
// 1. Show Buttons
add_action( 'woocommerce_before_add_to_cart_quantity', 'silva_display_quantity_plus' );
function silva_display_quantity_plus() {
echo '<button type="button" class="plus" >+</button>';
}
add_action( 'woocommerce_after_add_to_cart_quantity', 'silva_display_quantity_minus' );
function silva_display_quantity_minus() {
echo '<button type="button" class="minus" >-</button>';
}
// Note: to place minus @ left and plus @ right replace above add_actions with:
// add_action( 'woocommerce_before_add_to_cart_quantity', 'silva_display_quantity_minus' );
// add_action( 'woocommerce_after_add_to_cart_quantity', 'silva_display_quantity_plus' );
// -------------
// 2. Trigger jQuery script
add_action( 'wp_footer', 'silva_add_cart_quantity_plus_minus' );
function silva_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
}
To get this looking like our example, we need to add some CSS code as well. This depends on the theme but to get you started, you can add the following CSS code:
.single-product div.product form.cart .quantity {
float: none;
margin: 0;
display: inline-block;
}
How we used this in our example website; Product Archive
We simply added the below code to our functions.php
file:
/**
* Show Quantity On Products
*/
add_action( 'woocommerce_before_add_to_cart_quantity', 'silva_echo_qty_front_add_cart' );
function silva_echo_qty_front_add_cart() {
echo '<div class="qty-txt">Quantity: </div>';
}
/**
* Plus Minus Quantity Buttons @ WooCommerce Single Product Page
*/
// -------------
// 1. Show Buttons
add_action( 'woocommerce_before_add_to_cart_quantity', 'silva_display_quantity_plus' );
function silva_display_quantity_plus() {
echo '<button type="button" class="minus" >-</button>';
}
add_action( 'woocommerce_after_add_to_cart_quantity', 'silva_display_quantity_minus' );
function silva_display_quantity_minus() {
echo '<button type="button" class="plus" >+</button>';
}
// Note: to place minus @ left and plus @ right replace above add_actions with:
// add_action( 'woocommerce_before_add_to_cart_quantity', 'silva_display_quantity_minus' );
// add_action( 'woocommerce_after_add_to_cart_quantity', 'silva_display_quantity_plus' );
// -------------
// 2. Trigger jQuery script
add_action( 'wp_footer', 'silva_add_cart_quantity_plus_minus' );
function silva_add_cart_quantity_plus_minus() {
?>
<script type="text/javascript">
jQuery(document).ready(function($){
$('.woocommerce-variation-add-to-cart').on( 'click', 'button.plus, button.minus', function() {
// Get current quantity values
if ( $( this ).is( '.minus' ) ) {
var qty = $(this).next().find('.qty');
} else {
var qty = $(this).prev().find('.qty');
}
var val = parseFloat(qty.val());
console.log(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
}
Conclusion
Simple right? We can now add a plus and minus button for each product on either the archive product page or the single product page. This can be extremely useful for both pages, to be honest. Quite often, a lot of people don't know how to work a number input field, so instead, we can add two simple buttons to increase or decrease the quantity of a product you wish to add to the cart. It's a great simple way to improve the UI/UX to your WooCommerce store, that's for sure!
If you enjoyed this tutorial or if you require any help with the setup, feel free to drop us a comment below and we'll be happy to assist you with this!
Great stuff! Thanks. How would you apply exactly the same concept but to the WooCommerce shopping cart?
To do that, you could do it like so:
Hi! When I’m using the code for Archive Product then website is going crashed, getting error in that code, please help me
Please provide me with the console error or error from your logs so I can check.
How do you place the “add to cart” button below quantity?
I’m using hello elementor, and the “add to cart” button is placed to the right of the quantity selector.
Your setup looks way better π
There’s a few extra steps to get this working on the Cart page.
Change:
var qty = $( this ).parent( ‘.quantity’ ).find( ‘.qty’ );
To:
var qty = $(this).closest(‘.quantity’).find(‘.qty’);
And most important, trigger the Update cart button if the quantity is changed. Add this after the
if ($(this).is(“.plus”)) { bloc of code:
// Trigger change event
qty.trigger( ‘change’ );
thanks for shopping cart code
Thanks , Its Perfect
But I suggest to add this code
.cart .minus , .cart .plus {
display:none;
}
<?php
}
end of "quantity-input.php" file
because in sold individual products, pluss and minus buttons display
Thanks, alot. I’ve searched the whole web looking fo this for one of my Ecommerce websites. Thanks