How to Add a Recently Viewed Products Feature to WooCommerce

When customers browse an online store, they may view several products before deciding what to purchase. If they want to return to a product they viewed earlier, finding it again can be inconvenient.

A recently viewed products section solves this problem by displaying products a customer has previously visited. It gives shoppers an easy way to return to products they were considering and can also provide another opportunity to continue browsing or complete a purchase.

WooCommerce doesn’t provide a dedicated recently viewed products section by default, but you can add this functionality using a plugin or custom code.

In this guide, we’ll explain how to add recently viewed products to a WooCommerce store step by step.

Why Add Recently Viewed Products to WooCommerce?

A recently viewed products feature can make it easier for customers to navigate your store.

It can help you:

• Give customers quick access to products they recently viewed.
• Make product discovery easier.
• Reduce the need to search for previously viewed products.
• Encourage customers to return to products they were considering.
• Create a more personalized shopping experience.

For stores with large product catalogs, this feature can be particularly useful because customers may otherwise have difficulty finding a product they previously visited.

Method 1: Add Recently Viewed Products Using a Plugin

The simplest way to add this feature is by using a WooCommerce-compatible plugin that provides recently viewed product functionality.

Step 1: Choose a Recently Viewed Products Plugin

From your WordPress dashboard, go to:

Plugins → Add New Plugin

Search for a WooCommerce plugin that provides a Recently Viewed Products feature.

Before installing one, check that the plugin is compatible with your current WooCommerce and WordPress versions.

Step 2: Install and Activate the Plugin

Install the plugin and click Activate.

Depending on the plugin, a new settings page may appear under:

WooCommerce → Settings

or under the plugin’s own menu.

Step 3: Configure the Recently Viewed Products Settings

Open the plugin settings and configure options such as:

• Number of products to display.
• Product image size.
• Product title.
• Product price.
• Product rating.
• Display location.
• Number of recently viewed products to remember.

For example, you might choose to display the customer’s last 4 or 6 viewed products.

Step 4: Choose Where to Display the Products

The recently viewed products section can typically be displayed in areas such as:

• Product pages
• Shop pages
• Sidebar
• Homepage
• Footer
• Custom widget areas

A product page is often a useful location because customers can immediately see other products they previously viewed.

Step 5: Save and Test the Settings

Save your changes and open your store in a new browser window.

Visit several product pages and then return to one of the products.

The recently viewed products section should now display products that you previously visited.

Method 2: Add Recently Viewed Products Using Custom Code

If you don’t want to install another plugin, you can build a basic recently viewed products feature using WooCommerce hooks, cookies, and a shortcode.

This approach gives you more control over how the feature works and where it appears.

Important: Always back up your website before adding custom PHP code. If possible, add the code through a child theme or a code-snippet management plugin rather than directly editing the parent theme.

Step 1: Track Viewed Products

The first step is to store the IDs of products that the customer visits.

The following code uses a WooCommerce cookie to keep track of recently viewed products:

add_action( 'template_redirect', 'custom_track_recently_viewed_products' );

function custom_track_recently_viewed_products() {

    if ( ! is_product() ) {
        return;
    }

    global $post;

    $product_id = $post->ID;

    $viewed_products = isset( $_COOKIE['custom_recently_viewed'] )
        ? json_decode( stripslashes( $_COOKIE['custom_recently_viewed'] ), true )
        : array();

    if ( ! is_array( $viewed_products ) ) {
        $viewed_products = array();
    }

    $viewed_products = array_diff( $viewed_products, array( $product_id ) );

    array_unshift( $viewed_products, $product_id );

    $viewed_products = array_slice( $viewed_products, 0, 6 );

    setcookie(
        'custom_recently_viewed',
        wp_json_encode( $viewed_products ),
        time() + ( 30 * DAY_IN_SECONDS ),
        COOKIEPATH,
        COOKIE_DOMAIN
    );
}

This example stores up to six recently viewed product IDs in a browser cookie.

Step 2: Create a Shortcode

Next, create a shortcode that retrieves the stored product IDs and displays the products.

add_shortcode( 'recently_viewed_products', 'custom_recently_viewed_products' );

function custom_recently_viewed_products() {

    if ( empty( $_COOKIE['custom_recently_viewed'] ) ) {
        return '';
    }

    $product_ids = json_decode(
        stripslashes( $_COOKIE['custom_recently_viewed'] ),
        true
    );

    if ( empty( $product_ids ) || ! is_array( $product_ids ) ) {
        return '';
    }

    $product_ids = array_map( 'absint', $product_ids );

    $query = new WP_Query( array(
        'post_type'      => 'product',
        'post__in'       => $product_ids,
        'posts_per_page' => 6,
        'orderby'        => 'post__in',
        'post_status'    => 'publish',
    ) );

    if ( ! $query->have_posts() ) {
        return '';
    }

    ob_start();

    echo '<div class="recently-viewed-products">';
    echo '<h2>Recently Viewed Products</h2>';
    echo '<div class="recently-viewed-grid">';

    while ( $query->have_posts() ) {
        $query->the_post();

        $product = wc_get_product( get_the_ID() );

        if ( ! $product ) {
            continue;
        }

        echo '<div class="recently-viewed-item">';

        echo '<a href="' . esc_url( get_permalink() ) . '">';
        echo $product->get_image();
        echo '</a>';

        echo '<h3>';
        echo '<a href="' . esc_url( get_permalink() ) . '">';
        echo esc_html( get_the_title() );
        echo '</a>';
        echo '</h3>';

        echo '<span class="price">';
        echo wp_kses_post( $product->get_price_html() );
        echo '</span>';

        echo '</div>';
    }

    echo '</div>';
    echo '</div>';

    wp_reset_postdata();

    return ob_get_clean();
}

