How to Display WooCommerce Product Images in Elementor
The Product Media widget lets you display WooCommerce product images inside Elementor product templates. This widget is used when building custom WooCommerce single product pages with Elementor.
The widget helps you show the main product image, gallery thumbnails, sale badge, and lightbox controls inside your product layout. You can also customize the look and behavior of product media from the Elementor panel.
This widget is commonly used when designing custom WooCommerce product pages with Elementor Theme Builder.
Part of WooCommerce Elementor Widgets #
The Product Media widget is part of the WooCommerce widget collection available in Spexo Addons. These widgets help you build custom product layouts, shopping experiences, and WooCommerce templates in Elementor.
You can explore the full collection on the WooCommerce Elementor Widgets page.
When to Use the Product Media Widget #
The Product Media widget is used when you want to display the main product image and image gallery inside a custom WooCommerce product template. It is usually placed near the top of the product page layout.
This widget works well with other WooCommerce widgets such as Product Title, Product Price, Product Rating, Product Meta, and Add to Cart.
Requirements #
Before using the Product Media widget, make sure the required plugins and product data are ready. This widget only works inside WooCommerce single product templates.
- WooCommerce plugin installed and activated
- Products created in your WooCommerce store
- Product images or gallery images added in WooCommerce
- Elementor product template created
- Spexo Addons plugin installed and active
This widget works inside Elementor product templates created with the Theme Builder.
How to Add the Product Media Widget #
Follow these steps to add the Product Media widget inside an Elementor product template.
- Open the WooCommerce product template in Elementor.
- Search for the Product Media widget in the Elementor widget panel.
- Drag the widget into your product page layout.
- The widget will automatically display the main product image and gallery from WooCommerce.
After you complete this step, the Product Media widget will appear inside your Elementor WooCommerce product template.
Content Settings #
To configure the Product Media widget, click the Content tab in the Elementor panel.
General #
From the General section, you can enable or disable the sale badge and lightbox. If the sale badge option is enabled, you can also define the sale badge text.
Image Gallery #
The Image Gallery section is divided into Main Image and Gallery Thumbnails. In the Main Image settings, you can control navigation arrows, hover visibility, and navigation icon selection.
In the Gallery Thumbnails settings, you can enable or disable thumbnails for different devices. You can also set the number of thumbnails per row.
Lightbox Popup #
From the Lightbox Popup section, you can control autoplay speed and enable or disable lightbox features. These include the lightbox icon, autoplay, progress bar, counter, arrows, captions, thumbnails, sharing button, zoom button, full screen button, and download button.
If the lightbox icon is enabled, you can also choose the icon style that matches your design.
Style Settings #
To customize the Product Media widget design, click the Style tab in the Elementor panel. You will find styling options for arrows, thumbnails, sale badge, and lightbox icon.
Main Image Arrows #
From this section, you can change arrow color, background color, border color, icon size, box size, horizontal position, and transition duration. You can also style normal and hover states.
Gallery Thumbnails #
From here, you can adjust thumbnail width, horizontal gutter, vertical gutter, and top distance for supported devices.
Sale Badge #
From this section, you can change sale badge color, background color, border color, typography, margin, and padding. You can also add shadow and border styling.
Lightbox Icon #
From here, you can style the lightbox icon by changing color, background color, border color, transition duration, icon size, box size, and margin. You can also add shadow and border styling.
Common Issues and Fixes #
If the product image does not appear in the editor, make sure you are editing a WooCommerce single product template. The widget will not display product media correctly on a normal page.
If gallery images are missing, check that product images and gallery images have been added in WooCommerce for that product.
If the widget does not appear in Elementor, review the Configuring Widgets documentation and confirm that the widget is enabled.
Related WooCommerce Widgets #
The Product Media widget is often used with other WooCommerce widgets to build complete product page layouts in Elementor. These widgets help you create fully customized WooCommerce product templates.
Related Documentation #
You can review these guides to build better WooCommerce and Elementor product templates with Spexo Addons.
Frequently Asked Questions #
Why is the product image not visible in Elementor? #
The Product Media widget only works inside WooCommerce single product templates. It will not show dynamic product images on regular pages.
Can I show product gallery thumbnails? #
Yes. The widget includes gallery thumbnail settings and lets you control the number of thumbnails shown per row.
Can I enable a product image lightbox? #
Yes. You can enable the lightbox option and customize controls such as arrows, captions, sharing, zoom, and full screen mode.
Getting stuck? Feel free to Contact Our Support for further assistance.
Navigation:
