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

From:

plus/minus button

To:

plus/minus button

The HTML:

and now the jQuery to make it work.

jQuery:

Share this post

Comments (7)

  • 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

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

    Kind regards
    daveyx

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

    Hi,
    based on this howto, i posted a working solution on my blog:
    https://www.daveyx.ga/blog/miscellaneous/magento-2-add-incrementdecrement-buttons-for-addtocart/

    Kind regards
    daveyx

    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.

    thnks

    July 14, 2017 at 6:49 am

Leave a comment

Your email address will not be published.