Step 3: Add the Shortcode to Your Store

Once the shortcode has been added, you can place it wherever you want the recently viewed products to appear.

Use:

[recently_viewed_products]

For example, you could add it to:

• • A WooCommerce product page.
  • A custom Elementor section.

• A WordPress page.
• A widget area.
• A custom template.

The exact placement method depends on your WordPress setup.

Step 4: Style the Recently Viewed Products Section

The products may need some CSS to match the design of your store.

For example:

.recently-viewed-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.recently-viewed-item img {
    width: 100%;
    height: auto;
}

.recently-viewed-item h3 {
    font-size: 16px;
    margin: 10px 0 5px;
}

.recently-viewed-item .price {
    font-weight: 600;
}

@media (max-width: 767px) {
    .recently-viewed-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

Adjust the number of columns, spacing, font sizes, and other styles to match your website’s existing product layout.

Where Should You Display Recently Viewed Products?

There isn’t one required location for this feature. The best placement depends on your store’s layout and customer journey.

Product Pages

Displaying recently viewed products near the bottom of a product page can give customers quick access to products they previously considered.

Shop Pages

A recently viewed section can also be placed near the bottom of the shop page, allowing returning visitors to quickly find products they have already explored.

Homepage

For stores with returning customers, a recently viewed section on the homepage can provide a convenient shortcut to previously viewed products.

Cart or Checkout

You can also display recently viewed products near the cart, although this should be done carefully so it doesn’t distract customers from completing their purchase.

How Many Products Should You Display?

Avoid displaying too many products in the recently viewed section.

A small selection, such as 4 to 6 products, is usually enough to provide useful shortcuts without overwhelming the customer.

You can adjust the number depending on your store’s design and product catalog.

Things to Consider Before Adding the Feature

Before implementing recently viewed products, consider how the feature will work with your site’s caching and privacy setup.

Caching

If your website uses a caching plugin or CDN, make sure the recently viewed products function correctly for individual visitors.

A browser-cookie-based implementation can help keep the viewed-product information specific to the visitor, but your caching configuration still needs to be tested.

Mobile Responsiveness

The recently viewed section should work properly on smaller screens.

Check:

• Product image sizes.
• Number of columns.
• Product title wrapping.
• Price visibility.
• Spacing between products.
• Horizontal scrolling, if used.

Performance

Avoid loading an excessive number of products or unnecessarily large images. Keep the section lightweight so it doesn’t negatively affect page performance.

Test the Recently Viewed Products Feature

After implementing the feature, test it from a customer’s perspective.

Follow these steps:

1. Open your store in a new browser session.
2. Visit Product A.
3. Visit Product B.
4. Visit Product C.
5. Return to another page.
6. Check the recently viewed products section.
7. Confirm that the products appear in the expected order.
8. Click one of the products and verify that the link works.
9. Test the feature on mobile.
10. Clear the browser cookies and confirm the behavior resets as expected.

Also test the feature for both logged-in and logged-out visitors if your implementation supports both.

Frequently Asked Questions

Does WooCommerce have recently viewed products by default?
WooCommerce provides many product display features, but a dedicated recently viewed products feature isn’t available as a standard checkout or product browsing feature. You can add it with an extension, plugin, or custom implementation.

Can I add recently viewed products without a plugin?
Yes. You can create a custom solution using PHP, cookies, WooCommerce hooks, and a shortcode.

How many recently viewed products should I show?
Displaying around four to six products is a practical starting point. You can adjust the number based on your store’s design and customer experience.

Do recently viewed products work for logged-out customers?
Yes, a cookie-based implementation can track recently viewed products for visitors who aren’t logged in. The data is stored in the visitor’s browser rather than their WooCommerce account.

Can I display recently viewed products on mobile?
Yes. The section can be made responsive using CSS so that the product grid adapts to smaller screen sizes.

Final Thoughts

Adding a recently viewed products section is a useful way to make WooCommerce stores easier to navigate. Customers can quickly return to products they previously explored instead of searching through the catalog again.

For a simple implementation, a dedicated WooCommerce plugin can handle the functionality with minimal development work. If you need more control over how products are tracked and displayed, a custom solution using cookies and WooCommerce hooks can be used.

Whichever approach you choose, keep the section simple, limit the number of products displayed, and test it across desktop and mobile devices before making it available to all customers.

Subscribe

Login

Notify of

new follow-up comments new replies to my comments

Label

{} [+]

Name*

Email*

Website

Label

{} [+]

Name*

Email*

Website

0 Comments

Oldest

Newest Most Voted

Inline Feedbacks

View all comments