With Recently Viewed Products you can show customers the products they have browsed so they can easily add them to the cart.
Recently Viewed Products is a General widget of ShopEngine, so you can use this in any of the ShopEngine templates.
Let’s learn how you can use Recently Viewed Products Widgets on your wooCommerce site:
Step 1: Enable the Recently Viewed Products Widget #
To enable the widget,
- Go to ShopEngine > Widgets > Recently Viewed Products
- Turn on Recently Viewed Products under General section
- Save changes
Note: You can also turn on Recently Viewed Products with a global setting that turns on all the widgets of ShopEngine at the same time.
Step 2: Add Recently Viewed Products #
Before you can add the widget you need to any ShopEngine WooCommerce Template first. Check out the documentation on how to create a template.
To add Recently Viewed Products:
- Go to ShopEngine > Templates > Any ShopEngine Template
- Click on Edit with Elementor
- Search for Recently Viewed Products on Elements Search option.
- Drag and drop the widget
- Click on Update to save changes.
Step 3: Settings of Recently Viewed Products #
You can customize the following settings:
Go to content > General and expand
- Products Per Page: Set the number of recently viewed products you want to show per page.
- Order: You can show the product in ascending or descending order. Choose ASC for ascending and DESC for descending.
- Order By: You can display the product order by ID, Title, Name, Date, and Popular.
- Column: Choose how many columns you want to display per row.
Go to content > Settings and expand to get access the following badge settings:
- Show Sale Badge: Turn this option on to show the sale badge. If you don’t want to display the sale badge, turn it off.
- Show Discount Percentage: You can turn this option on to show the discounted percentage.
- Show Tag: To show tag, turn this option on.
- Badge Position: You can set the badge position to top left and top right. You can also choose a custom position using the values of the X-axis and Y-axis.
- Badge Align: Set the badge to align to vertical or horizontal according to your wish.
After making all the settings changes, click update to save.
Step 4: Style Settings of Recently Viewed Products #
After you are done with the settings, you can change the style from content > style
Expand the Product Wrap option to change the following style:
- Column Gap: Choose the gap between each column in pixels.
- Row Gap: Enter the gap you want between each row here.
- Padding: Set the top, left, right, and bottom padding.
- Image Background: Choose the background color
- Border Type: Select the border type you want around each product section.
Expand the Product Badge option to change the following style:
- Typography: Choose the font family, font size, weight, transform, line height, and letter spacing for the sale badge.
- Color: Change the color of the badge text.
- Badge Background: Choose the badge background from this option.
- Percentage Badge Background: Select the background color for the percentage badge.
- Space In-between Item (px): Choose the space you want between items.
- Padding: Choose the top, right, bottom, and left padding around the badge.
- Margin: Select the top, right, bottom, and left margin around the badge.
- Border Type: You can change the border type here.
- Border Radius: Here you can set the top, right, bottom, and left value of border-radius.
After making all the changes click update to save. Now, recently viewed products should be visible on the storefront with all the customization and styling.
Here is a final preview of the Recently Viewed Products widget: