How To Add Quantity Increment And Decrement Button In Magento 2

How To Add Quantity Increment And Decrement Button In Magento 2

The E-commerce store owners try to make the online shopping platform as convenient as possible to shop and make it preferable over brick and mortar stores. As a part of this aim, features like size charts, easy returns, quantity change buttons, WhatsApp sharing buttons, order tracking, and many more are implemented on the product page.

Today I am posting one such solution to add quantity increment and decrement button in Magento 2.  It allows the customers to increase or decrease the quantity of products in the cart on the product page.

The default Magento 2 allows a simple text button to add the number of products to be purchased. However, the increment and decrement buttons on product page make it easier and quicker.

The below code is implemented with the Knockout JS as it is lightweight:

Method to add quantity increment and decrement button in Magento 2:

Create requirejs-config.js in app/design/frontend/[NameSpace]/[theme]/Magento_Catalog/

Add the below code:

Copy file from vendor/magento/module-catalog/view/frontend/templates/product/view/addtocart.phtml
to current theme app/design/frontend/[NameSpace]/[theme]/Magento_Catalog/templates/product/view/

Change code:

Create qty-counter.js in app/design/frontend/[NameSpace]/[theme]/Magento_Catalog/web/js

Add the below code:

Create input-counter.html in app/design/frontend/[NameSpace]/[theme]/Magento_Catalog/web/template

Add the below code:

That’s it to add the increment and decrement button on the product page in Magento 2.

Any doubts about the implementation? Feel free to mention them in the Comments section below. I’ll help you out.

Please share the solution with fellow developers via social media.

Thank you.

Get Weekly Updates

Never miss Magento tips, tricks, tutorials, and news.

Thank you for subscribing.

Something went wrong.

4.3
(based on 6 Reviews)

Sanjay is a co-founder at Meetanshi. He is a Certified Magento Developer who loves creating Magento E-commerce solutions. Owing to his contributions in Magento Forums and posting solutions, he is among the top 50 contributors of the Magento community in 2019. When he is not engrossed with anything related to Magento, he loves to play cricket.

4 comments On How To Add Quantity Increment And Decrement Button In Magento 2

Leave a reply:

Your email address will not be published.