0

I want to rename the add to cart button as soon as the product is added to cart.

3
  • After changing text if customer clicks on button it will re add product to cart. It may be confusing for customer. Jun 15 '21 at 9:54
  • no, i want to add product to the cart only once. Jun 15 '21 at 9:58
  • Okay I will post solution in some time. Jun 15 '21 at 9:59
2

You can change button text by create mixin instead of override whole file.

Create requirejs-config.js file :

app/code/RH/Helloworld/view/frontend/requirejs-config.js

var config = {
   config: {
       mixins: {
           'Magento_Catalog/js/catalog-add-to-cart': {
                'RH_Helloworld/js/catalog-add-to-cart-mixin': true
            }
        },
     }
};

Create catalog-add-to-cart-mixin.js file :

app/code/RH/Helloworld/view/frontend/web/js/catalog-add-to-cart-mixin.js

define([
    'jquery',
    'mage/translate',
    'jquery/ui'
],
function ($, $t) {
    'use strict';

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

        return $.mage.catalogAddToCart;
    };
});
11
  • Hey, it works but if i remove item from minicart at that time the button text is not set as default. Jun 15 '21 at 11:11
  • Hi Thanks. It's only for add to cart action Not for minicart action. Jun 15 '21 at 11:12
  • Any solution for that? Jun 15 '21 at 11:13
  • 1
    Yes, Sure. And Thank you for helping :) Jun 15 '21 at 11:16
  • 1
    yes i did same. and its working now :) Jun 17 '21 at 7:49
1

In order to change Add To Cart button text after product is added to cart, you need to override catalog-add-to-cart.js to in your custom theme.

Copy catalog-add-to-cart.js to your theme from

vendor/magento/module-catalog/view/frontend/web/js/catalog-add-to-cart.js

to

app/design/frontend/Vendor/yourtheme/Magento_Catalog/web/js/catalog-add-to-cart.js

and replace enableAddToCartButton function with below code

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

    addToCartButton.find('span').text(addToCartButtonTextAdded);
    addToCartButton.attr('title', addToCartButtonTextAdded);

    setTimeout(function () {
        var addToCartButtonTextDefault = self.options.addToCartButtonTextDefault || $t('Your Custom Text');

        addToCartButton.removeClass(self.options.addToCartButtonDisabledClass);
        addToCartButton.find('span').text(addToCartButtonTextDefault);
        addToCartButton.attr('title', addToCartButtonTextDefault);
    }, 1000);
}

In above code change Your Custom Text to your desired text. Thanks!

5
  • this code works but i want to add product to the cart only once. after that i want not-clickable button. Right now it adds product to cart everytime i click on it., can you please help me with that? Jun 17 '21 at 3:25
  • @Fenashah Add addToCartButton.attr("disabled", true); code in the end of setTimeout function. Jun 17 '21 at 4:26
  • i tried but after page load it again gets enable and set default button text. Jun 17 '21 at 5:57
  • In that case you may use maximum quantity allowed in the cart configuration.Check this blog for more details meetanshi.com/blog/… Jun 17 '21 at 5:59
  • magento.stackexchange.com/questions/339775/… can you help me with this? Jun 17 '21 at 6:04

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.