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.

<div class="field qty">
    <div class="control qty-change">
        <?php $id = "qty_".$_product->getId(); ?>
        <button  type="button" class="reduced items" onclick="var result = document.getElementById('<?= $id ?>'); var qty = result.value; if( !isNaN( qty ) && qty > 1 ) result.value--;return false;">-</button>
        <input type="text"
               name="qty"
               id="<?= $id ?>"
               value="1"
               title="<?= /* @escapeNotVerified */ __('Qty') ?>"
               class="input-text qty"
               data-validate="<?= $block->escapeHtml(json_encode($block->getQuantityValidators())) ?>"
               />
        <button  type="button" class="increase items" onclick="var result = document.getElementById('<?= $id ?>'); var qty = result.value; if( !isNaN( qty )) result.value++;return false;">+</button>
    </div>
</div>

<?php $id = "qty_".$_product->getId(); ?>

<button type="button" class="reduced items" onclick="var result = document.getElementById('<?= $id ?>'); var qty = result.value; if( !isNaN( qty ) && qty > 1 ) result.value--;return false;">-</button>

<input type="text"

name="qty"

id="<?= $id ?>"

value="1"

title="<?= /* @escapeNotVerified */ __('Qty') ?>"

class="input-text qty"

data-validate="<?= $block->escapeHtml(json_encode($block->getQuantityValidators())) ?>"

<button type="button" class="increase items" onclick="var result = document.getElementById('<?= $id ?>'); var qty = result.value; if( !isNaN( qty )) result.value++;return false;">+</button>

</div>

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.

                  <div class="control-qty">
                    <span class="quantity-controls quantity-plus">+</span>
                    <span class="quantity-controls quantity-minus">-</span>

                    <script type="text/javascript">
                      require([
                        'jquery'
                      ], function ($) {
                        $('.quantity-plus').click(function () {
                          $('.qty-default').val(Number($('.qty-default').val()) + 1);
                        });

                        $('.quantity-minus').click(function () {
                          var value = Number($('.qty-default').val()) - 1;
                          if (value > 0) {
                            $('.qty-default').val(value);
                          }
                          
                        });
                      });
                    </script>
                  </div>

