jQuery, Magento2

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 always try to make the online shopping platform as easy as possible. By default Magento 2 allows, there are no increment/decrement quantity buttons.

So in order to improve the user experience you can add Increment/Decrement button.

You can add on PLP (Product Listing Page), PDP(Product Detail Page), Cart Page and in Mini cart also.

Product Listing Page : To add Quantity Increment/Decrement button on PLP, need to override the list.phtml file in active theme.

Here I have made a theme vendor name V4U and theme name is Sampletheme.

File Path : app/design/frontend/V4U/Sampletheme/Magento_Catalog/templates/product/list.phtml

Add the below code to your list.phtml before the “Add to Cart” button.

Product Detail Page : To add Quantity Increment/Decrement button on PDP, need to override the addtocart.phtml file in active theme.

File Path : app/design/frontend/V4U/Sampletheme/Magento_Catalog/templates/product/view/addtocart.phtml

Add qty-default class in input type in number.

Now add below span tag and jQuery script in addtocart.phtml file.

And Now addtocart.phtml looks like

Cart Page : To add Quantity Increment/Decrement button on Cart Page, need to override the default.phtml file in active theme.

File Path : app/design/frontend/V4U/Sampletheme/Magento_Checkout/templates/cart/item/default.phtml

Now add below two buttons after control qty class.

Now add below jQuery Script in the end of file.

And Now default.phtml looks like

Mini Cart : To add Quantity Increment/Decrement button on Mini Cart, need to override the minicart.phtml & default.html files in active theme.

File Path : app/design/frontend/V4U/Sampletheme/Magento_Checkout/templates/cart/minicart.phtml

Now add below jQuery Script in minicart.phtml

And now add below two classes in default.html inside the details-qty qty class.

File Path : app/design/frontend/V4U/Sampletheme/Magento_Checkout/web/template/minicart/item/default.html

Now default.html looks like

After adding this need to run below Magento 2 commands :

php bin/magento setup:upgrade

php bin/magento setup:di:compile

php bin/magento setup:static-content:deploy -f

php bin/magento cache:clean

🙂 Happy Coding. Keep Liking & Sharing 💻

Tagged ,