Skip to content

Woo Product Gallery

The Woo Product Gallery module displays a WooCommerce product's gallery images in either a slider carousel or a four-column grid layout on custom single product page templates.

Quick Reference

What it does: Renders the product gallery images in a slider or grid format, with optional pagination, titles, and captions. When to use it: Custom single product page templates built in the Divi Theme Builder Key settings: Product, Layout (Slider/Grid), Show Pagination, Show Title and Caption Block identifier: divi/wc-gallery ET Docs: Official documentation

When to Use This Module

  • Building a custom product page that needs a gallery separate from the main product image
  • Displaying product photos in a browsable slider format for detailed product exploration
  • Showing product images in a grid layout with titles and captions for editorial-style product pages

When NOT to Use This Module

  • For the primary product featured image — use Woo Product Images
  • For non-WooCommerce image galleries — use Gallery
  • For a single standalone image — use Image

Overview

The Woo Product Gallery module provides a dedicated way to showcase all gallery images assigned to a WooCommerce product. Unlike the Woo Product Images module, which focuses on the featured image with thumbnail navigation, this module presents the gallery images as a standalone visual element that can be styled and positioned independently within your product page layout.

The module offers two layout modes: Slider and Grid. In Slider mode, gallery images display in a horizontal carousel that customers can swipe or click through. In Grid mode, images are arranged in a four-column grid layout with optional pagination for products that have many gallery images. The Grid layout also supports displaying each image's title and caption text, which is useful for products where individual images need descriptive labels — such as product detail shots, different angles, or lifestyle imagery.

Each layout mode has its own set of conditional settings. Pagination controls and title/caption toggles only appear when Grid layout is selected, while the Slider mode provides a streamlined browsing experience without additional text overlays.

For additional reference, see the official Elegant Themes documentation.

WooCommerce Required

This module requires WooCommerce to be installed and activated on your WordPress site. Gallery images must be added to the product in the WooCommerce product editor for this module to display content.

Use Cases

  1. Product Detail Showcase — Place the gallery module below the main product information in a full-width row to give customers a dedicated image browsing area. Use the Slider layout for a focused, one-image-at-a-time viewing experience ideal for high-detail product photography.
  2. Grid Gallery with Descriptions — Use the Grid layout with titles and captions enabled for products where each image tells part of the story — such as furniture with detail shots of materials, craftsmanship, and scale reference images.
  3. Supplementary Image Section — Position the gallery module in a secondary section below the product description to provide additional visual context without cluttering the primary purchase area above the fold.
  1. Navigate to Divi > Theme Builder and create or edit a template assigned to WooCommerce product pages.
  2. Open the Visual Builder on the product template.
  3. Click the gray + icon to add a new module to a row.
  4. Search for "Woo Product Gallery" in the module picker, then click to insert it.

For an animated walkthrough of adding and configuring this module, see the official Elegant Themes documentation.

Settings & Options

The Woo Product Gallery module settings are organized across three tabs: Content, Design, and Advanced.

Content Tab

The Content tab controls which product's gallery images are displayed and which elements are visible in the gallery.

Setting Type Description
Product product selector Choose which published WooCommerce product's gallery images to display. In Theme Builder templates, this defaults to the current product dynamically.
Show Pagination toggle Display or hide pagination controls below the grid. Only available when the Layout is set to Grid. Useful for products with many gallery images.
Show Title and Caption toggle Display or hide the image title and caption text below each gallery image. Only available when the Layout is set to Grid.
Background background controls Set a background color, gradient, image, or video behind the gallery module container.
Order select Set the flexbox order of the module relative to sibling elements in the same row.
Meta admin label Assign an admin label and control module visibility inside the Visual Builder.

Design Tab

The Design tab controls the gallery layout mode, image styling, and all text elements within the gallery.

Module-specific settings:

Setting Type Description
Layout select Choose between Slider (carousel browsing) or Grid (four-column layout) display format for gallery images.
Image image styling Apply design effects to individual gallery images, including border, shadow, and spacing.
Title Text text styling Customize the font, size, color, weight, and letter spacing of image titles. Only active when Grid layout and Show Title and Caption are enabled.
Caption Text text styling Style the caption text displayed below each gallery image. Only active when Grid layout and Show Title and Caption are enabled.
Pagination Text text styling Customize the appearance of pagination controls. Only active when Grid layout and Show Pagination are enabled.

Shared design options — see Options Groups for detailed documentation:

Options Group Description
Text Font, weight, alignment, color, line height, text shadow
Sizing Width, max-width, height, min-height
Spacing Margin and padding (responsive)
Border Width, color, style, radius
Box Shadow Shadow effects
Filters CSS filters (brightness, contrast, hue, saturation, blending)
Transform Scale, translate, rotate, skew
Animation Entrance animation styles

Advanced Tab

The Advanced tab provides developer-oriented controls for custom attributes, conditional display, and scroll-driven effects.

Shared advanced options — see Options Groups for detailed documentation:

