Custom Product View Counter for WooCommerce

In this tutorial, you will learn how to create a Custom Product View Counter for WooCommerce.

Let’s get started.

Need of Product View Counter

It is a good idea to show users how many other users are viewing the product. The product page view counter tells about the total page views of a specific product page, and on every new page view, this counter is incremented.

This counter will auto-increment one per visitor and show you the total views of that page. The page views can be counted based on the visitor’s IP address. If a user visits your page multiple times with the same device, it will be considered as only one. It will only increment if the user visits from a different device.

It gives a great impression on users when they see that this product has many views and they will go for it.

Let’s do this with a couple of lines of code.

Create a WooCommerce Product View Counter:

To create a custom WooCommerce product view counter, you need to make a hook function. Hook function is used to add a post meta field in the wp_postmeta table. 

While loading the product page template, we will use the wp_add_action() hook to execute that function.

Use the following function hook:

1. To get the post meta field get_post_meta()
2. To update the post meta field update_post_meta()
3. To show counter on product page woocommerce_before_add_to_cart_button
4. To show counter on shop page woocommerce_after_shop_loop_item

Let’s see the code below.

Single Product Page view counter:

add_action('wp', 'product_view_counter');
function product_view_counter() { 
global $post;
 if ( is_product() ){
     $meta = get_post_meta( $post->ID, '_total_views_count', TRUE );
     $meta = ($meta) ? $meta + 1 : 1; 
     update_post_meta( $post->ID, '_total_views_count', $meta );
 }
}

Add the above code to your wordpress theme’s functions.php file.

This code will check if the page is a product page or not. If it is a product page then a new post meta field will be added ‘_total_views_count‘ against the specific product. It will auto-increment when user visits the page.

Let’s show it on the product page.

add_action( 'woocommerce_before_add_to_cart_button', 'show_product_view_counter_on_product_page', 10);
function show_product_view_counter_on_product_page() {
global $product;
$id = $product->id;         
$meta = get_post_meta( $id, '_total_views_count', true);
if(!$meta) {
    $count = 0;
} else {        
    $count = $meta; 
}       
echo "<div class="custom-visitor-count"><i class="fa fa-eye"></i><span class="counter-value">".$count." Views</span></div>";
}

The code listed above will display the total number of page views for a specific product page. You can select the specific location to show this count, you just need to find the hooks for a particular place.

Ip Address based Product View Counter:

You can add a view counter based on IP address, so one device gets only one increment on the counter. It will be similar hooks and functions as the above code. The only change we have to do is to detect the user’s IP address.

Let’s see all code together based on IP address.

add_action('wp', 'product_view_counter');
function product_view_counter() {
global $post;
$userip = $_SERVER['REMOTE_ADDR'];
if ( is_product() ){  
 $meta = get_post_meta( $post->ID, '_total_views_count', TRUE );

     $meta = (!$meta) ? array() : explode( ',', $meta );

     $meta = array_filter( array_unique( $meta ) );

     if( ! in_array( $userip, $meta ) ) {

           array_push( $meta, $userip );
           update_post_meta( $post->ID, '_total_views_count', implode(',', $meta) );

     }
}
}

add_action( 'woocommerce_before_add_to_cart_button', 'show_product_view_counter_on_product_page', 10);
function show_product_view_counter_on_product_page() {
global $product;
$id = $product->id;         
$meta = get_post_meta( $id, '_total_views_count', true);
if(!$meta) {
    $count = 0;
} else {        
    $count = count(explode(',',$meta));
}       
echo "<div class="custom-visitor-count"><i class="fa fa-eye"></i><span class="counter-value">".$count." Views</span></div>";
}

add_action( 'woocommerce_after_shop_loop_item', 'show_product_view_counter_on_product_page', 10);
function show_product_view_counter_on_product_page() {
global $product;
$id = $product->id;         
$meta = get_post_meta( $id, '_total_views_count', true);
if(!$meta) {
    $count = 0;
} else {        
    $count = count(explode(',',$meta));
}       
echo "<div class="custom-visitor-count"><i class="fa fa-eye"></i><span class="counter-value">".$count." Views</span></div>";
}

This is all about it. I hope you understand this topic, now create your own custom product view counter for your WooCommerce product page.