WooCommerce: Add Plus & Minus Buttons To Add to Cart Quantity Input

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.

Note: you will probably also require some additional CSS, as your theme might give a “float” to the quantity DIV while by default HTML buttons take inline-block. I’ve added some CSS valid for the Storefront theme below.

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

Snippet (PHP): Display Plus & Minus Quantity Buttons @ WooCommerce Single Product Page


/**
 * @snippet       Plus Minus Quantity Buttons @ WooCommerce Single Product Page
 * @how-to        Watch tutorial @ https://businessbloomer.com/?p=19055
 * @sourcecode    https://businessbloomer.com/?p=90052
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 3.5.1
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */ 

// -------------
// 1. Show Buttons

add_action( 'woocommerce_before_add_to_cart_quantity', 'bbloomer_display_quantity_plus' );

function bbloomer_display_quantity_plus() {
	echo '<button type="button" class="plus" >+</button>';
}

add_action( 'woocommerce_after_add_to_cart_quantity', 'bbloomer_display_quantity_minus' );

function bbloomer_display_quantity_minus() {
	echo '<button type="button" class="minus" >-</button>';
}

// -------------
// 2. Trigger jQuery script

add_action( 'wp_footer', 'bbloomer_add_cart_quantity_plus_minus' );

function bbloomer_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
}

Snippet (CSS): Adjust the Quantity Div to Make Sure Plus and Minus Buttons Stay on Either Side of It (Storefront Theme)

As I said in the intro, our plus and minus HTML buttons will take a display:inline-block. If your theme applies a float to the quantity DIV, then the buttons will display on the same side, and not one on the left and one on the right.

This CSS is valid for Storefront theme (you’ll need to amend it based on your custom one):


.single-product div.product form.cart .quantity {
    float: none;
    margin: 0;
    display: inline-block;
}

Where to add this code?

You can place PHP snippets at the bottom of your child theme functions.php file (before "?>" if you have it). CSS, on the other hand, goes in your child theme style.css file. Make sure you know what you are doing when editing such delicate files - if you need more guidance, please take a look at my free WooCommerce Customization video tutorial.

Does this snippet still work?

Please let me know in the comments if everything worked as expected. I would be happy to revise the snippet if you report otherwise (please provide screenshots). I have tested this code with Storefront theme, the WooCommerce version listed above and a WordPress-friendly hosting on PHP 7.

If you think this code saved you time & money, please join other Business Bloomer supporters and avail of 365 days of WooCommerce benefits. Thank you in advance :)

Need Help with WooCommerce?

Check out these free videos, tutorials and tips!

  • how-to-edit-woocommerce-with-php-snippets
  • woocommerce-hooks-add_action-list-visual
  • woocommerce-customize-single-product-page-PHP
  • woocommerce-customize-shop-page-PHP
  • woocommerce-advanced-customization
  • how-to-edit-woocommerce-cart
  • woocommerce-customize-checkout-page-PHP
  • woocommerce-email-customization
  • woocommerce-conditional-logic

Rodolfo Melogli

Author, WooCommerce expert, WordCamp speaker and Internet marketer, Rodolfo Melogli has worked as a WooCommerce freelancer since 2011. He helps entrepreneurs and developers overcome their WooCommerce nightmares :) Rodolfo is the organiser of WordCamp Dublin, the Dublin WooCommerce Meetup, the Dublin Ecommerce Meetup and the Dublin WordPress Meetup. He enjoys interacting with people, travelling and chasing tennis & soccer balls. Of course, he loves pizza too.

