How to Show Related Products on a Product Page? (Based on Categories & Tags)

Updated on September 29, 2023 by Ananda
Table Of Content

In online stores, product recommendations are crucial for maximizing sales. One effective way to achieve these goals is by displaying related products on a single product page. By doing so, you not only provide customers with more options to choose from, but also increase the chances of them buying multiple products.

With the help of the Product Listing widget from The Plus Addons for Elementor, you can easily show related products based on category and tags on your single product pages.

To check the complete feature overview documentation of The Plus Addons for Elementor Product Listing widget, click here.

Requirement  – This widget is a part of The Plus Addons for Elementor, make sure its installed & activated to enjoy all its powers.

To create the single product template, you can use the free Nexter Builder, or you can use Elementor Pro if you are already using it.

Now once you have created the single product template, make sure you’ve added some products in your WooCommerce store, then follow the steps – 

1. Add the Product Listing widget to the template. 

2. Select Single Page Related Products from the Product Listing Types dropdown.

3. You can choose the basis for displaying related products by selecting an option from the Related Post Type dropdown. Here you’ll find three options – 

Based on Category – This will show related products based on the product category.

Based on Tag – This will show related products based on the product tag.

Both – This will show related products based on category and tags together.

Select the option that fits your need.

Product listing single product related products

4. Then select the appropriate style and layout from the Style and Layout dropdown, respectively.

Now you should be able to see related products on a single product page based on category and tag.

Note: Make sure to use other single product related widgets to ensure that your content is displayed correctly.

You can fine-tune the settings and style from other options.

Also, check How to Show Upsell Products in Woocmmerce in Elementor.

OR
Get Free 25+ Secrets to Make Elementor Website Faster [Guaranteed Results]



    Subscribe to our YouTube Channel for Elementor Tutorials
    New Video Every Week!
    Automatically Convert Figma Designs to 100% Editable Elementor Website

    Related Docs

    X