Learn how to display a product image gallery within the grid layout using the JetProductGallery Gallery Grid widget on your WordPress website.
Before you start, check the tutorial requirements:
- Elementor (Free version)
- WooCommerce plugin installed and activated
- JetProductTables plugin installed and activated
- JetWooBuilder plugin installed and activated with Single Product Page created
The JetProductGallery plugin offers several widgets for displaying product images in a convenient gallery format. You will be able to showcase WooCommerce products from all angles, allowing visitors to make informed purchasing decisions.
Before proceeding, navigate to the WordPress Dashboard > Products tab, where you can edit or create products. Ensure that images are added in the ProductGallery block on the corresponding product editing page.
Open the Single Product Page template in the Elementor editor.
To display the product gallery with a grid layout, drag the Gallery Grid widget to a certain section on the page.
In the widget settings, select the “WooCommerce Products” option in the Source dropdown.
Afterward, you can turn on the Enable Gallery option, which activates the Gallery settings tab.
Proceed to the Images tab and adjust the Image Size and Grid Columns as needed.
The Primary Gallery Image, when enabled, displays the first image in the gallery as the main featured image (larger).
Additionally, you can set the Grid Items Count; if its number is less than the number of images in the gallery, the Overlay Text will appear, which can also be customized.
The Gallery tab contains settings for adjusting a swipe to proceed to the next picture in the gallery:
- Trigger Type — set the trigger for the photo swipe. If “Image” is selected, the trigger will be a click on an image from the gallery. If “Button” is selected, it activates such settings:
- Button Icon — you can choose an icon from the Media Library or upload it;
- Position — adjust the button position here;
- Show on Hover — enable to display of the button on hover.
The Controls are available for both trigger types.
When you’re done, click on the “Publish” button.
That’s all. Now you know how to display a product image gallery within the grid layout using the JetProductGallery Gallery Grid widget on the Single Product Page of your WordPress website.
