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
- Navigate to Elementor → Theme Builder
- Click Add New → Single Product
- 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
- In the Elementor editor, search for “Products” widget (from the WooCommerce section)
- 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
- Click Publish
- Set the display condition to “All Products”
- 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.
