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!