I want to change the add to cart button text, when a product is successfully added to the cart. I want to add soms custom html (a icon) to the button.

I tried to change the following, but that does not work. It does not read the HTMl but add it as plain text.

How can I solve this?

File: /app/design/frontend/Theme/theme/Magento_Catalog/web/js/catalog-add-to-cart.js

setTimeout(function () {
    var addToCartButtonTextDefault = self.options.addToCartButtonTextDefault || $t('<i class="fad fa-shopping-cart"></i>Add to Cart');

    addToCartButton.attr('title', addToCartButtonTextDefault);
}, 1000);
  • Answer posted check and let me know working or not Dec 29, 2019 at 12:04

1 Answer 1


You just need to replace text() function to html() function

setTimeout(function () {
    var addToCartButtonTextDefault = self.options.addToCartButtonTextDefault || $t('<i class="fa fa-shopping-cart"></i>Add to Cart'); //add class fa fa-shopping-cart instead of fad fa-shopping-cart 

    addToCartButton.find('span').html(addToCartButtonTextDefault); //replace text() funtion to html() function here
    addToCartButton.attr('title', addToCartButtonTextDefault);
}, 1000);

Hope this will help you!

  • Thanks a lot! Did not saw that logic, quite easy :)
    – JGeer
    Dec 29, 2019 at 15:08
  • you are welcome bro Dec 29, 2019 at 16:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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