When someone shops online, they’ll often browse through several products before deciding what to buy. If they want to revisit something they viewed earlier, finding it again can be a hassle, especially after visiting multiple product pages.
Adding a Related Products section to your product pages makes it easier for shoppers to discover products that are relevant to what they’re currently viewing. It can also keep them browsing your store instead of sending them back to search for products manually.
With PowerPack’s Woo - Products widget, you can dynamically display related products on your WooCommerce Single Product pages. Instead of manually selecting products for each page, you can let the widget automatically pull related products.
In this guide, we’ll show you how to create a Single Product template in Elementor and use the Woo - Products widget to add a dynamic Related Products section.
Display Related Products Using the Woo - Products Widget#
What You’ll Need#
Before you get started, make sure you have the following plugins installed and activated:
You’ll also need WooCommerce installed and a few products added to your store.
Step 1: Create a Single Product Template#
First, you need a Single Product template where you can add the Related Products section. From your WordPress dashboard, go to Elementor >> Editor >> Templates and click Add New Template.
If you already have a Single Product template, you can open it and skip this step.
When creating a new template, choose the appropriate template type for your WooCommerce product page and give it 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 start setting up your Single Product page layout.
If you want to change the default page layout, click the Settings icon in the bottom-left corner of the Elementor panel and choose the layout that best suits your website.
You can use a Canvas layout or another layout depending on your theme and how your website is set up.
Once you’re done, publish the template and head back to your WordPress dashboard.
Step 2: Enable the PowerPack WooCommerce Builder#
PowerPack includes several WooCommerce-specific widgets that let you build and customize your product pages directly in Elementor.
Before using these widgets, make sure the WooCommerce Builder is enabled in PowerPack. Open the PowerPack settings in the Elementor editor and look for the WooCommerce Builder option. Turn it on to enable the WooCommerce builder features.
Once enabled, you’ll have access to additional WooCommerce options for your product templates.
Since we’re creating a Single Product page, select the template you created from the Single Page Template option. Then, click Edit under the Single Page Template option to open the template in Elementor.
Step 3: Design Your Single Product Page#
Now you can start building your Single Product page. You can either create the layout from scratch or import a pre-designed template and customize it to match your website.
Add the product information and sections you want to display, 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 in place, decide where you want the Related Products section to appear.
A common option is to place it below the main product details or closer to the bottom of the page.
Step 4: Add the Woo - Products Widget#
Now let’s add the PowerPack Woo - Products widget to your Single Product template.
In the Elementor widget panel, search for Woo - Products and drag the widget into the section where you want the related products to appear.
Click the widget to open its settings. The Woo - Products widget gives you several options to control which products are displayed and to customize the layout and styling of the product listing.
Step 5: Set the Product Source to Related Products#
This is where you tell the widget which products to display. Select the Woo - Products widget and open its Query settings. Look for the Source option. You’ll see different options for choosing the products that should appear in the listing.
To display related products, set the source to: Related Products.
Once selected, the widget will automatically pull products related to the product being viewed.
This means you don’t have to manually create a separate product list for every Single Product page. The widget can dynamically determine which products to display based on the current product.
Step 6: Update the Single Product Template#
Once you’re happy with the layout, product source, and styling, click Update to save your changes.
Your Single Product template will now include the Related Products section. When visitors open your product pages, the Woo - Products widget will automatically populate the section with products related to the current product.
Preview the Related Products#
Before wrapping up, it’s a good idea to test the setup on your live or preview site.
Open a product page and check the Related Products section. Then visit a few other product pages to make sure the widget is displaying the products you expect.
If you don’t see any products while testing, check that:
- WooCommerce products are available.
- The Woo - Products widget is using Related Products as its source.
- Your Single Product template is published and assigned correctly.
- Your products have relevant categories or tags configured if your store setup relies on them for determining related products.
Once everything is working as expected, visitors will see relevant products directly on your Single Product pages, making it easy to discover more products without leaving the page.
Wrapping Up!#
Adding related products to your WooCommerce product pages is a simple way to help shoppers discover more of what your store offers.
With PowerPack’s Woo - Products widget, you can add this section directly to your Elementor Single Product template and let the widget handle the product selection dynamically.
Set up the section once, customize its design to match your store, and your related products can be displayed automatically across your product pages.