When shopping online, visitors often browse through several products before deciding what they want to buy. But once they leave a product page, finding that product again can be frustrating, especially if they have viewed several other products in the meantime.
A Recently Viewed Products section makes this process much easier. It reminds shoppers about products they have already shown interest in and gives them a quick way to return to those products.
With PowerPack’s Woo - Products widget, you can dynamically display recently viewed products on your WooCommerce Single Product pages. The widget automatically uses the visitor’s browsing activity to determine which products to display, so you don’t have to manually select or update products.
In this guide, we’ll show you how to create a Single Product template in Elementor and use the Woo - Products widget to display recently viewed products.
Display Recently Viewed Products Using the Woo – Products Widget#
What You’ll Need#
Before getting started, make sure you have the following plugins installed and activated:
You’ll also need a WooCommerce store with products added to it.
Step 1: Create a Single Product Template#
First, you need a Single Product template where you can add the recently viewed products section. From your WordPress dashboard, go to Elementor >> Editor >> Templates. Click Add New Template.
If you already have a Single Product template, you can open that template instead and skip the template creation step.
When creating a new template, choose the appropriate template type (Page) for your WooCommerce product page and give the template a descriptive name. For example, you can name it Single Product Page.
Click Create Template to open the template in the Elementor editor.
Set Up the Page Layout#
Once the Elementor editor opens, you can set up the layout for your Single Product page.
If you want to change the default page layout, click the Settings icon at the bottom-left corner of the Elementor panel. From there, choose the layout that works best for your design.
You can use a canvas-style layout or another layout depending on your theme and website structure.
Publish this template & head back to your website dashboard.
Step 2: Enable the PowerPack WooCommerce Builder#
PowerPack provides WooCommerce-specific widgets that you can use to build and customize your product pages in Elementor.
Before adding these widgets, make sure the WooCommerce Builder is enabled in PowerPack. In the Elementor editor, open the PowerPack settings and locate the WooCommerce Builder option. Toggle it on to enable the WooCommerce builder features.
Once enabled, additional WooCommerce-related options will become available for your template.
Since we're creating a Single Product page, select the template you created from the Single Page Template option. You can then click Edit under the Single Page Template option to open the template in Elementor and continue customizing it.
Step 3: Design Your Single Product Page#
Now you can create the layout of your Single Product page. You have two options here.
You can either build the page layout from scratch or import a pre-designed template and customize it according to your needs.
Add the product-related sections and widgets you want to include on your page, such as:
- Product image
- Product title
- Product price
- Product description
- Add to Cart button
- Product ratings
- Product meta
- Additional product information
Once the main product content is ready, decide where you want to display the Recently Viewed Products section.
For example, you can place it below the product details or near the bottom of the Single Product page.
Step 4: Add the Woo - Products Widget#
Now it's time to add the PowerPack Woo - Products widget to your Single Product template.
In the Elementor widget panel, search for Woo - Products. Drag and drop the widget into the section where you want your recently viewed products to appear.
Once added, click the widget to open its settings.
The Woo - Products widget gives you control over the products displayed in the listing, along with options to customize the layout and appearance.
At this point, the widget may display products based on its default query settings. We'll change those settings next so it only displays products that the visitor has recently viewed.
Step 5: Set the Product Source to Recently Viewed#
This is the key step that makes the product listing dynamic.
Select the Woo - Products widget and open its Query settings.
Look for the Source option.
By default, the widget can use other product sources to determine which products should be displayed. To show products based on each visitor's browsing activity, change the source to:
Recently Viewed
Once you select Recently Viewed, the widget will automatically use the visitor's recently viewed products as the source for the product listing.
This means you don't need to manually select products. For example, imagine a visitor browses these products:
- Blue Running Shoes
- Leather Backpack
- Cotton T-Shirt
- Travel Jacket
When the visitor returns to another product page, the Woo - Products widget can display these previously viewed products in the Recently Viewed section.
The products shown will be different for each visitor based on their browsing activity.
What Happens if a Visitor Hasn't Viewed Any Products?#
Recently viewed products depend on the visitor's browsing activity. If a visitor hasn't viewed any products yet, there may not be any products available for the widget to display.
This is expected because the widget doesn't have any browsing history to use for the Recently Viewed query.
Step 6: Update the Single Product Template#
Once you're happy with the layout and styling, click Update to save your changes.
Your Single Product template will now include the Recently Viewed Products section. When visitors browse products on your WooCommerce store, the Woo - Products widget can dynamically populate this section based on their recently viewed products.
Preview the Recently Viewed Products#
To test the setup, open your store and visit a few different product pages. Browse several products and then return to another Single Product page where your Recently Viewed Products section is displayed.
You should see the products that match the visitor's recent browsing activity.
Remember that the section relies on browsing history, so you may not see any products when testing with a fresh visitor session that hasn't viewed any products yet.
Wrapping Up!#
A Recently Viewed Products section is a simple addition that can make WooCommerce stores easier to browse. Instead of asking visitors to search for products they have already explored, you can bring those products back to their attention automatically.
With PowerPack's Woo - Products widget, setting this up is straightforward. Create or edit your Single Product template, add the Woo - Products widget, set its Source to Recently Viewed, and customize the product grid to match your store's design.
Once configured, the product listing dynamically changes based on each visitor's browsing activity, giving shoppers an easy way to return to products they have already explored.