We sacrifice by not doing any other technology, so that you get the best of Magento.

We sacrifice by not doing any other technology, so that you get the best of Magento.

    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>

    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>

    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

    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 need any Magento relate help/advise/consulting.

    With Only Agency that provides a 24/7 emergency support.

      Get a Free Quote