How To Show Recently Viewed Products In Woocommerce

How to Show Recently Viewed Products in WooCommerce: A Simple Guide

Have you ever visited a website, looked at a specific product, then left and wondered, “Where was that again?” As a website owner, you can prevent this frustration for your customers by implementing a “Recently Viewed Products” feature in your WooCommerce store. This simple addition can significantly improve user experience and boost sales by reminding customers of items they were interested in.

Think of it like this: You’re browsing an online clothing store. You look at a beautiful red dress but decide to browse further. Later, you can’t quite remember the brand or find it again. A “Recently Viewed” section would make your life (and the store’s revenue) much easier!

This guide will walk you through several ways to add this functionality to your WooCommerce store, even if you’re a beginner.

Why Show Recently Viewed Products?

There are several compelling reasons to add recently viewed products to your WooCommerce store:

• Improved User Experience: It’s a helpful and convenient feature for customers, making it easier for them to find items they previously considered.
• Increased Sales: Reminding customers of products they were interested in can lead to impulse purchases and higher conversion rates. Think of it as a gentle nudge!
• Reduced Bounce Rate: Keeping customers engaged and providing them with relevant content can encourage them to explore your store further.
• Personalized Shopping Experience: Tailoring the browsing experience to individual customers can increase satisfaction and loyalty.

Method 1: Using a Plugin (Recommended for Beginners)

The easiest way to implement recently viewed products is by using a plugin. Several excellent options are available, both free and premium.

Why use a plugin? Plugins handle the coding and complexity for you, allowing you to quickly add the feature without any technical knowledge.

Here’s a popular and free option: WooCommerce Recently Viewed Products.

Steps to Install and Configure the Plugin:

1. Install the Plugin: In your WordPress admin area, go to Plugins > Add New. Search for “WooCommerce Recently Viewed Products” and install the plugin (typically by rightpress). Activate the plugin after installation.

2. Configuration (if available): Some plugins have settings pages where you can customize the appearance and behavior of the recently viewed products section. Look for a settings tab under WooCommerce or in the Plugins section. This may include options for:

• The number of products to display.
• The position of the section (e.g., sidebar, below product details).
• The title of the section (e.g., “Recently Viewed,” “You May Also Like”).

Example: You install the “WooCommerce Recently Viewed Products” plugin, and it automatically adds a “Recently Viewed” section to the bottom of each product page. Customers who view a blue t-shirt will see it displayed in that section when they browse other products.

Method 2: Adding Code to Your Theme (More Advanced)

If you’re comfortable with a little bit of coding, you can add the functionality directly to your theme’s `functions.php` file or create a custom plugin (best practice to avoid theme updates overwriting your changes).

Important: Always back up your theme files before making any changes. A small mistake can break your site. Also, consider using a child theme to avoid losing changes when your theme updates.

<?php
/**
Display Recently Viewed Products
*/
function woocommerce_recently_viewed_products( $atts ) {

// Retrieve recently viewed product IDs from cookies

$viewed_products = ! empty( $_COOKIE[‘woocommerce_recently_viewed’] ) ? (array) explode( ‘|’, $_COOKIE[‘woocommerce_recently_viewed’] ) : array();

$viewed_products = array_filter( array_map( ‘absint’, $viewed_products ) );

// If no recently viewed products, return

if ( empty( $viewed_products ) ) {

return ‘

No products viewed yet.

‘;

}

$args = array(

‘posts_per_page’ => $atts[‘per_page’] ?? 4, // Default to 4 products

‘post_type’ => ‘product’,

‘post__in’ => $viewed_products,

‘orderby’ => ‘post__in’, // Preserve viewing order

‘meta_query’ => array(

array(

‘key’ => ‘_visibility’,

‘value’ => array( ‘catalog’, ‘visible’ ),

‘compare’ => ‘IN’

)

)

);

$loop = new WP_Query( $args );

if ( $loop->have_posts() ) {

$output = ‘

‘; // Default to 4 columns

$output .= ‘

Recently Viewed Products

‘;

$output .= ‘

‘;

while ( $loop->have_posts() ) {

$loop->the_post();

global $product;

$output .= ‘

• ‘;

  $output .= ‘‘;

  $output .= get_the_post_thumbnail( get_the_ID(), ‘woocommerce_thumbnail’ );

  $output .= ‘

  ‘ . get_the_title() . ‘

  ‘;

  $output .= ‘‘ . $product->get_price_html() . ‘‘;

  $output .= ‘‘;

  $output .= ‘

‘;

}

$output .= ‘

‘;

$output .= ‘

‘;

wp_reset_postdata();

return $output;

} else {

return ‘

No products found.

‘;

}

}