22 thoughts on “WooCommerce: Add Plus & Minus Buttons To Add to Cart Quantity Input

  1. Hello!
    It works perfectly.
    I just have a question. How to make minus before quantity and plus after quantity!
    Thanks!

    1. Hello there, thanks so much for your comment! Yes, this is possible – unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. Thanks a lot for your understanding! ~R

  2. Hey thanks for the snippet,

    If there are mutiple products listed on the page (groups or variations) the quantity will be updated in all fields.
    A simple fix is to move away from closest selector and use siblings:

    Replace this:
    var qty = $( this ).closest( ‘form.cart’ ).find( ‘.qty’ );
    With this:
    var qty = $( this ).siblings( ‘.quantity’ ).find( ‘.qty’ );

    1. This is awesome! Thank you ๐Ÿ™‚

  3. Hi Rodolfo

    Can we use this code i.e adding Plus and Minus buttons to increment/decrement product quantity at mini cart with storefront theme ?

    If so, can you please guide me about how to achieve this integration for mini cart.

    Your help will be greatly appreciated, many thanks.

    Although, i have added Plus/Minus quantity change buttons and are working fine, but it takes much time to get response back and then to update cart.

    I am not sure whether this approach is correct or not, Please help me.

    Thanks

    Regards

    Yash

    1. Hello Yash, thanks so much for your comment! Yes, this is possible – unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding! ~R

  4. This code does not work on varible products.

    1. Hey Manu, thanks for your comment! I just tested this again with Storefront theme and it works perfectly. Maybe your theme (or another plugin) is messing/conflicting with my snippet?

      To troubleshoot, go to WP Dashboard > WooCommerce > System Status: what errors do you see in red font?

      Also, take a look at this tutorial to see how to troubleshoot: https://businessbloomer.com/woocommerce-troubleshooting-mistakes-to-avoid/

      Finally, can you try switching temporarily to “Twentyseventeen” or “Storefront” theme and let me know if it works?

      Hope this helps!

      R

  5. Hey I tried to get this working on the divi theme and it did not really work. Any tips?

    1. Hiya Peter, thanks for your comment! Divi is highly customized, so possibly my snippet will need to be re-adapted and slightly customized. Unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding! ~R

  6. Great !!!!

    Its working and easy to implement this code.

    Thanks

    1. Awesome ๐Ÿ™‚

  7. Hi Rodolfo,
    thanks for that great solution! It works for me on product pages – but on cart the ugly default buttons are still showing up. How can I change the buttons there? I’ve tried it but didn’t find the right hook ๐Ÿ™
    Would be glad if you can post a solution for that here,
    thanks a lot,
    Thomas

    1. Hello Thomas, thanks so much for your comment! Yes, this is possible – but unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding! ~R

  8. This is a great idea.
    Will this code snippet also work with the basket?

    1. Marcel, thanks for your comment! No, it only works on the single product page – you’ll need to implement the Cart bit yourself ๐Ÿ™‚

  9. Hello Mr, For article WooCommerce: Add Plus & Minus Buttons To Add to Cart Quantity Input. Where to add this code? Which File ?

    Please help me,
    Thank You,
    Ika

    1. Hey Ika, thanks for your comment! You can place this in your child theme’s functions.php file – if you need more guidance, please take a look at this video tutorial: https://businessbloomer.com/woocommerce-customization-hangout/. Hope this helps!

  10. Hey,
    Thanks for that. The buttons showed up and working fine. The problem is that they are displayed on wrong place at the page, not even close to the input field and that their style is very different. Any ideas how to fix this? You’ve mentioned also that the CSS goes to style.css file but I don’t see and CSS here?
    Thanks,
    Peter

    1. Hey Peter, thanks for your comment! I’ve added some CSS, valid for Storefront theme, that you can re-adapt to your custom theme and make this work. Let me know ๐Ÿ™‚

  11. Hi Rodolfo,
    Seems you are reading my mind ๐Ÿ™‚ I needed this just now!

    Great tut, (as usual)
    Thanks,
    Ferenc

    1. Excellent ๐Ÿ™‚

Questions? Feedback? Support? Leave your Comment Now!
_____
If you are writing code, please wrap it between: [php]code_here[/php]. Failure to complying with this (as well as going off topic) will result in comment deletion. You should expect a reply in about a week - this is a popular blog but I need to get paid work done first. Please consider joining #BloomerArmada to ask me 1-to-1 WooCommerce questions. Thank you :)
¯¯¯¯¯

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.