Change button text after added to cart (CSS code please)

Shopify Discussion
1

Has anybody used Stiletto theme before?

Would love the text on the buttons changed after clicked to ADDING for 1s and ADDED! for the next second.

FIXED. Apologies, don’t know how to delete this.

Thanks!

1 Like
2

Not sure if you can mark your own post as solved. Otherwise use this one to mark the topic as solved :slightly_smiling_face:

Feel free to share your solution so others can follow.

3

What theme are you using?

4

This is the solution.

Add this to your theme.liquid just before the closing tag.

This is JavaSscript.

document.addEventListener('DOMContentLoaded', function() {
  var addToCartButtons = document.querySelectorAll('.product-form__cart-submit');

  addToCartButtons.forEach(function(button) {
    button.addEventListener('click', function(event) {

      var buttonText = button.querySelector('[data-add-to-cart-text]');
      var loadingBar = button.querySelector('.btn__loading-wrap');

      buttonText.textContent = 'Adding...';
      loadingBar.style.display = 'block';

      setTimeout(function() {
        buttonText.textContent = 'Added!';
        loadingBar.style.display = 'none';
      }, 1000);

      setTimeout(function() {
        buttonText.textContent = 'Add to Cart';
      }, 2000);
    });
  });
});
1 Like
5

Thanks for sharing!

1 Like