The Product Gallery (Beta) 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
↑ Back to top
It is composed of two main inner blocks:
- Thumbnails Block – Displays a set of product image previews.
- Large Image Block – Showcases the currently selected image or media in a larger view.
Block Settings
↑ Back to top
- 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
↑ Back to topThumbnails
↑ Back to top
The Thumbnails block displays all associated images for a product in a scrollable or grid-like layout. You can configure the block with below 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.).
Large Image Block
↑ Back to topThe Large Image block displays the currently selected or default product image. It automatically updates when a user clicks a thumbnail from the gallery.
The Large Image Block has 3 inner blocks:
- Product Image
- 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
You can customize the “on-sale badge” further using the filer 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
↑ Back to topDo 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.
If you weren’t able to find the information you need, please use the feedback thumbs below to let us know.