require([

'jquery'

], function ($) {

$('.quantity-plus').click(function () {

$('.qty-default').val(Number($('.qty-default').val()) + 1);

});

$('.quantity-minus').click(function () {

var value = Number($('.qty-default').val()) - 1;

if (value > 0) {

$('.qty-default').val(value);

}

});

</script>

</div>

And Now addtocart.phtml looks like

<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

/** @var $block \Magento\Catalog\Block\Product\View */
?>
<?php $_product = $block->getProduct(); ?>
<?php $buttonTitle = __('Add to Cart'); ?>
<?php if ($_product->isSaleable()) :?>
<div class="box-tocart">
    <div class="fieldset">
        <?php if ($block->shouldRenderQuantity()) :?>
        <div class="field qty">
            <label class="label" for="qty"><span><?= $block->escapeHtml(__('Qty')) ?></span></label>
            <div class="control">
                <input type="number"
                       name="qty"
                       id="qty"
                       min="0"
                       value="<?= $block->getProductDefaultQty() * 1 ?>"
                       title="<?= $block->escapeHtmlAttr(__('Qty')) ?>"
                       class="qty-default input-text qty"
                       data-validate="<?= $block->escapeHtml(json_encode($block->getQuantityValidators())) ?>"
                       />
                  <div class="control-qty">
                    <span class="quantity-controls quantity-plus">+</span>
                    <span class="quantity-controls quantity-minus">-</span>

                    <script type="text/javascript">
                      require([
                        'jquery'
                      ], function ($) {
                        $('.quantity-plus').click(function () {
                          $('.qty-default').val(Number($('.qty-default').val()) + 1);
                        });

                        $('.quantity-minus').click(function () {
                          var value = Number($('.qty-default').val()) - 1;
                          if (value > 0) {
                            $('.qty-default').val(value);
                          }
                          
                        });
                      });
                    </script>
                  </div>                       
            </div>
        </div>
        <?php endif; ?>
        <div class="actions">
            <button type="submit"
                    title="<?= $block->escapeHtmlAttr($buttonTitle) ?>"
                    class="action primary tocart"
                    id="product-addtocart-button" disabled>
                <span><?= $block->escapeHtml($buttonTitle) ?></span>
            </button>
            <?= $block->getChildHtml('', true) ?>
        </div>
    </div>
</div>
<?php endif; ?>
<script type="text/x-magento-init">
    {
        "#product_addtocart_form": {
            "Magento_Catalog/js/validate-product": {}
        }
    }
</script>

<?php

/**

* See COPYING.txt for license details.

/** @var $block \Magento\Catalog\Block\Product\View */

<?php $_product = $block->getProduct(); ?>

<?php $buttonTitle = __('Add to Cart'); ?>

<?php if ($_product->isSaleable()) :?>

<?php if ($block->shouldRenderQuantity()) :?>

<label class="label" for="qty"><span><?= $block->escapeHtml(__('Qty')) ?></span></label>

<input type="number"

name="qty"

id="qty"

min="0"

value="<?= $block->getProductDefaultQty() * 1 ?>"

title="<?= $block->escapeHtmlAttr(__('Qty')) ?>"

class="qty-default input-text qty"

data-validate="<?= $block->escapeHtml(json_encode($block->getQuantityValidators())) ?>"

require([

'jquery'

], function ($) {

$('.quantity-plus').click(function () {

$('.qty-default').val(Number($('.qty-default').val()) + 1);

});

$('.quantity-minus').click(function () {

var value = Number($('.qty-default').val()) - 1;

if (value > 0) {

$('.qty-default').val(value);

}

});

</script>

</div>

<?php endif; ?>

<button type="submit"

title="<?= $block->escapeHtmlAttr($buttonTitle) ?>"

class="action primary tocart"

id="product-addtocart-button" disabled>

<span><?= $block->escapeHtml($buttonTitle) ?></span>

</button>

<?= $block->getChildHtml('', true) ?>

</div>

<?php endif; ?>

{

"#product_addtocart_form": {

"Magento_Catalog/js/validate-product": {}

}

</script>

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.

                <div class="qty_control">
                    <button type="button"  id="<?= /* @escapeNotVerified */ $_item->getId() ?>-upt" class="increaseQty">+</button>
                    <button type="button"   id="<?= /* @escapeNotVerified */ $_item->getId() ?>-dec"  class="decreaseQty">-</button>
                </div>

<button type="button" id="<?= /* @escapeNotVerified */ $_item->getId() ?>-upt" class="increaseQty">+</button>

<button type="button" id="<?= /* @escapeNotVerified */ $_item->getId() ?>-dec" class="decreaseQty">-</button>

</div>

Now add below jQuery Script in the end of file.

<script type="text/javascript">
require(["jquery"],function($){
    $('#<?php echo $_item->getId();?>-upt, #<?php echo $_item->getId();?>-dec').on("click",function(){ 
        var $this = $(this);
        var ctrl = ($(this).attr('id').replace('-upt','')).replace('-dec','');          
        var currentQty = $("#cart-"+ctrl+"-qty").val();
        if($this.hasClass('increaseQty')){
            var newAdd = parseInt(currentQty)+parseInt(1);
             $("#cart-"+ctrl+"-qty").val(newAdd);
        }else{
             if(currentQty>1){
                var newAdd = parseInt(currentQty)-parseInt(1);
                $("#cart-"+ctrl+"-qty").val(newAdd); 
             }
        }
    });
});
</script>

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

$('#<?php echo $_item->getId();?>-upt, #<?php echo $_item->getId();?>-dec').on("click",function(){

var $this = $(this);

var ctrl = ($(this).attr('id').replace('-upt','')).replace('-dec','');

var currentQty = $("#cart-"+ctrl+"-qty").val();

if($this.hasClass('increaseQty')){

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

$("#cart-"+ctrl+"-qty").val(newAdd);

}else{

if(currentQty>1){

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

$("#cart-"+ctrl+"-qty").val(newAdd);

}

});

</script>

And Now default.phtml looks like

<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

// phpcs:disable Magento2.Templates.ThisInTemplate
// phpcs:disable Magento2.Files.LineLength.MaxExceeded

/** @var $block \Magento\Checkout\Block\Cart\Item\Renderer */

$_item = $block->getItem();
$product = $_item->getProduct();
$isVisibleProduct = $product->isVisibleInSiteVisibility();
/** @var \Magento\Msrp\Helper\Data $helper */
$helper = $this->helper(Magento\Msrp\Helper\Data::class);
$canApplyMsrp = $helper->isShowBeforeOrderConfirm($product) && $helper->isMinimalPriceLessMsrp($product);
?>
<tbody class="cart item">
    <tr class="item-info">
        <td data-th="<?= $block->escapeHtml(__('Item')) ?>" class="col item">
            <?php if ($block->hasProductUrl()) :?>
                <a href="<?= $block->escapeUrl($block->getProductUrl()) ?>"
                   title="<?= $block->escapeHtml($block->getProductName()) ?>"
                   tabindex="-1"
                   class="product-item-photo">
            <?php else :?>
                <span class="product-item-photo">
            <?php endif;?>
            <?= $block->getImage($block->getProductForThumbnail(), 'cart_page_product_thumbnail')->toHtml() ?>
            <?php if ($block->hasProductUrl()) :?>
                </a>
            <?php else :?>
                </span>
            <?php endif; ?>
            <div class="product-item-details">
                <strong class="product-item-name">
                    <?php if ($block->hasProductUrl()) :?>
                        <a href="<?= $block->escapeUrl($block->getProductUrl()) ?>"><?= $block->escapeHtml($block->getProductName()) ?></a>
                    <?php else :?>
                        <?= $block->escapeHtml($block->getProductName()) ?>
                    <?php endif; ?>
                </strong>
                <?php if ($_options = $block->getOptionList()) :?>
                    <dl class="item-options">
                        <?php foreach ($_options as $_option) :?>
                            <?php $_formatedOptionValue = $block->getFormatedOptionValue($_option) ?>
                            <dt><?= $block->escapeHtml($_option['label']) ?></dt>
                            <dd>
                                <?php if (isset($_formatedOptionValue['full_view'])) :?>
                                    <?= $block->escapeHtml($_formatedOptionValue['full_view']) ?>
                                <?php else :?>
                                    <?= $block->escapeHtml($_formatedOptionValue['value'], ['span', 'a']) ?>
                                <?php endif; ?>
                            </dd>
                        <?php endforeach; ?>
                    </dl>
                <?php endif;?>
                <?php if ($messages = $block->getMessages()) :?>
                    <?php foreach ($messages as $message) :?>
                        <div class= "cart item message <?= $block->escapeHtmlAttr($message['type']) ?>">
                            <div><?= $block->escapeHtml($message['text']) ?></div>
                        </div>
                    <?php endforeach; ?>
                <?php endif; ?>
                <?php $addInfoBlock = $block->getProductAdditionalInformationBlock(); ?>
                <?php if ($addInfoBlock) :?>
                    <?= $addInfoBlock->setItem($_item)->toHtml() ?>
                <?php endif;?>
            </div>
        </td>

        <?php if ($canApplyMsrp) :?>
            <td class="col msrp" data-th="<?= $block->escapeHtml(__('Price')) ?>">
                <span class="pricing msrp">
                    <span class="msrp notice"><?= $block->escapeHtml(__('See price before order confirmation.')) ?></span>
                    <?php $helpLinkId = 'cart-msrp-help-' . $_item->getId(); ?>
                    <a href="#" class="action help map"
                       id="<?= ($block->escapeHtmlAttr($helpLinkId)) ?>"
                       data-mage-init='{"addToCart":{
                                            "helpLinkId": "#<?= $block->escapeJs($block->escapeHtml($helpLinkId)) ?>",
                                            "productName": "<?= $block->escapeJs($block->escapeHtml($product->getName())) ?>",
                                            "showAddToCart": false
                                            }
                                        }'
                    >
                        <span><?= $block->escapeHtml(__("What's this?")) ?></span>
                    </a>
                </span>
            </td>
        <?php else :?>
            <td class="col price" data-th="<?= $block->escapeHtml(__('Price')) ?>">
                <?= $block->getUnitPriceHtml($_item) ?>
            </td>
        <?php endif; ?>
        <td class="col qty" data-th="<?= $block->escapeHtml(__('Qty')) ?>">
            <div class="field qty">
                <div class="control qty">
                    <label for="cart-<?= $block->escapeHtmlAttr($_item->getId()) ?>-qty">
                        <span class="label"><?= $block->escapeHtml(__('Qty')) ?></span>
                        <input id="cart-<?= $block->escapeHtmlAttr($_item->getId()) ?>-qty"
                               name="cart[<?= $block->escapeHtmlAttr($_item->getId()) ?>][qty]"
                               data-cart-item-id="<?= $block->escapeHtmlAttr($_item->getSku()) ?>"
                               value="<?= $block->escapeHtmlAttr($block->getQty()) ?>"
                               type="number"
                               size="4"
                               step="any"
                               title="<?= $block->escapeHtmlAttr(__('Qty')) ?>"
                               class="input-text qty"
                               data-validate="{required:true,'validate-greater-than-zero':true}"
                               data-role="cart-item-qty"/>
                    </label>
                </div>
                <div class="qty_control">
                    <button type="button"  id="<?= /* @escapeNotVerified */ $_item->getId() ?>-upt" class="increaseQty">+</button>
                    <button type="button"   id="<?= /* @escapeNotVerified */ $_item->getId() ?>-dec"  class="decreaseQty">-</button>
                </div>                
            </div>
        </td>

        <td class="col subtotal" data-th="<?= $block->escapeHtml(__('Subtotal')) ?>">
            <?php if ($canApplyMsrp) :?>
                <span class="cart msrp subtotal">--</span>
            <?php else :?>
                <?= $block->getRowTotalHtml($_item) ?>
            <?php endif; ?>
        </td>
    </tr>
    <tr class="item-actions">
        <td colspan="4">
            <div class="actions-toolbar">
                <?= /* @noEscape */ $block->getActions($_item) ?>
            </div>
        </td>
    </tr>
</tbody>
<script type="text/javascript">
require(["jquery"],function($){
    $('#<?php echo $_item->getId();?>-upt, #<?php echo $_item->getId();?>-dec').on("click",function(){ 
        var $this = $(this);
        var ctrl = ($(this).attr('id').replace('-upt','')).replace('-dec','');          
        var currentQty = $("#cart-"+ctrl+"-qty").val();
        if($this.hasClass('increaseQty')){
            var newAdd = parseInt(currentQty)+parseInt(1);
             $("#cart-"+ctrl+"-qty").val(newAdd);
        }else{
             if(currentQty>1){
                var newAdd = parseInt(currentQty)-parseInt(1);
                $("#cart-"+ctrl+"-qty").val(newAdd); 
             }
        }
    });
});
</script>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

<?php

/**

* See COPYING.txt for license details.

// phpcs:disable Magento2.Templates.ThisInTemplate

// phpcs:disable Magento2.Files.LineLength.MaxExceeded

/** @var $block \Magento\Checkout\Block\Cart\Item\Renderer */

$_item = $block->getItem();

$product = $_item->getProduct();

$isVisibleProduct = $product->isVisibleInSiteVisibility();

/** @var \Magento\Msrp\Helper\Data $helper */

$helper = $this->helper(Magento\Msrp\Helper\Data::class);

$canApplyMsrp = $helper->isShowBeforeOrderConfirm($product) && $helper->isMinimalPriceLessMsrp($product);

<td data-th="<?= $block->escapeHtml(__('Item')) ?>" class="col item">

<?php if ($block->hasProductUrl()) :?>

<a href="<?= $block->escapeUrl($block->getProductUrl()) ?>"

title="<?= $block->escapeHtml($block->getProductName()) ?>"

tabindex="-1"

class="product-item-photo">

<?php else :?>

<?php endif;?>

<?= $block->getImage($block->getProductForThumbnail(), 'cart_page_product_thumbnail')->toHtml() ?>

<?php if ($block->hasProductUrl()) :?>

</a>

<?php else :?>

</span>

<?php endif; ?>

<?php if ($block->hasProductUrl()) :?>

<a href="<?= $block->escapeUrl($block->getProductUrl()) ?>"><?= $block->escapeHtml($block->getProductName()) ?></a>

<?php else :?>

<?= $block->escapeHtml($block->getProductName()) ?>

<?php endif; ?>

</strong>

<?php if ($_options = $block->getOptionList()) :?>

<?php foreach ($_options as $_option) :?>

<?php $_formatedOptionValue = $block->getFormatedOptionValue($_option) ?>

<dt><?= $block->escapeHtml($_option['label']) ?></dt>

<dd>

<?php if (isset($_formatedOptionValue['full_view'])) :?>

<?= $block->escapeHtml($_formatedOptionValue['full_view']) ?>

<?php else :?>

<?= $block->escapeHtml($_formatedOptionValue['value'], ['span', 'a']) ?>

<?php endif; ?>

</dd>

<?php endforeach; ?>

</dl>

<?php endif;?>

<?php if ($messages = $block->getMessages()) :?>

<?php foreach ($messages as $message) :?>

<div class= "cart item message <?= $block->escapeHtmlAttr($message['type']) ?>">

<div><?= $block->escapeHtml($message['text']) ?></div>

</div>

<?php endforeach; ?>

<?php endif; ?>

<?php $addInfoBlock = $block->getProductAdditionalInformationBlock(); ?>

<?php if ($addInfoBlock) :?>

<?= $addInfoBlock->setItem($_item)->toHtml() ?>

<?php endif;?>

</div>

</td>

<?php if ($canApplyMsrp) :?>

<td class="col msrp" data-th="<?= $block->escapeHtml(__('Price')) ?>">

<span class="msrp notice"><?= $block->escapeHtml(__('See price before order confirmation.')) ?></span>

<?php $helpLinkId = 'cart-msrp-help-' . $_item->getId(); ?>

<a href="#" class="action help map"

id="<?= ($block->escapeHtmlAttr($helpLinkId)) ?>"

data-mage-init='{"addToCart":{

"helpLinkId": "#<?= $block->escapeJs($block->escapeHtml($helpLinkId)) ?>",

"productName": "<?= $block->escapeJs($block->escapeHtml($product->getName())) ?>",

"showAddToCart": false

}

<span><?= $block->escapeHtml(__("What's this?")) ?></span>

</a>

</span>

</td>

<?php else :?>

<td class="col price" data-th="<?= $block->escapeHtml(__('Price')) ?>">

<?= $block->getUnitPriceHtml($_item) ?>

</td>

<?php endif; ?>

<td class="col qty" data-th="<?= $block->escapeHtml(__('Qty')) ?>">

<label for="cart-<?= $block->escapeHtmlAttr($_item->getId()) ?>-qty">

<span class="label"><?= $block->escapeHtml(__('Qty')) ?></span>

<input id="cart-<?= $block->escapeHtmlAttr($_item->getId()) ?>-qty"

name="cart[<?= $block->escapeHtmlAttr($_item->getId()) ?>][qty]"

data-cart-item-id="<?= $block->escapeHtmlAttr($_item->getSku()) ?>"

value="<?= $block->escapeHtmlAttr($block->getQty()) ?>"

type="number"

size="4"

step="any"

title="<?= $block->escapeHtmlAttr(__('Qty')) ?>"

class="input-text qty"

data-validate="{required:true,'validate-greater-than-zero':true}"

data-role="cart-item-qty"/>

</label>

</div>

<button type="button" id="<?= /* @escapeNotVerified */ $_item->getId() ?>-upt" class="increaseQty">+</button>

<button type="button" id="<?= /* @escapeNotVerified */ $_item->getId() ?>-dec" class="decreaseQty">-</button>

</div>

</td>

<td class="col subtotal" data-th="<?= $block->escapeHtml(__('Subtotal')) ?>">

<?php if ($canApplyMsrp) :?>

<?php else :?>

<?= $block->getRowTotalHtml($_item) ?>

<?php endif; ?>

</td>

</tr>

<?= /* @noEscape */ $block->getActions($_item) ?>

</div>

</td>

</tr>

</tbody>

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

$('#<?php echo $_item->getId();?>-upt, #<?php echo $_item->getId();?>-dec').on("click",function(){

var $this = $(this);

var ctrl = ($(this).attr('id').replace('-upt','')).replace('-dec','');

var currentQty = $("#cart-"+ctrl+"-qty").val();

if($this.hasClass('increaseQty')){

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

$("#cart-"+ctrl+"-qty").val(newAdd);

}else{

if(currentQty>1){

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

$("#cart-"+ctrl+"-qty").val(newAdd);

}

});

</script>

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

<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>

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

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

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

Now default.html looks like

<!--
/**
 * 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">
        <!-- ko if: product_has_url -->
        <a data-bind="attr: {href: product_url, title: product_name}" tabindex="-1" class="product-item-photo">
            <!-- ko foreach: $parent.getRegion('itemImage') -->
                <!-- ko template: {name: getTemplate(), data: item.product_image} --><!-- /ko -->
            <!-- /ko -->
        </a>
        <!-- /ko -->
        <!-- ko ifnot: product_has_url -->
        <span class="product-item-photo">
            <!-- ko foreach: $parent.getRegion('itemImage') -->
                <!-- ko template: {name: getTemplate(), data: item.product_image} --><!-- /ko -->
            <!-- /ko -->
        </span>
        <!-- /ko -->

        <div class="product-item-details">
            <strong class="product-item-name">
                <!-- ko if: product_has_url -->
                <a data-bind="attr: {href: product_url}, html: product_name"></a>
                <!-- /ko -->
                <!-- ko ifnot: product_has_url -->
                    <!-- ko text: product_name --><!-- /ko -->
                <!-- /ko -->
            </strong>

            <!-- ko if: options.length -->
            <div class="product options" data-mage-init='{"collapsible":{"openedState": "active", "saveState": false}}'>
                <span data-role="title" class="toggle"><!-- ko i18n: 'See Details' --><!-- /ko --></span>

                <div data-role="content" class="content">
                    <strong class="subtitle"><!-- ko i18n: 'Options Details' --><!-- /ko --></strong>
                    <dl class="product options list">
                        <!-- ko foreach: { data: options, as: 'option' } -->
                        <dt class="label"><!-- ko text: option.label --><!-- /ko --></dt>
                        <dd class="values">
                            <!-- ko if: Array.isArray(option.value) -->
                                <span data-bind="html: option.value.join('<br>')"></span>
                            <!-- /ko -->
                            <!-- ko if: (!Array.isArray(option.value) && ['file', 'html'].includes(option.option_type)) -->
                                <span data-bind="html: option.value"></span>
                            <!-- /ko -->
                            <!-- ko if: (!Array.isArray(option.value) && !['file', 'html'].includes(option.option_type)) -->
                            <span data-bind="text: option.value"></span>
                            <!-- /ko -->
                        </dd>
                        <!-- /ko -->
                    </dl>
                </div>
            </div>
            <!-- /ko -->

            <div class="product-item-pricing">
                <!-- ko if: canApplyMsrp -->

                <div class="details-map">
                    <span class="label" data-bind="i18n: 'Price'"></span>
                    <span class="value" data-bind="i18n: 'See price before order confirmation.'"></span>
                </div>
                <!-- /ko -->
                <!-- ko ifnot: canApplyMsrp -->
                <!-- ko foreach: $parent.getRegion('priceSidebar') -->
                    <!-- ko template: {name: getTemplate(), data: item.product_price, as: 'price'} --><!-- /ko -->
                <!-- /ko -->
                <!-- /ko -->

                <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 class="product actions">
                <!-- ko if: is_visible_in_site_visibility -->
                <div class="primary">
                    <a data-bind="attr: {href: configure_url, title: $t('Edit item')}" class="action edit">
                        <span data-bind="i18n: 'Edit'"></span>
                    </a>
                </div>
                <!-- /ko -->
                <div class="secondary">
                    <a href="#" data-bind="attr: {'data-cart-item': item_id, title: $t('Remove item')}"
                       class="action delete">
                        <span data-bind="i18n: 'Remove'"></span>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="message notice" if="$data.message">
        <div data-bind="text: $data.message"></div>
    </div>
</li>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

<!--

/**

* See COPYING.txt for license details.

-->

</a>

</span>

</strong>

</dd>

</dl>

</div>

</div>

<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>

</a>

</div>

<a href="#" data-bind="attr: {'data-cart-item': item_id, title: $t('Remove item')}"

class="action delete">

</a>

</div>

</div>

</li>

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

Post Views: 106

Tagged magento2, magento2tutorial

Vrajesh Patel

Magento Tutorial | PHP Tutorial

How To Add Quantity Increment And Decrement Button In Magento 2?

About Vrajesh Patel

Vrajesh Patel

Magento Tutorial | PHP Tutorial

Related Posts

How to get the collection of a custom module in Magento 2?

Magento 2 System Configuration Field Types

How to Create System.xml Configuration and get data from System Configuration in Magento 2?

About Vrajesh Patel