How to Display Related Products in Elementor Pro Dynamically

Showing related products in Elementor is one of the best ways to boost product discovery and improve user experience on your WooCommerce store. With Elementor Pro, you can dynamically display related products on single product pages without using custom code.

This guide walks you through the step-by-step process to display related products slot deposit pulsa dynamically using Elementor Pro’s powerful features.

Why Show Related Products in Elementor?

Displaying related products helps:

• Encourage cross-selling
• Keep users engaged longer
• Increase your average order value

When using Elementor Pro, you can fully customize how related products appear using the Theme Builder and WooCommerce widgets.

How to Display Related Products in Elementor (Step-by-Step)

Step 1: Make Sure WooCommerce is Set Up Properly

WooCommerce automatically generates related products based on:

• Shared product categories
• Common tags

You don’t need to configure anything special unless you want custom control.

Step 2: Create or Edit a Single Product Template in Elementor

1. Navigate to Elementor → Theme Builder
   
2. Click Add New → Single Product
   
3. Choose a pre-built layout or start from scratch

This template controls how each product page looks — including where the related products in Elementor will be shown.

Step 3: Add the Products Widget

1. In the Elementor editor, search for “Products” widget (from the WooCommerce section)
2. Drag and drop it where you want related products to appear — usually below the product content or description

Step 4: Configure the Query to Show Related Products

In the widget’s settings:

• Go to the Query section
• Under Source, select Related Products
  
• Set how many products to display (e.g., 3 or 4)
• Adjust the Columns and layout to match your design

This ensures you’re dynamically showing related products in Elementor without hardcoding them.

Step 5: Style the Related Product Section

Use Elementor’s design features to style:

• Product images and aspect ratios
• Title font and color
• Add-to-cart button style
• Hover effects and spacing

Make sure the related products section looks consistent with your brand.

Step 6: Set Display Conditions and Publish

1. Click Publish
   
2. Set the display condition to “All Products”
   
3. Save and preview a product page to confirm related products appear as expected

Pro Tips

• For manual control, use WooCommerce’s Upsells and display them via the “Upsell” option instead of automatically generated related products.
• You can add headings like “You May Also Like” or “Customers Also Bought” above the product widget for better UX.

Special Features of Displaying Related Products in Elementor Pro Dynamically

1. Dynamic Query Control

• Use the “Products” widget to automatically pull related products based on categories and tags — no manual setup needed.

2. Fully Customizable Design

• Elementor Pro lets you style every part of the related products section: layout, colors, typography, spacing, hover effects, and more.

3. Responsive Display

• Easily configure the number of products and columns for desktop, tablet, and mobile views.

4. No Coding Required

• Add related products dynamically without touching a line of code — perfect for non-developers.

5. Theme Builder Integration

• Integrate the related products section directly into your Single Product Template using Elementor’s Theme Builder for global consistency.

6. Boosts Upselling Opportunities

• Automatically showing similar or complementary products helps increase average order value and customer engagement.

7. Conditional Display Rules

• Use Elementor’s Display Conditions to control where and when related products appear — for example, only on specific product categories.

8. WooCommerce Compatibility

• Fully integrated with WooCommerce, pulling real product data dynamically using native WooCommerce logic.

Final Thoughts

Using Elementor Pro, you can easily display related products in Elementor on your WooCommerce store with complete design flexibility. The Products widget, combined with dynamic queries, allows you to automatically show suggestions tailored to each product — all without touching a single line of code.

By integrating related products dynamically, you enhance product visibility and encourage customers to explore more items, increasing your store’s revenue potential.

Related Products vs Upsells vs Cross-Sells: Key Differences

Method 1: Using the Native Elementor Related Products Widget

The simplest approach uses Elementor Pro’s dedicated WooCommerce widget:

1. In Templates → Theme Builder → Single Product, scroll to the bottom of the canvas.
2. Drag the Related Products widget into a new full-width container.
3. Under Content → Related Products, configure:
   • Products Per Page: 4 (Desktop) / 2 (Tablet) / 1 or 2 (Mobile).
   • Columns: 4 Columns.
   • Order By: Popularity, Date, or Random.

Method 2: Building a Custom Loop Grid with Custom Queries

For advanced visual control, use the Loop Grid widget:

• Set Query Source to Current Query / Related Products.
• Design bespoke card templates featuring discount percentages, quick view popups, and instant swatch previews.
• Add horizontal swipe carousels for mobile shoppers using Elementor’s native carousel slider controls.

Need custom WooCommerce design, dynamic product recommendations, or custom plugin development? Discover our WooCommerce development services at CV World.

Frequently Asked Questions