After clicking on add to cart button the button text is not changing to adding or added.In some places its working but in product description page and we have created a featured product widget in home page in both of these places its not working.where i need to change the code for this.

  • Have you check consol or log file while this happen. – Dhiren Vasoya Nov 29 '17 at 10:14

The main file is responsible to change label Adding... and Added is


When you click on Add to Cart button It execute the submitForm function from this file,

submitForm: function (form) {
        var addToCartButton, self = this;

        if (form.has('input[type="file"]').length && form.find('input[type="file"]').val() !== '') {
            // disable 'Add to Cart' button
            addToCartButton = $(form).find(this.options.addToCartButtonSelector);
            addToCartButton.prop('disabled', true);
        } else {

And after that It execute the self.ajaxSubmit(form) funciton from the same file,

on this function you can see the line


this line is responsible for to change label Adding..

disableAddToCartButton: function (form) {
            var addToCartButtonTextWhileAdding = this.options.addToCartButtonTextWhileAdding || $t('Adding...'),
                addToCartButton = $(form).find(this.options.addToCartButtonSelector);

            addToCartButton.find('span').text(addToCartButtonTextWhileAdding); // from here it change the label
            addToCartButton.attr('title', addToCartButtonTextWhileAdding);

and after that on Ajax success function It calls the self.enableAddToCartButton(form); this function changes the label to Added

  enableAddToCartButton: function (form) {
            var addToCartButtonTextAdded = this.options.addToCartButtonTextAdded || $t('Added'),
                self = this,
                addToCartButton = $(form).find(this.options.addToCartButtonSelector);

            addToCartButton.attr('title', addToCartButtonTextAdded);

            setTimeout(function () {
                var addToCartButtonTextDefault = self.options.addToCartButtonTextDefault || $t('Add to Cart');

                addToCartButton.find('span').text(addToCartButtonTextDefault); // from here it change the label
                addToCartButton.attr('title', addToCartButtonTextDefault);
            }, 1000);

So just debug this file and location to check your Issue. Also, check console to see any error.


Take a look this file: vendor/magento/module-catalog/view/frontend/web/js/catalog-add-to-cart.js. You can see how it works.

If you wonder to know how to override it. Should use mixins

We can create a module, and then add these files:


var config = {
    config: {
        mixins: {
            'Magento_Catalog/js/catalog-add-to-cart': {
                'Vendor_Module/js/catalog-add-to-cart-mixin': true


    function ($, $t) {
        'use strict';

        return function (target) {
            $.widget('mage.catalogAddToCart', target, {
                options: {
                    addToCartButtonTextWhileAdding: $t('Adding Testing...'),
                    addToCartButtonTextAdded: $t('Added Testing'),
                    addToCartButtonTextDefault: $t('Add to Cart Testing')

            return $.mage.catalogAddToCart;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.