plus/minus (+/-) button in the product pages to enable customers to change the quantity in cart for magento

plus/minus (+/-) button in the product pages to enable customers to change the quantity in cart for magento

To have plus and minus buttons to increment and decrement our product quantity, rather than just a simple input box. By default, Magento provides a text box for entering quantity wherein customers can change the quantity in the text box and submit the “Add to Cart” button. That is a lot of effort for the user; we want to make this process simpler.We can do this by adding +1 and -1 links to change the quantity of each item. For this we have written a very simple JavaScript snippet which takes the current value of the textbox and adjusts it. Once this is done, we submit the form to minimize customer effort.Here I have used images for the links, but obviously you could use texts as well. Following are the HTML and Javascript code snippets which could be merged with: app/design/frontend/[theme_name]/default/template/catalog/product/view/addtocart.phtml


plus/minus button


plus/minus button


and now the jQuery to make it work.


Share this post

Comments (8)

  • Kannan Reply

    Very Nice Article. 🙂

    July 16, 2015 at 11:15 am
  • Nele Reply

    Hi, where should I insert the jquery? It would be nice if you can help me 🙂

    January 31, 2017 at 2:33 pm
    • Sumeet Shukla Reply

      Hi Nele, as mentioned in the post; you should be able to do it in: app/design/frontend/[theme_name]/default/template/catalog/product/view/addtocart.phtml

      January 31, 2017 at 2:45 pm
  • Maxime Huran Reply

    This code does not manage Magento increments quantity but is a good base to add this functionality

    April 9, 2017 at 6:57 am
  • daveyx Reply

    in my case the override must be placed in app/design/frontend/[vendorname]/[themename]/Magento_Catalog/templates/product/view/

    Kind regards

    May 17, 2017 at 11:34 am
  • daveyx Reply

    based on this howto, i posted a working solution on my blog:

    Kind regards

    May 17, 2017 at 2:48 pm
  • Vivek Reply

    Hi, I got that we need to Update ‘addtocart.phtml’ file, with your given code. But after adding your code ADD TO CART option alongwith Edit-text disappear front the product page. Nothing similar to Image you are showing is happening.
    can u .. llet me how should i update that file, or where should i add your codes in that file or can u send me the Updated file as reference.


    July 14, 2017 at 6:49 am
  • Suthan alley Reply

    I am working on custom module to show the quantity increment/decrement using knouckoutJS.
    But I am having some issues I don’t know why the quantity increment/decrement button not working after clicking as I have followed all the steps mention in this tutorial and I have also tried your steps. I have been using the code mention in the tutorial. Is something wrong with the code or i am not doing it properly ?

    December 26, 2017 at 6:57 am

Leave a comment

Your email address will not be published.