AI Verified

Name

WooCommerce Change Add To Cart Button Text On Click

About

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

Language

PHP

Rating

Voted: 0 by 0 user(s)

How to Setup Snippet

Simply copy the pre-coded solution to your active child theme’s functions.php or preferably the Code Snippets Plugin.

Link for further information:

The author has provided the following URL that may be helpful to setting up or using this snippet:

https://www.ecommercehints.com/woocommerce-change-add-to-cart-button-text-on-click

Codevault

ecommercehints

Scroll down to see more snippets from this codevault.

Wordpress Compatability

The author has indicated that this snippet is compatable up to wordpress version: 6.1

Our AI bot has checked this snippet is compatable up to wordpress version: 6.1

Code Snippet Plugin Sync

Free & Pro

Download this snippet by clicking the download button, then head over to the Code Snippet Plugin settings in your wordpress admin dashboard, select the import menu then upload this file to import into your wordpress site.

Pro Only (Coming Soon)

You will be able to click a button and sync this snippet to your wordpress site automatically and from your dashboard manage all code snippets across all your wordpress sites that have the Code Snippets Pro plugin installed.

Website/ Profile URL:

https://www.ecommercehints.com/

History

Last modified:

14/11/2022

Important Note

This snippet has the following status:

AI Verified

This snippet has been tested by our AI bot, see any comments below.

AI Bot Comments:

Found 0 vulnerabilities

WooCommerce Change Add To Cart Button Text On Click

 
                    
1/**
2* Snippet Name: Change the WooCommerce Add To Cart button text on click.
3* Snippet Author: ecommercehints.com
4*/
5 
6add_action( 'wp_footer', 'single_add_to_cart_event_text_replacement' );
7function single_add_to_cart_event_text_replacement() {
8global $product;
9 
10if( ! is_product() ) return; // Only single product pages
11if( $product->is_type('variable') ) return; // Not variable products
12if( $product->is_type('external') ) return; // Not affiliate products
13?>
14<script type="text/javascript">
15(function($){
16$('button.single_add_to_cart_button').click( function(){
17$(this).text('<?php _e( "Adding...", "woocommerce" ); ?>');
18});
19})(jQuery);
20</script>
21<?php
22}

0

Related Snippets

Please see some snippets below related to this snippet..

WooCommerce

AI Verified

0

WooCommerce Add Content Below Products In Mini-Cart

Added: 1 year ago

Last Updated: 1 year ago

This quick guide shows you how you can display custom content below the list of products in the mini-cart. This could be the perfect place to let users know of a promotion you are running, a link to a...

WooCommerce

AI Verified

0

Remove WooCommerce Catalog "Orderby" dropdown options

Added: 1 year ago

Last Updated: 1 year ago

Remove the "menu_order", "popularity", "rating", and "date" options from the orderby dropdown in the WooCommerce catalog

WooCommerce

AI Verified

0

WooCommerce Show Content Under The Add To Cart Button On The Product Page

Added: 1 year ago

Last Updated: 1 year ago

Showing content under the add to cart button on the single product page can help you convey important messages to the customer. You may wish to display a promotion, offer, or shipping options earlier...

Other Snippets in this Codevault

These are some popular snippets from this users codevault..

WooCommerce

AI Verified

7

WooCommerce Show Number Of People Viewing Product

Added: 1 year ago

Last Updated: 1 month ago

We want to make this solution absolutely clear from the outset. This snippet does NOT generate the actual number of people viewing the product. It shows a randomly generated number in the range of two...

WooCommerce

AI Verified

5

WooCommerce Show Number Of Units Sold On Product Page

Added: 1 year ago

Last Updated: 2 months ago

Showing the number of product units sold on the single product page is a great way to introduce Fear Of Missing Out (FOMO). You can highlight how many products are sold to let customers know a product...

WooCommerce

AI Verified

3

WooCommerce Add Content Under The Proceed To Checkout Button On The Cart Page

Added: 1 year ago

Last Updated: 2 months ago

How many times have you bought something online and seen trust symbols near the proceed to checkout button on the cart page? “30 Day Money Back Guarantee” or “Secure Checkout” are popular examples. By...