The Product Gallery block is a flexible and interactive way to showcase product images and media within your store. This block allows customers to view detailed visual representations of your products through a combination of thumbnail images and a larger display image in gallery view.

Block structure #

It is composed of two main inner blocks:

• Thumbnails block – Displays a set of product image previews.
• Viewer block – Container for the current gallery image, navigation buttons, zoom functionality and more.

Block settings #

• Layout Orientation: You can customize how the product gallery is visually arranged using the Orientation settings, which gives you greater control over the gallery’s alignment and how it fits within your page layout.
  • Horizontal or Vertical Layout: Choose between displaying the thumbnails beside or below the large image.
  • Wrapping: Allow thumbnails to wrap onto multiple lines if there are too many to fit in one row or column.
• Media Settings: These settings control how users interact with the media within the gallery.
  • Zoom on Hover: Allows for a closer look at product details, enhancing the browsing experience. When users hover over the large image, it will zoom in by 30%.
  • Open Pop-up on Click: Clicking on the large image opens a modal view. It offers an immersive, detailed browsing experience for customers.

Inner blocks #

Thumbnails #

The Thumbnails block displays all associated images for a product in a scrollable or grid-like layout. You can configure the block with the following options:

• Enable/Disable Thumbnails: Toggle whether thumbnails are shown at all.
• Thumbnail Size: Set the size of the thumbnail images relative to the main product image. If the thumbnail container becomes larger than the main image container, the thumbnails will automatically turn into a scrollable slider for a better experience.
• Aspect Ratio: Choose the aspect ratio for thumbnails (e.g., 1:1 square, 4:3, etc.).

Viewer block #

The Viewer block is a container for the current gallery image, navigation buttons, zoom functionality, and more.

It has 3 inner blocks:

• Product Image: You can specify the aspect ratio for the image in the Product Gallery block, and the gallery will adjust accordingly. This enables more creative and varied layouts on your pages, improving both aesthetics and usability.
• On-Sale Badge: This automatically appears if the product is on sale. You can customize the color, typography, and dimensions from the block settings.
• Next/Previous Buttons: It allows users to navigate through product images. You can customize the color, border radius, size, shadows, and dimensions from the block settings.

Advanced Customization:

You can customize the “on-sale badge” further using the filter woocommerce_sale_badge_text.

If you are unfamiliar working with code and resolving potential conflicts, we recommend you work with a Woo Agency Partner for larger projects, or find a WooCommerce developer on Codeable for smaller customizations. We are unable to provide support for customizations under our Support Policy.

Questions and support #

Do you still have questions and need assistance? 

This documentation is about the free, core WooCommerce plugin, for which support is provided in our community forums on WordPress.org. By searching this forum, you’ll often find that your question has been asked and answered before.

If you haven’t created a WordPress.org account to use the forums, here’s how.

• If you’re looking to extend the core functionality shown here, we recommend reviewing available extensions in the WooCommerce Marketplace.
• Need ongoing advanced support or a customization built for WooCommerce? Hire a Woo Agency Partner.
• Are you a developer building your own WooCommerce integration or extension? Check our Developer Resources.