Options Group Description
Attributes CSS ID, classes, custom HTML attributes
CSS Custom CSS per element target
HTML Choose the semantic HTML tag for the module wrapper
Conditions Display rules (user role, page type, date, logic)
Interactions Hover, click, or scroll-triggered interactions
Visibility Device visibility toggles
Transitions Hover transition timing
Position CSS position and offsets
Scroll Effects Scroll-driven animation effects

Code Examples

Custom CSS

/* Style the gallery container */
.et_pb_wc_gallery {
    padding: 20px 0;
}

/* Style gallery images in grid layout */
.et_pb_wc_gallery .woocommerce-product-gallery__image img {
    border-radius: 8px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.et_pb_wc_gallery .woocommerce-product-gallery__image img:hover {
    transform: scale(1.03);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

/* Style image titles */
.et_pb_wc_gallery .wp-caption-text {
    font-size: 14px;
    color: #555;
    text-align: center;
    margin-top: 8px;
}

/* Style pagination controls */
.et_pb_wc_gallery .woocommerce-pagination {
    margin-top: 20px;
    text-align: center;
}

.et_pb_wc_gallery .woocommerce-pagination a {
    padding: 8px 14px;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #333;
    margin: 0 4px;
}

.et_pb_wc_gallery .woocommerce-pagination a:hover {
    background: #2ea3f2;
    color: #fff;
    border-color: #2ea3f2;
}

/* Responsive: stack grid to 2 columns on tablet */
@media (max-width: 980px) {
    .et_pb_wc_gallery .products {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Responsive: single column on mobile */
@media (max-width: 480px) {
    .et_pb_wc_gallery .products {
        grid-template-columns: 1fr;
    }
}

PHP Hooks

/* Filter the Woo Product Gallery module output */
add_filter('et_module_shortcode_output', function($output, $render_slug) {
    if ('et_pb_wc_gallery' !== $render_slug) {
        return $output;
    }
    // Modify $output as needed
    return $output;
}, 10, 2);

/* Filter the number of gallery columns */
add_filter('woocommerce_product_thumbnails_columns', function($columns) {
    return 3; // Change grid to 3 columns
});

Common Patterns

  1. Two-Column Product Layout — Place the Woo Product Gallery in the left column of a two-column row using Slider layout, and stack the product title, price, description, and add-to-cart modules in the right column. This creates a classic e-commerce product page with a prominent image carousel.

  2. Below-the-Fold Image Gallery — Use the Grid layout with titles and captions enabled in a full-width section below the main product information. This works well for products that benefit from detailed visual documentation, such as handmade goods or technical products.

  3. Minimal Slider Gallery — Use the Slider layout without any additional text elements for a clean, image-focused browsing experience. Apply subtle border-radius and box-shadow to the images for a modern card-like presentation.

AI Interaction Notes

Create vs. Modify

Modifying existing module content via REST API (wp.apiFetch PATCH) updates settings attributes. Creating new modules via REST API produces content that renders on the front end but may not appear in the Visual Builder layer view. Use browser automation for reliable module creation. See REST API Content Playbook.

Block identifier: divi/wc-gallery — Needs Testing

Operation Method Status Notes
Read content Parse post_content block JSON Needs Testing Use brace-depth parser — see Content Encoding
Modify existing wp.apiFetch PATCH on post endpoint Needs Testing Update block attributes in post_content
Create new Browser automation (Playwright) Needs Testing REST creation may break VB visibility
Batch modify Sequential REST requests Needs Testing See REST API Content Playbook

Module Selection Guidance

For a product image gallery use Woo Product Gallery; for the main product featured image with thumbnail strip use Woo Product Images; for non-WooCommerce image galleries use Gallery.

Saving Your Work

After configuring the product gallery module:

  • Save changes — Click the purple Save button at the bottom of the Visual Builder, or press Ctrl+S (Windows) / Cmd+S (Mac).
  • Exit the builder — Click the X button or use Ctrl+Shift+E to return to the WordPress dashboard.

Version Notes

Divi 5 Only

This page documents Divi 5 behavior exclusively.

WooCommerce Required

This module requires the WooCommerce plugin to be installed and active. Products must have gallery images added through the WooCommerce product editor (Product Gallery section) for this module to display content.

Troubleshooting

Module Not Rendering

If the Woo Product Gallery module does not appear on the front end, verify that:

  • WooCommerce is installed and activated
  • The module is placed on a product page template (not a regular page)
  • A valid, published product is assigned to the module
  • The product has gallery images uploaded in the Product Gallery section of the product editor

No Images Displaying

If the module renders but shows no images, check that:

  • The assigned product has images added to its Product Gallery (not just a featured image)
  • Gallery images are properly uploaded to the WordPress media library
  • Image files have not been deleted or moved from the server

Grid Pagination Not Appearing

Pagination controls only display when the Layout is set to Grid and the Show Pagination toggle is enabled. Additionally, pagination only renders when the number of gallery images exceeds what fits in the initial grid view.