Back to contents

Product Gallery Grid layout. How to showcase product images within the grid layout

information-iconFrom this tutorial you will learn how to display product images gallery within the grid layout using JetProductGallery Gallery Grid widget.

JetProductGallery plugin provides some widgets for showing product images in the form of a convenient gallery. You will be able to demonstrate WooCommerce products from all sides and let visitors decide upon their purchases. Organize the gallery with product images within the grid layout for a better presentation of the product.

Displaying product images within the grid layout

Step 1 – Beforehand, make sure there are images in the Product Gallery block on the appropriate product page.

product-gallery-block

Step 2 – Then, in the WP dashboard navigate to WooCommerce > JetWoo Templates block and create a new Single Product page template clicking Add New Template option.

woocommerce-jetwoo-single-product-template

Step 3 – When you have filled all necessary fields in the appeared popup window, such as This template for and Template Name, you need to push the Create Template button below to proceed to Elementor editor.

single-product-template

Step 4 – You can customize the product template setting a page structure and enriching the content with varied widgets, which are available in the Elements block. There are a lot of JetWooBuilder Single Product widgets for displaying information about the product.

jetwoobuilder-single-product-widgets

Step 5 – To display the product gallery with grid layout you need to scroll to JetProductGallery section in the Elements list and drag the Gallery Grid widget to a certain section on the page.

jetproductgallery-widgets

Step 6 – After that, you can see the settings window of the Gallery Grid widget on the left. Here in the Content > General section, you need to enable gallery function.

Gallery Grid widget Elementor settings

Step 7 – Now go to Gallery section and adjust needed settings. You can enable showing caption, zoom, arrows in the product gallery.

gallery-settings

Step 8 – When you have finished customizing the product gallery, click the Publish button in the bottom panel and view the product images within the grid layout on the page.

publish-button

Step 9 – Navigate to the Shop page and click on any Product to open a Single Product page, we’ve set on previous steps.
WooCommerce Shop layout

You will see Product images in the form of Gallery Grid.
JetProductGallery Single page layout

Excellent! Hope, this tutorial was useful for you by creating product images within the grid layout in the JetWooBuilder Single Product template.