WooCommerce: Count External Product Clicks

Yeah Google Analytics is cool, but have you ever coded your own tracking functions within your WooCommerce website?

An example may be counting the number of times customers click on the “Buy product” button that displays on the Single External Product Page, and show the counter in the Products Table in the backend.

For example, I use this to calculate the Click Through Rate (% clicks / views) and see how popular an external product is. Of course, you could also decide to extend the counter to all products (simple, variable, etc.) and count the number of times customers click on the Add to Cart, but for today let’s stick to the external products count. Enjoy!

Let’s count the number of times customers click on the “Buy product” button of an external/affiliate product on the single product page!
With the snippet below, I managed to add a “Clicks” column to the Products View, where the number of clicks on the external product “Buy product” button clicks are displayed!

PHP Snippet: Count External Product “Buy Product” Button Clicks & Display Counter @ Product Admin

Lots to learn today:

  1. First, we remove the default external product add to cart button, and code ours instead
  2. Some JS triggers the ‘increment_counter’ Ajax function on button click
  3. The ‘increment_counter’ Ajax function counts and stores the number of clicks
  4. The ‘manage_edit-product_columns’ and ‘manage_product_posts_custom_column’ display a new column in the Products admin page, and place the counter value in it
/**
 * @snippet       External Product Button Click Counter
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 7
 * @community     https://businessbloomer.com/club/
 */

add_action( 'woocommerce_external_add_to_cart', 'bblomer_new_external_add_to_cart', 1 );

function bblomer_new_external_add_to_cart() {
	remove_action( 'woocommerce_external_add_to_cart', 'woocommerce_external_add_to_cart', 30 );
	add_action( 'woocommerce_external_add_to_cart', 'bbloomer_external_add_to_cart', 30 );
}

function bbloomer_external_add_to_cart() {
	global $product;
	if ( ! $product->add_to_cart_url() ) return;
	echo '<p><a href="' . $product->add_to_cart_url() . '" class="single_add_to_cart_button button alt countable" data-pid="' . $product->get_id() . '">' . $product->single_add_to_cart_text() . '</a></p>';
	wc_enqueue_js( "
		$('a.countable').click(function(e){
			e.preventDefault();
			$.post( '" . '/wp-admin/admin-ajax.php' . "', { action: 'increment_counter', pid: $(this).data('pid') } );
			window.open($(this).attr('href'));
		});
	" );
}

add_action( 'wp_ajax_increment_counter', 'bbloomer_increment_counter' );
add_action( 'wp_ajax_nopriv_increment_counter', 'bbloomer_increment_counter' );

function bbloomer_increment_counter() {
	$pid = $_POST['pid'];
	$clicks = get_post_meta( $pid, '_click_counter', true ) ? (int) get_post_meta( $pid, '_click_counter', true ) + 1 : 1;
	update_post_meta( $pid, '_click_counter', $clicks );
	wp_die();
}

add_filter( 'manage_edit-product_columns', 'bbloomer_admin_products_views_column', 9999 );

function bbloomer_admin_products_views_column( $columns ){
   $columns['clicks'] = 'Clicks';
   return $columns;
}

add_action( 'manage_product_posts_custom_column', 'bbloomer_admin_products_views_column_content', 9999, 2 );

function bbloomer_admin_products_views_column_content( $column, $product_id ){
	if ( $column == 'clicks' ) {
		echo get_post_meta( $product_id, '_click_counter', true );
    }
}

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: Add Second Description @ Product Category Pages
    In terms of SEO, if you’re trying to rank your product category pages, you really need to make the most of the default WooCommerce product category “description” and “thumbnail”. Most themes, if compatible with WooCommerce, will show this content right below the product category name and above products. Nothing new so far. But what if […]
  • 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 *