Cross-selling is key to increasing Average Order Value. The standard “Related Products” widget is often unstylable. A custom carousel gives you full design control.
To solve this, use Div Render Container Slider for Elementor.
Step 1: The Loop
You need a way to output dynamic products.
1. Create a “Loop Item” template in Elementor Theme Builder (design your single product card).
2. On your Single Product page, add a Container.
3. Inside, add the Loop Grid widget (Elementor Pro).
4. Configure the query to show “Related Products”.
Step 2: The Slider Conversion
Normally, Loop Grid has its own pagination. But for a true touch-slider experience using this plugin:
Alternative Method (Better for this plugin):
If the plugin supports sliding the Loop Grid directly, enable it on the parent container.
Note: Often, it is cleaner to use the “Posts” widget or build a query loop manually if you want deep integration with the plugin’s “Coverflow” or 3D effects.
If using standard containers: Create a query loop that outputs child containers for each product.
Step 3: Settings
Enable Slider Mode on the wrapper.
Set Slides Per View to 4 (Desktop) and 2 (Mobile).
Enable Autoplay to suggest items passively.
Pro Tips for Cross-Sells
- Add to Cart: Ensure your product card template includes an AJAX “Add to Cart” button for frictionless shopping.