Add Quantity Increment and decrements Button in Magento 2

Configure Module

Configure your module by creating a module.xml file at app/code/Magemonkeys/QtyIncrement/etc. Add the following code in it:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Magemonkeys_QtyIncrement" setup_version="1.0.0"></module>
</config>

<?xml version="1.0"?>

</config>

Registration of Module

Now, register the module by creating registration.php at app/code/Magemonkeys/QtyIncrement, and add the following code in it:

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
   \Magento\Framework\Component\ComponentRegistrar::MODULE,
   'Magemonkeys_QtyIncrement',
   __DIR__
);

<?php

\Magento\Framework\Component\ComponentRegistrar::register(

\Magento\Framework\Component\ComponentRegistrar::MODULE,

'Magemonkeys_QtyIncrement',

__DIR__

);

Copy addtocart.phtml

Go to vendor/magento/module-catalog/view/frontend/templates/product/view from the root directory of your store and copy addtocart.phtml to your own module app/code /Magemonkeys/QtyIncrement/view/frontend/templates/catalog/product/view

Edit addtocart.phtml

<?php
/**
* Copyright © 2013-2017 Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
// @codingStandardsIgnoreFile
/** @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><?php /* @escapeNotVerified */ echo __('Qty') ?></span></label>
 
<script type="text/x-magento-init">
{
   "*": {
           "Magento_Ui/js/core/app": {
               "components": {
                   "qty_change": {
                       "component": "Magemonkeys_QtyIncrement/js/view/product/view/qty_change",
                       "defaultQty": <?php echo $block->getProductDefaultQty() * 1 ?>
                   }
               }
           }
   }
}
</script>
 
<div class="control" data-bind="scope: 'qty_change'">
   <button data-bind="click: decreaseQty">-</button>
   <input  data-bind="value: qty()"
   type="number"
   name="qty"
   id="qty"
   maxlength="12"
   title="<?php echo __('Qty') ?>"
   class="input-text qty"
   data-validate="<?php echo $block->escapeHtml(json_encode($block->getQuantityValidators())) ?>"
   />
 
   <button data-bind="click: increaseQty">+</button>
</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>
<?php endif; ?>
<script type="text/x-magento-init">
   {
       "#product_addtocart_form": {
           "Magento_Catalog/product/view/validation": {
               "radioCheckboxClosest": ".nested"
           }
       }
   }
</script>
<?php if (!$block->isRedirectToCartEnabled()) : ?>
<script type="text/x-magento-init">
   {
       "#product_addtocart_form": {
           "catalogAddToCart": {
               "bindSubmit": false
           }
       }
   }
</script>
<?php endif; ?>

<?php

/**

* See COPYING.txt for license details.

// @codingStandardsIgnoreFile

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

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

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

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

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

{

"*": {

"Magento_Ui/js/core/app": {

"components": {

"qty_change": {

"component": "Magemonkeys_QtyIncrement/js/view/product/view/qty_change",

"defaultQty": <?php echo $block->getProductDefaultQty() * 1 ?>

}

</script>

<input data-bind="value: qty()"

type="number"

name="qty"

id="qty"

maxlength="12"

title="<?php echo __('Qty') ?>"

class="input-text qty"

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

</div>

<?php endif; ?>

<button type="submit"

title="<?php /* @escapeNotVerified */ echo $buttonTitle ?>"

class="action primary tocart"

id="product-addtocart-button">

</button>

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

</div>

<?php endif; ?>

{

"#product_addtocart_form": {

"Magento_Catalog/product/view/validation": {

"radioCheckboxClosest": ".nested"

}

</script>

<?php if (!$block->isRedirectToCartEnabled()) : ?>

{

"#product_addtocart_form": {

"catalogAddToCart": {

"bindSubmit": false

}

</script>

<?php endif; ?>

Create qty_change.js

Now, create qty_change.js at app/code/Magemonkeys/QtyIncrement/view/frontend/web/js/view/product/view. Add the following code in it:

define([
   'ko',
   'uiComponent'
], function (ko, Component) {
   'use strict';
   return Component.extend({
       initialize: function () {
           //initialize parent Component
           this._super();
           this.qty = ko.observable(this.defaultQty);
       },
       decreaseQty: function() {
           var newQty = this.qty() - 1;
           if (newQty < 1) 
           {
               newQty = 1;
           }
           this.qty(newQty);
       },
       increaseQty: function() {
           var newQty = this.qty() + 1;
           this.qty(newQty);
       }
   });
});

define([

'ko',

'uiComponent'

], function (ko, Component) {

'use strict';

return Component.extend({

initialize: function () {

//initialize parent Component

this._super();

this.qty = ko.observable(this.defaultQty);

decreaseQty: function() {

var newQty = this.qty() - 1;

if (newQty < 1)

{

newQty = 1;

}

this.qty(newQty);

increaseQty: function() {

var newQty = this.qty() + 1;

this.qty(newQty);

}

});

Create catalog_product_view.xml

Lastly, just create catalog_product_view.xml at app/code/Magemonkeys/QtyIncrement/view/frontend/layout. Add the following code in it:

<?xml version="1.0"?>
<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
   <body>
       <referenceBlock name="product.info.addtocart">
           <action method="setTemplate">
               <argument name="template" xsi:type="string">Magemonkeys_QtyIncrement::catalog/product/view/addtocart.phtml</argument>
           </action>
       </referenceBlock>
       <referenceBlock name="product.info.addtocart.additional">
           <action method="setTemplate">
               <argument name="template" xsi:type="string">Magemonkeys_QtyIncrement::catalog/product/view/addtocart.phtml</argument>
           </action>
       </referenceBlock>
   </body>
</page>

<?xml version="1.0"?>

<body>

<argument name="template" xsi:type="string">Magemonkeys_QtyIncrement::catalog/product/view/addtocart.phtml</argument>

</action>

</referenceBlock>

<argument name="template" xsi:type="string">Magemonkeys_QtyIncrement::catalog/product/view/addtocart.phtml</argument>

</action>

</referenceBlock>

</body>

</page>

Run the Commands

Go to the root directory of your store by using SSH terminal and run the following commands:

rm -rf var/di var/generation var/cache/* var/log/* var/page_cache/*

php bin/magento module:enable Magemonkeys_QtyIncrement

php bin/magento setup:upgrade

php bin/magento setup:di:compile

php bin/magento indexer:reindex

php bin/magento cache:clean

php bin/magento cache:flush

rm -rf var/di var/generation var/cache/* var/log/* var/page_cache/*

php bin/magento module:enable Magemonkeys_QtyIncrement

php bin/magento setup:upgrade

php bin/magento setup:di:compile

php bin/magento indexer:reindex

php bin/magento cache:clean

php bin/magento cache:flush

Now, go to the product page and you will see the result:

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

Add an image programmatically from any url in Magento 2
[crayon-63d3d5551d618676506594/] Using above fucntion Images can be imported directly from...
Magento 2 : Override the Category view block file
Override view block using di.xml and add the below code...
How to check list of Layout XML called for a specific page in Magento 2?
You can check a list of called layout XML for...
Magento 2 : Setup PWA from Scratch
Follow the below steps to install and set up PWA...
How to remove leading zero’s from the order, invoice and shipment number in Magento 2?
If you want to remove all leading zero's from order,...

Author Info

Magento Certified Developer

Hire J. Lakum

Let’s have a call

Fill the form & Get Installation Support