How to add quantity increment/decrement button on Minicart in Magento 2?

The default Magento 2 does not provide an increment-decrement button in the minicart. If you want to set the increment-decrement button in minicart then follow the below steps

Step 1 : Create phtml file like app/design/frontend/Magemonkey/YourTheme/Magento_Checkout/templates/cart/minicart.phtml

Now open and add the below jQuery code in minicart.phtml

<script type="text/javascript">
    require(["jquery"],function($){
        $('body').on("click",".more, .less",function(){
            var obj = $(this);
            var currentQty = obj.siblings('.cart-item-qty').val();
            var iid = obj.siblings('.update-cart-item').attr('data-cart-item');

            if(obj.hasClass('more')){
                var newAdd = parseInt(currentQty)+parseInt(1);
                obj.siblings('.cart-item-qty').val(newAdd);
                obj.siblings('.cart-item-qty').attr('data-item-qty',newAdd);
                //$('#update-cart-item-'+iid).click();
                $('.update-cart-item').show();
            } else {
                if(parseInt(currentQty) > 1){
                    var newAdd = parseInt(currentQty)-parseInt(1);
                    obj.siblings('.cart-item-qty').val(newAdd); 
                    obj.siblings('.cart-item-qty').attr('data-item-qty',newAdd);
                    //$('#update-cart-item-'+iid).click();
                    $('.update-cart-item').show();
                }
            }
        });
    });
</script>

require(["jquery"],function($){

$('body').on("click",".more, .less",function(){

var obj = $(this);

var currentQty = obj.siblings('.cart-item-qty').val();

var iid = obj.siblings('.update-cart-item').attr('data-cart-item');

if(obj.hasClass('more')){

var newAdd = parseInt(currentQty)+parseInt(1);

obj.siblings('.cart-item-qty').val(newAdd);

obj.siblings('.cart-item-qty').attr('data-item-qty',newAdd);

//$('#update-cart-item-'+iid).click();

$('.update-cart-item').show();

} else {

if(parseInt(currentQty) > 1){

var newAdd = parseInt(currentQty)-parseInt(1);

obj.siblings('.cart-item-qty').val(newAdd);

obj.siblings('.cart-item-qty').attr('data-item-qty',newAdd);

//$('#update-cart-item-'+iid).click();

$('.update-cart-item').show();

}

});

</script>

Step 2: Create HTML file like app/design/frontend/Magemonkey/YourTheme/Magento_Checkout/web/template/minicart/item/default.html

Now add below two classes in your default.html inside the details-qty qty class.

<div class="more">+</div>

<div class="less">-</div>

Now default.html file looks like this

<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<li class="item product product-item" data-role="product-item">
    <div class="product">
        
        ...

        <div class="product-item-details">
            
            ...
            ...
            ...

            <div class="product-item-pricing">
                
                ...

                <div class="details-qty qty">
                    <label class="label" data-bind="i18n: 'Qty', attr: {
                           for: 'cart-item-'+item_id+'-qty'}"></label>
                           <div class="more">+</div>
                    <input data-bind="attr: {
                           id: 'cart-item-'+item_id+'-qty',
                           'data-cart-item': item_id,
                           'data-item-qty': qty,
                           'data-cart-item-id': product_sku
                           }, value: qty"
                           type="number"
                           size="4"
                           class="item-qty cart-item-qty">
                           <div class="less">-</div>
                    <button data-bind="attr: {
                           id: 'update-cart-item-'+item_id,
                           'data-cart-item': item_id,
                           title: $t('Update')
                           }"
                            class="update-cart-item"
                            style="display: none">
                        <span data-bind="i18n: 'Update'"></span>
                    </button>
                </div>
            </div>

            ...
            ...

        </div>
    </div>
    
    ...
    ...

</li>

<!--

/**

* See COPYING.txt for license details.

-->

...

...

...

<label class="label" data-bind="i18n: 'Qty', attr: {

for: 'cart-item-'+item_id+'-qty'}"></label>

<input data-bind="attr: {

id: 'cart-item-'+item_id+'-qty',

'data-cart-item': item_id,

'data-item-qty': qty,

'data-cart-item-id': product_sku

}, value: qty"

type="number"

size="4"

class="item-qty cart-item-qty">

<button data-bind="attr: {

id: 'update-cart-item-'+item_id,

'data-cart-item': item_id,

title: $t('Update')

class="update-cart-item"

style="display: none">

</button>

</div>

...

</div>

...

</li>

Step 3: After placing the above code, please run the below-mentioned commands

- php bin/magento setup:upgrade

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

- php bin/magento cache:clean

- php bin/magento setup:upgrade

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

- php bin/magento cache:clean

That’s it…

Now add some qty to the cart and check Minicart. The increment/Decrement button should be visible in minicart.

Fill the below form if you have any Magento programming need.

Is Magento A/B Testing Will Give a Better Conversions Rate?
Experienced chefs always love to try something new with ingredients...

Author Info

Hire R. Patel

Let’s have a call

Fill the form & Get Installation Support