WooCommerce Single: Product Gallery

Creating a captivating product gallery is an essential part of any e-commerce website. With the JupiterX WordPress theme and the Elementor page builder, you can easily design a professional and interactive product gallery. Our dedicated "Product Gallery" widget is built to enhance the presentation of your products with various layout options.

Accessing the Product Gallery Widget

1. Upon opening your single product template in Elementor, decide where you want your product gallery to appear.
2. Click on the '+' icon to add a new section or select an existing section tailored for the gallery.
3. From the Elementor widgets panel, drag the "Product Gallery" widget into the chosen section.

Customizing the Content Tab

Gallery Layout Options

• Standard (Slider):
  • Thumbnails Orientation: Choose 'Horizontal' or 'Vertical' (left or right) placement.
  • Lightbox: Enable this for a full-screen overlay view of the images.
  • Zoom: Activate zoom-in on hover.
  • Carousel: Set this to 'Yes' for a rotating carousel display format.
• Stacked:
  • Columns: Decide the number of columns for your stacked layout images.
  • Exclude Featured Image: Exclude the main image from the stacked display if needed.
  • Adjust the same Lightbox and Zoom settings as above.

Customizing the Standard Layout

• Main Product Image:
  • Image Resolution: Select your preferred image quality.
  • Border Type: Choose from various border styles.
  • Border Radius: Specify the rounded corners for your images.
  • Spacing: Adjust the spacing between the main image and other elements.
• Thumbnails:
  • Spacing: Set the gap between each thumbnail image.
  • Image Resolution: Decide on the size of the thumbnails.
  • Thumbnails Per Row: Determine how many thumbnails to show in each row.
  • Thumbnail Height: Adjust the height to your preference.
  • Border Type and Radius: Similar to the main image settings.
  • Opacity: Manage the transparency of your thumbnails.

Customizing the Stacked Layout

• Product Image:
  • Spacing: Determine the gap between the main image and other elements.
  • Image Resolution: Choose the quality for the images.
  • Enable Aspect Ratio: Keep consistent dimensions for all product images.
  • Aspect Ratio: Set your desired width-to-height ratio if aspect ratio is enabled.
  • Border Type: Select the border style for the images.
  • Border Radius: Customize the corner roundness.
  • Box Shadow: Add a shadow effect and personalize it.

Finalizing Your Product Gallery

After customizing the main settings, preview your gallery to ensure it matches your store’s aesthetics and provides a seamless user experience. Adjust any elements if necessary, and when you're happy with it, click 'Publish' to make your professionally tailored product gallery live on your website.