How to Show Recently Viewed Products in WooCommerce

Want to show your customers the products they recently looked at? This is a great way to remind them of what they liked and improve their shopping experience. With a little bit of custom code, you can track which products a customer views and display them on the product page.

Let’s break it down step by step.

1. Tracking Recently Viewed Products

The first part of the code tracks which product pages a visitor views.

function track_recently_viewed_products() {
    if (is_singular('product')) {
        $product_id = get_the_ID();

        // Get current list from cookie
        $recently_viewed = isset($_COOKIE['recently_viewed_products']) ? explode(',', $_COOKIE['recently_viewed_products']) : [];

        // Remove current product if already exists
        if (($key = array_search($product_id, $recently_viewed)) !== false) {
            unset($recently_viewed[$key]);
        }

        // Add current product to the beginning
        array_unshift($recently_viewed, $product_id);

        // Keep only last 10 items
        $recently_viewed = array_slice($recently_viewed, 0, 10);

        // Save the updated list in a cookie for 7 days
        setcookie('recently_viewed_products', implode(',', $recently_viewed), time() + (7 * 24 * 60 * 60), COOKIEPATH, COOKIE_DOMAIN);
    }
}
add_action('template_redirect', 'track_recently_viewed_products');

What This Does:

• Every time someone opens a product page, this function runs.
• It stores the product ID in a browser cookie.
• If the product is already in the list, it removes it first, then adds it to the front.
• Only the latest 10 products are saved.
• The cookie is saved for 7 days, so visitors can leave and come back.

2. Displaying Recently Viewed Products

The next part shows those saved products using a shortcode.

function display_recently_viewed_products() {
    if (!isset($_COOKIE['recently_viewed_products'])) return '<p>No recently viewed products.</p>';

    $product_ids = array_filter(explode(',', $_COOKIE['recently_viewed_products']));

    // Exclude the product being viewed
    if (is_product()) {
        $product_ids = array_diff($product_ids, [get_the_ID()]);
    }

    if (empty($product_ids)) return '<p>No recently viewed products.</p>';

    ob_start();

    echo '<h3>Recently Viewed Products</h3>';
    echo do_shortcode('[products ids="' . implode(',', $product_ids) . '" orderby="post__in"]');

    return ob_get_clean();
}
add_shortcode('recently_viewed_products', 'display_recently_viewed_products');

How It Works:

• It reads the list of recently viewed product IDs from the cookie.
• Then it uses the [products] WooCommerce shortcode to display them.
• If there’s nothing to show, it displays a simple message.

You can place the [recently_viewed_products] shortcode anywhere to show the product list — even on pages or widgets.

3. Automatically Show on Product Pages

This part adds the recently viewed section automatically below each single product.

function show_recently_viewed_on_product_page() {
    if (is_product()) {
        echo '<div class="recently-viewed-products">';
        echo do_shortcode('[recently_viewed_products]');
        echo '</div>';
    }
}
add_action('woocommerce_after_single_product', 'show_recently_viewed_on_product_page', 15);

This ensures every product page will have a “Recently Viewed Products” section, making it easy for customers to jump back to something they liked earlier.

4. Styling the Section

Here’s the CSS to make the section look clean and modern:

.recently-viewed-products {
    margin-top: 30px;
    padding: 20px;
    background-color: #f8f8f8;
    border-radius: 10px;
}

.recently-viewed-products h3 {
    font-size: 1.5em;
    margin-bottom: 15px;
}

.recently-viewed-products .products {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

You can add this CSS to your theme’s customizer or stylesheet.

Final Thoughts

This simple method adds powerful functionality to your WooCommerce store. Visitors can easily return to products they’re interested in, which can help increase conversions and improve user experience.

You don’t need any extra plugins — just copy and paste this code into your theme’s functions.php file or a custom plugin, and you’re ready to go!