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.<\/p>\n\n\n\n
Today I am posting one such solution to add quantity increment and decrement button in Magento 2<\/strong><\/em>. It allows the customers to increase or decrease the quantity of products in the cart on the product page.<\/p>\n\n\n\n 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.<\/p>\n\n\n\n The below code is implemented with the Knockout JS as it is lightweight:<\/p>\n\n\n\n Create requirejs-config.js<\/strong><\/em> in app\/design\/frontend\/[NameSpace]\/[theme]\/Magento_Catalog\/<\/strong><\/p>\n\n\n\n Add the below code:<\/p>\n\n\n\n Copy file from vendor\/magento\/module-catalog\/view\/frontend\/templates\/product\/view\/addtocart.phtml<\/strong> Change code:<\/p>\n\n\n\n Create qty-counter.js<\/strong><\/em> in app\/design\/frontend\/[NameSpace]\/[theme]\/Magento_Catalog\/web\/js<\/strong><\/p>\n\n\n\n Add the below code:<\/p>\n\n\n\n Create input-counter.html<\/strong><\/em> in app\/design\/frontend\/[NameSpace]\/[theme]\/Magento_Catalog\/web\/template<\/strong><\/p>\n\n\n\n Add the below code:<\/p>\n\n\n\n That\u2019s it to add the increment and decrement button on the product page in Magento 2.<\/p>\n\n\n\n Please share the solution with fellow developers via social media.<\/p>\n\n\n\n Thank you.<\/p>\n","protected":false},"excerpt":{"rendered":" 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…<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[34],"tags":[],"class_list":["post-954","post","type-post","status-publish","format-standard","hentry","category-magento"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/954","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=954"}],"version-history":[{"count":2,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/954\/revisions"}],"predecessor-version":[{"id":14960,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/954\/revisions\/14960"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=954"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=954"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=954"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Method to add quantity increment and decrement button in Magento 2:<\/h2>\n\n\n\n
var config = {\n map: {\n '*': {\n 'qty-counter': 'Magento_Catalog\/js\/qty-counter'\n }\n }\n};<\/pre>\n\n\n\n
to current theme app\/design\/frontend\/[NameSpace]\/[theme]\/Magento_Catalog\/templates\/product\/view\/<\/strong><\/p>\n\n\n\n<div class=\"box-tocart\">\n <div class=\"fieldset\">\n <?php if ($block->shouldRenderQuantity()): ?>\n <div class=\"field qty\">\n <label class=\"label\" for=\"qty\"><span><?php \/* @escapeNotVerified *\/ echo __('Quantity:') ?><\/span><\/label>\n <div id=\"custom-qty\" class=\"control\" data-bind=\"scope: 'qty-counter'\">\n <!-- ko template: getTemplate() --><!-- \/ko -->\n <script type=\"text\/x-magento-init\">\n {\n \"#custom-qty\": {\n \"Magento_Ui\/js\/core\/app\": {\n \"components\": {\n \"qty-counter\": {\n \"component\": \"qty-counter\",\n \"config\": {\n \"qty\": <?php echo $block->getProductDefaultQty() * 1 ?>,\n \"dataValidate\": <?php echo json_encode($block->getQuantityValidators()) ?>\n }\n }\n }\n }\n }\n }\n <\/script>\n <\/div>\n <\/div>\n <?php endif; ?>\n <div class=\"actions\">\n <button type=\"submit\"\n title=\"<?php \/* @escapeNotVerified *\/ echo $buttonTitle ?>\"\n class=\"action primary tocart\"\n id=\"product-addtocart-button\">\n <span><?php \/* @escapeNotVerified *\/ echo $buttonTitle ?><\/span>\n <\/button>\n <?php echo $block->getChildHtml('', true) ?>\n <\/div>\n <\/div>\n<\/div><\/pre>\n\n\n\n'use strict';\n\ndefine([\n 'ko',\n 'uiElement'\n], function (ko, Element) {\n return Element.extend({\n defaults: {\n template: 'Magento_Catalog\/input-counter'\n },\n\n initObservable: function () {\n this._super()\n .observe('qty');\n\n return this;\n },\n\n getDataValidator: function() {\n return JSON.stringify(this.dataValidate);\n },\n\n decreaseQty: function() {\n var qty;\n\n if (this.qty() > 1) {\n qty = this.qty() - 1;\n } else {\n qty = 1;\n }\n\n this.qty(qty);\n },\n\n increaseQty: function() {\n var qty = this.qty() + 1;\n\n this.qty(qty);\n }\n });\n});<\/pre>\n\n\n\n<div class=\"input-group\">\n <span class=\"input-group__addon\">\n <button click=\"decreaseQty\" class=\"input-group__button input-group__button--decrease\">\n <span class=\"input-group__icon input-group__icon--decrease\"><\/span>\n <\/button>\n <\/span>\n <input data-bind=\"value: qty(), attr: {'data-validate': getDataValidator(), 'title': $t('Qty')}\"\n type=\"number\"\n name=\"qty\"\n id=\"qty\"\n maxlength=\"12\"\n class=\"input-group__input\" \/>\n <span class=\"input-group__addon\">\n <button click=\"increaseQty\" class=\"input-group__button input-group__button--increase\">\n <span class=\"input-group__icon input-group__icon--increase\"><\/span>\n <\/button>\n <\/span>\n<\/div><\/pre>\n\n\n\n