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:

var config = {
    map: {
        '*': {
            'qty-counter': 'Magento_Catalog/js/qty-counter'
        }
    }
};

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:

<div class="box-tocart">
    <div class="fieldset">
        <?php if ($block->shouldRenderQuantity()): ?>
        <div class="field qty">
            <label class="label" for="qty"><span><?php /* @escapeNotVerified */ echo __('Quantity:') ?></span></label>
            <div id="custom-qty" class="control" data-bind="scope: 'qty-counter'">
                <!-- ko template: getTemplate() --><!-- /ko -->
                <script type="text/x-magento-init">
                    {
                        "#custom-qty": {
                            "Magento_Ui/js/core/app": {
                                "components": {
                                    "qty-counter": {
                                        "component": "qty-counter",
                                        "config": {
                                            "qty": <?php echo $block->getProductDefaultQty() * 1 ?>,
                                            "dataValidate": <?php echo json_encode($block->getQuantityValidators()) ?>
                                        }
                                    }
                                 }
                            }
                        }
                    }
                </script>
            </div>
        </div>
        <?php endif; ?>
        <div class="actions">
            <button type="submit"
                    title="<?php /* @escapeNotVerified */ echo $buttonTitle ?>"
                    class="action primary tocart"
                    id="product-addtocart-button">
                <span><?php /* @escapeNotVerified */ echo $buttonTitle ?></span>
            </button>
            <?php echo $block->getChildHtml('', true) ?>
        </div>
    </div>
</div>

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

Add the below code:

'use strict';

define([
    'ko',
    'uiElement'
], function (ko, Element) {
    return Element.extend({
        defaults: {
            template: 'Magento_Catalog/input-counter'
        },

        initObservable: function () {
            this._super()
                .observe('qty');

            return this;
        },

        getDataValidator: function() {
            return JSON.stringify(this.dataValidate);
        },

        decreaseQty: function() {
            var qty;

            if (this.qty() > 1) {
                qty = this.qty() - 1;
            } else {
                qty = 1;
            }

            this.qty(qty);
        },

        increaseQty: function() {
            var qty = this.qty() + 1;

            this.qty(qty);
        }
    });
});

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

Add the below code:

<div class="input-group">
    <span class="input-group__addon">
        <button click="decreaseQty" class="input-group__button input-group__button--decrease">
            <span class="input-group__icon input-group__icon--decrease"></span>
        </button>
    </span>
    <input data-bind="value: qty(), attr: {'data-validate': getDataValidator(), 'title': $t('Qty')}"
           type="number"
           name="qty"
           id="qty"
           maxlength="12"
           class="input-group__input" />
    <span class="input-group__addon">
        <button click="increaseQty" class="input-group__button input-group__button--increase">
            <span class="input-group__icon input-group__icon--increase"></span>
        </button>
    </span>
</div>

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

Please share the solution with fellow developers via social media.

Thank you.