WooCommerce Change Add To Cart Button Text On Click

About This Solution

A key part of a good User Experience (UX) is feedback. Knowing you’ve clicked on something prevents rage clicks. Have you ever spam clicked the add to cart button because you weren’t sure if a product was being added or not then find 20 Gucci belts in your basket? This short code encompasses jQuery which recognises when you have clicked on the add to cart button. You’ll notice on most Magento 2 stores, when you click the add to cart button, the text will change to “Adding…”, then once added to cart, the text will show “Added” for a brief moment. This type of on click event lets the user know that the product is being added to the cart and to be patient. You’ll notice from the code snippet that the code is set not to run on external/affiliate or variable products. This is because external/affiliate products take you to another site – nothing is added to the cart as such. For variable products, the code is disabled because the user must first selection options. If the text were to say “adding…” but the user has not selected options, it would provide a negative User Experience (UX).

/**
* Snippet Name:     Change the WooCommerce Add To Cart button text on click.
* Snippet Author:   ecommercehints.com
*/

add_action( 'wp_footer', 'single_add_to_cart_event_text_replacement' );
function single_add_to_cart_event_text_replacement() {
global $product;

if( ! is_product() ) return; // Only single product pages
if( $product->is_type('variable') ) return; // Not variable products
if( $product->is_type('external') ) return; // Not affiliate products
?>
<script type="text/javascript">
(function($){
$('button.single_add_to_cart_button').click( function(){
$(this).text('<?php _e( "Adding...", "woocommerce" ); ?>');
});
})(jQuery);
</script>
<?php
}