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 businessbloomer.com/woocommerce-customization
* @author Rodolfo Melogli, Business Bloomer
* @compatible WooCommerce 9
* @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 businessbloomer.com/woocommerce-customization
* @author Rodolfo Melogli, Business Bloomer
* @compatible WooCommerce 9
* @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 );
if ( ! $times_added_to_cart ) {
echo '<p>No data available</p>';
return;
}
$conversion = 100 * $units_sold / $times_added_to_cart;
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>';
}
Hi,
How do we check the “value” attribute of the “Add to Cart” button is valid on my site?
I am using Oxygen Builder to customise my site.
What would we need to modify if necessary?
Thanks
Raj, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
It says PHP Fatal error: Uncaught DivisionByZeroError: Division by zero in /sites/site.com/wp-content/themes/woodmart-child/functions.php:59
Stack trace:
#0 /sites/site.com/wp-admin/includes/template.php(1456): bbloomer_display_add_cart_stats()
Sorry! Try now