WooCommerce: Simple Add To Cart Click Counter

Ever wondered how many visitors actually click “Add to Cart” on your WooCommerce store?

This seemingly simple action holds valuable insights into your product appeal and conversion funnel. By implementing an Add to Cart click counter, you gain a crucial piece of the puzzle, allowing you to calculate your conversion rate more accurately. You already have the number of product sales available, so with this additional piece of data you can assess how effective your product pages are.

In this tutorial, we’ll implement a simple click tracking functionality for a WooCommerce button, guiding you through the setup process and exploring the valuable insights it unlocks. Enjoy!

PHP Snippet: Add To Cart Button Click Counter @ WooCommerce Single Product Page

/**
 * @snippet       Add Cart Button Click Counter @ WooCommerce Single Product Page
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 8
 * @community     https://businessbloomer.com/club/
 */

add_action( 'woocommerce_before_single_product', 'bbloomer_add_to_cart_button_click_counter' );

function bbloomer_add_to_cart_button_click_counter() {
   wc_enqueue_js( "
		$('.single_add_to_cart_button').click(function(e){
         $.post( '" . '/wp-admin/admin-ajax.php' . "', { action: 'add_cart_clicked', pid: $(this).attr('value') } );			
      });
   " );
}

add_action( 'wp_ajax_add_cart_clicked', 'bbloomer_add_cart_clicked' );
add_action( 'wp_ajax_nopriv_add_cart_clicked', 'bbloomer_add_cart_clicked' );
 
function bbloomer_add_cart_clicked() {	
	$pid = $_POST['pid'];
   $times_added_to_cart = (int) get_post_meta( $pid, 'add_cart_clicks', true ) ?? 0;
	update_post_meta( $pid, 'add_cart_clicks', $times_added_to_cart + 1 );		
	wp_die();
}

This code snippet adds functionality to track the number of times the “Add to Cart” button is clicked for a product on a WooCommerce single product page. The click listener looks for an element with the “single_add_to_cart_button” class, so if you use a custom theme or layout, you need to change the selector accordingly.

The script then detects clicks on the “Add to Cart” button and sends an Ajax request to a custom function by passing the product ID, which in case of a default WooCommerce install is stored inside the “value” attribute of the “Add to Cart” button. If you use a custom theme or layout, you need to make sure this is still valid.

The Ajax function retrieves the current number of times the product has been added to the cart (stored as post meta) and increments the count. The code works for both logged-in and non-logged-in users.

At this stage, the click counter is stored into a product meta, and you can get it via:

get_post_meta( $product_id, 'add_cart_clicks', true );

Bonus: Display “Add To Cart -> Sale” Conversion Rate @ Product Admin

Now that we have the number of clicks, we can compare this figure with the total sales and calculate this specific conversion rate. This data can be used to understand which are the most popular products that are added to cart and which are the ones that are more often abandoned.

Here’s a handy PHP snippet you can use to add a meta box to the single product admin page.

/**
 * @snippet       Add Cart Button Click Stats @ WooCommerce Product Admin
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 8
 * @community     https://businessbloomer.com/club/
 */

add_action( 'add_meta_boxes', 'bbloomer_product_meta_box_add_cart_clicks' );
 
function bbloomer_product_meta_box_add_cart_clicks() {
    add_meta_box( 'add_cart_stats', 'Add to Cart Stats', 'bbloomer_display_add_cart_stats', 'product', 'advanced', 'high' );
}
 
function bbloomer_display_add_cart_stats() {
	global $post;
	$product = wc_get_product( $post->ID );
	$units_sold = $product->get_total_sales();
	$times_added_to_cart = (int) get_post_meta( $post->ID, 'add_cart_clicks', true ) ?? 0;
	$conversion = 100 * $times_added_to_cart / $units_sold;
	$abandonment = 100 - $conversion;
	echo '<p>Times added to cart: ' . $times_added_to_cart . '</p>';
	echo '<p>Sales: ' . $units_sold . '</p>';	
	echo '<p>Conversion rate: ' . number_format( $conversion, 2 ) . '%</p>';
	echo '<p>Abandonment rate: ' . number_format( $abandonment, 2 ) . '%</p>';    
}

Where to add custom code?

You should place custom PHP in functions.php and custom CSS in style.css of your child theme: where to place WooCommerce customization?

This code still works, unless you report otherwise. To exclude conflicts, temporarily switch to the Storefront theme, disable all plugins except WooCommerce, and test the snippet again: WooCommerce troubleshooting 101

Related content

  • WooCommerce: Custom Add to Cart URLs – The Ultimate Guide
    In WooCommerce you can add a product to the cart via a custom link. You just need to use the “add-to-cart” URL parameter followed by the product ID. This tutorial will show you how to create custom URLs to add simple, variable and grouped products to the cart – as well as defining the add […]
  • WooCommerce: Hide Price & Add to Cart for Logged Out Users
    You may want to force users to login in order to see prices and add products to cart. That means you must hide add to cart buttons and prices on the Shop and Single Product pages when a user is logged out. All you need is pasting the following code in your functions.php (please note: […]
  • WooCommerce: Show Number Of Products Sold @ Product Page
    WooCommerce database already stores the number of products sold for you. Therefore, you may want to show such number on the product page, close to the Add To Cart button. As we’ve seen in my book Ecommerce and Beyond, showing the number of sales for each product can increase your sales conversion rate. All you […]
  • WooCommerce: Remove / Edit “Added to Your Cart” Message
    A client asked me to completely remove the message that appears after you add a product to the cart from the product page. This is simply done by using a PHP snippet, so here’s the quick fix for you!
  • WooCommerce: Add to Cart Quantity Plus & Minus Buttons
    Here’s a quick snippet you can simply copy/paste or a mini-plugin you can install to show a “+” and a “-” on each side of the quantity number input on the WooCommerce single product page and Cart page. The custom code comes with a jQuery script as well, as we need to detect whether the […]

Rodolfo Melogli

Business Bloomer Founder

Author, WooCommerce expert and WordCamp speaker, Rodolfo has worked as an independent WooCommerce freelancer since 2011. His goal is to help entrepreneurs and developers overcome their WooCommerce nightmares. Rodolfo loves travelling, chasing tennis & soccer balls and, of course, wood fired oven pizza. Follow @rmelogli

Questions? Feedback? Customization? Leave your comment now!
_____

If you are writing code, please wrap it like so: [php]code_here[/php]. Failure to complying with this, as well as going off topic or not using the English language will result in comment disapproval. You should expect a reply in about 2 weeks - this is a popular blog but I need to get paid work done first. Please consider joining the Business Bloomer Club to get quick WooCommerce support. Thank you!

Your email address will not be published. Required fields are marked *