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>';
}

// Note: to place minus @ left and plus @ right replace above add_actions with:
// add_action( 'woocommerce_before_add_to_cart_quantity', 'bbloomer_display_quantity_minus' );
// add_action( 'woocommerce_after_add_to_cart_quantity', 'bbloomer_display_quantity_plus' );
 
// -------------
// 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 snippet?

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 files - if you need more guidance, please take a look at my free video tutorial "Where to Place WooCommerce Customization?"

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 Customization?

Check out these free video tutorials!

  • how-to-edit-woocommerce-with-php-snippets
  • woocommerce-hooks-add_action-list-visual
  • woocommerce-customize-single-product-page-PHP

Rodolfo Melogli

Author, WooCommerce expert and WordCamp speaker, Rodolfo has worked as a WooCommerce freelancer since 2011. His goal is to help entrepreneurs and developers overcome their WooCommerce nightmares. Rodolfo loves travelling, chasing tennis & soccer balls and, of course, wood fired oven pizza.

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

  1. Hi Rodolfo, first I want to say this looks and works amazing. I think it would be really useful to add another condition to the jQuery script that prevents the plus/minus from showing on products sold individually, since the the plus and minus are showing on these products and look bad aesthetically.

    I’ve been playing around with adding the function

    is_sold_individually

    but cant figure out how to prevent the jQuery script from running if this returns true. Any insight would be greatly appreciated!

    1. Good point! You could just use this line in order to exit from the function early and avoid triggering the jQuery:

      if ( $product->is_sold_individually() ) return:
      
  2. woocommerce very hard pluging πŸ™

    1. Yes – that’s why I’m here πŸ™‚

      1. after add this code it only show the plus and minus button…….
        no number show why??

        1. Naeem, 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, disable all plugins but WooCommerce and also switch temporarily to “Twentyseventeen” theme (load the snippet there in functions.php) – does it work? If yes, you have a problem with your current theme or one of the plugins.

          Hope this helps!

          R

  3. Hi,
    Nice work, but it’ll be great if when you press “plus” or “minus” buttons, the price is updated automatically AND remove the up/down number scroll included into input control…

    1. It would be nice, yes πŸ™‚

  4. Hello. Thanks for this great code snippet. I would like to ask how to interchange the position of ‘+’ and ‘-‘ button? Thanks!

    1. Hi there James. Is minus to the left and plus to the right the standard way of doing it? If yes I’ll revise the snippet. Let me know

      1. “Is minus to the left and plus to the right the standard way of doing it?”

        Yes, I think so.

        1. Cheers. I’ve now added a note to the snippet to achieve that

  5. Would this be appropriate for the cart page? I want to extend this functionality to the cart page.

    add_filter( 'woocommerce_cart_item_quantity', 'wc_cart_item_quantity', 10, 3 );
    function wc_cart_item_quantity( $product_quantity, $cart_item_key, $cart_item ){
        if( is_cart() ){
          $product_quantity = sprintf( '<div class="quantity"><div class="input-group-prepend"><button class="btn btn-sm btn-outline-secondary minus" type="button"><i class="fas fa-minus"></i></button></div><input type="number" name="cart[%1$s][qty]" min="0" value="%2$s" class="input-text qty text" title="Qty" inputmode="numeric" /> <div class="input-group-append"><button class="btn btn-sm btn-outline-secondary plus" type="button"><i class="fas fa-plus"></i></button></div></div>', $cart_item_key, $cart_item['quantity'] );
        }
        return $product_quantity;
    }
    
    1. It might, but I can’t review code here via the blog comments – let me know if it works for you

  6. Hello Rodolfo,

    I created a plugin that adds quantity buttons and removes default increment arrows inside quantity field, starting from your PHP snippet and script πŸ™‚ Then I improved it and extended to cart page as well.

    https://wordpress.org/plugins/qty-increment-buttons-for-woocommerce/

    Existing solutions disappointed me with quality, especially that they simply insert buttons and do close to nothing with formatting; the buttons have a different height than quantity input field / Add to cart button, break to next line, there was no plugin which would merge buttons together with input field what in my opinion provides the best visuals and saves a bit of screen space.

    It is very hard to make inserted buttons display as intended on all themes, but I think that I came really close to it.

    Kind Regards

    1. Nice!

  7. This work for me. This is for page cart woocommerce

    $('form.woocommerce-cart-form').on( 'click', 'a.plus, a.minus', function() {
            // Get current quantity values
            var qty = $( this ).parent().find( '.qty' );
            var btnupdate = $('form.woocommerce-cart-form').find( 'button[name="update_cart"]' );
            var val   = parseInt(qty.val());
            var max = parseInt(qty.attr( 'max' ));
            var min = parseInt(qty.attr( 'min' ));
            var step = parseInt(qty.attr( 'step' ));
    
            console.log(max);
            // Change the value if plus or minus
            if ( $( this ).is( '.plus' ) ) {
            	if( val  min){
            		qty.val( val - step );
            		btnupdate.removeAttr('disabled');
            	}
            }
             
         });
    
    1. Thank you

  8. Hi Rodolfo;

    I placed the buttons and all is work … but why shows 8 or 11 digits more than use to?

    Example.
    My article starts with 1.81 if you make the sum several times it allways 2 digits befor the coma and the sum puts 8 digits before the coma.

    Can you solve me this issue?
    Thanks
    Jose Maria

    1. Hi JoMa, I think this only works with default WooCommerce quantities (1, 2, 3, etc.)

  9. Hey,
    The code works, but the minus button is on the next line, so it looks like:
    + Input

    Sadly it’s unusable for my shop that way.
    Can you give me a CSS (or php) snippet so I can play around with padding/margin?
    It shoud be few lines of code to do that, please don’t charge me for it, otherwise thank you anyway, i’ll find something else.
    Good day! πŸ™‚

    1. Hi Chiara, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. Thanks a lot for your understanding!

  10. Hey! Thanks a lot for this, it worked well on my classic product pages ! Any idea how I could also add these buttons in the bundled products (Woocommerce product bundle plugin)… I can’t succeed to make it work so that people can add product in their bundle. Thanks !

    1. Hello Armand, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  11. It doesn’t work on quick view product page :/

    1. Not default WooCommerce, sorry.

  12. 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

  13. 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 πŸ™‚

  14. 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

  15. 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

  16. 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

  17. Great !!!!

    Its working and easy to implement this code.

    Thanks

    1. Awesome πŸ™‚

  18. 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

  19. 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 πŸ™‚

  20. 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!

  21. 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 πŸ™‚

  22. 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 *