add_shortcode( ‘recently_viewed_products’, ‘woocommerce_recently_viewed_products’ );

add_action( ‘wp_footer’, ‘track_recently_viewed_products’ );

function track_recently_viewed_products() {

if ( is_product() ) {

global $post;

$product_id = $post->ID;

// Retrieve existing viewed products

$viewed_products = ! empty( $_COOKIE[‘woocommerce_recently_viewed’] ) ? (array) explode( ‘|’, $_COOKIE[‘woocommerce_recently_viewed’] ) : array();

$viewed_products = array_filter( array_map( ‘absint’, $viewed_products ) );

// Add current product to the list

if ( ! in_array( $product_id, $viewed_products ) ) {

$viewed_products[] = $product_id;

}

// Limit the number of stored products

$viewed_products = array_slice( $viewed_products, -15, 15 );

// Set cookie

setcookie( ‘woocommerce_recently_viewed’, implode( ‘|’, $viewed_products ), time() + (3600 * 24 * 30), COOKIEPATH, COOKIE_DOMAIN ); // Valid for 30 days

}

}

?>

Explanation:

1. `woocommerce_recently_viewed_products()` function:

• This function retrieves the product IDs from a cookie named `’woocommerce_recently_viewed’`.
• It checks if any products have been viewed. If not, it displays a message.
• It builds a WordPress query to fetch the recently viewed products based on their IDs.
• It loops through the results and generates the HTML markup for each product (thumbnail, title, price).
• It adds the product HTML to an output buffer to display it.
• It includes optional attributes for the number of posts to display (per_page) and the number of columns (columns).

2. `add_shortcode()`: This line registers a shortcode named `[recently_viewed_products]` that you can use to display the recently viewed products anywhere on your site. For example, you would add `[recently_viewed_products per_page=”3″ columns=”3″]` to a page or widget to show the 3 most recent products in 3 columns.

3. `track_recently_viewed_products()` function:

• This function is called in the `wp_footer` hook, which is executed just before the “ tag. This ensures it will load after all the main content.
• It checks if the current page is a product page (`is_product()`).
• If so, it gets the product ID of the viewed product.
• It then checks if the recently viewed cookie is set and if so gets the product IDs.
• It adds the current product to the list if it’s not there already.
• It limits the total number of products saved to 15.
• It sets the ‘woocommerce_recently_viewed’ cookie, which will then be available on the next page load.

How to Use the Code:

1. Add the Code: Copy the code above and paste it into your theme’s `functions.php` file (or create a custom plugin).

2. Display the Products: Use the shortcode `[recently_viewed_products]` in any page, post, or widget area where you want to display the recently viewed products. Customize the number of products and columns by changing the parameters (e.g., `[recently_viewed_products per_page=”5″ columns=”5″]`).

Example: You add the code to your `functions.php` file and then add the shortcode `[recently_viewed_products per_page=”3″ columns=”3″]` to your shop’s sidebar widget. This will display the three most recently viewed products in three columns in the sidebar.

Important Considerations:

• Caching: Caching plugins can sometimes interfere with the cookie functionality. Make sure your caching plugin is configured to exclude pages with dynamic content (like those displaying recently viewed products).
• Privacy: Be mindful of your customers’ privacy. Consider adding a disclaimer to your privacy policy mentioning the use of cookies for this feature.

Method 3: Theme-Specific Options

Some premium WooCommerce themes have built-in options for displaying recently viewed products. Check your theme’s documentation or theme options panel to see if this feature is already available.

Why use theme options? If your theme supports it, this is often the easiest and most seamless way to integrate the feature into your store’s design.

Conclusion

Displaying recently viewed products is a simple yet effective way to enhance the user experience on your WooCommerce store and boost sales. Whether you choose a plugin, add code, or leverage your theme’s built-in options, this feature can significantly improve your store’s performance. Remember to choose the method that best suits your technical skill level and always back up your site before making any changes. Happy selling!