The default WooCommerce product gallery is rigid. It often doesn’t match your theme’s aesthetic. Building a custom gallery allows you to control the size, position, and interaction of your product images.
To solve this, use Div Render Container Slider for Elementor to build a synced gallery system.
Step 1: The Main Image Slider
On your Single Product Template, create a Container.
Insert an Image Widget set to the “Featured Image” Dynamic Tag.
If you have multiple gallery images, you might need a query loop or manual setup, but for simplicity, let’s assume you populate child containers with the product images using dynamic data.
Enable Slider Mode.
Set Slides Per View to 1.
Set Sync Group ID to product-main.
Set Controller Mode to Controlled.
Step 2: The Thumbnail Slider
Create a second container below the first.
Populate it with the same images but smaller.
Enable Slider Mode.
Set Slides Per View to 4.
Set Sync Group ID to product-main.
Set Controller Mode to Controller.
Pro Tips for Woo Galleries
- Lightbox: Ensure the Image Widget in the main slider has “Link to Media File” enabled and “Lightbox” set to Yes, so users can zoom in.
- Vertical Thumbs: If you want thumbnails on the left, set the Thumbnail Container direction to Vertical (requires advanced CSS or supported settings).