Product Images
Product Images is the existing WooCommerce gallery element used inside Product Builder. This reference covers its controls in existing layouts. WooCommerce must be installed and active.
Add and configure Product Images
- Click Add, choose Product Images, and place it in the container.
- Select the existing Product Images element inside Product Builder.
- Review Design > Size, Sale Badge, Zoom Icon, Image, and Thumbnails.
- Set Spacing and inspect the gallery with the current product's images.
- Save your changes.
Keep the required parent context
Product Images must be inside Product Builder, Fundamental Product Builder. Layout containers can sit between the parent and this element. Configure the product or checkout context on the parent.
This element has no children; use its own controls.
Content and front-end behavior
For new agent-built product layouts, the current WooCommerce guidance uses Swiper with the product-gallery dynamic field and zoom. Keep the gallery tied to each product; hardcoded slides would repeat the same images across products.
Controls
Responsive varies by breakpoint; Hover has a hover value; Shared applies across both. Linked controls have their own reference. In conditions, = means “is” and ≠ means “is not.”
Design > Size
| Setting | Purpose and options | Behavior |
|---|---|---|
| Width | Width. | Responsive |
Design > Sale Badge
| Setting | Purpose and options | Behavior |
|---|---|---|
| Disable | On/off. | Shared |
| Position | Top Left, Top Right. | Responsive |
| Background | Color or supported fill. | Shared |
| Typography | typography controls. | See linked controls |
| Borders | borders controls. | See linked controls |
| Padding | spacing controls. | See linked controls |
| Nudge > X | X and unit. | Responsive |
| Nudge > Y | Y and unit. | Responsive |
Design > Zoom Icon
| Setting | Purpose and options | Behavior |
|---|---|---|
| Disable | On/off. | Shared |
| Position | Top Left, Top Right. | Responsive |
| Background | Color or supported fill. | Hover |
| Icon | Color or supported fill. | Hover |
| Icon Size | Icon size and unit. | Shared |
| Padding | Padding. | Shared |
| Borders | borders controls. | See linked controls |
| Nudge > X | X and unit. | Responsive |
| Nudge > Y | Y and unit. | Responsive |
Design > Image
| Setting | Purpose and options | Behavior |
|---|---|---|
| Borders | borders controls. | See linked controls |
Design > Thumbnails
| Setting | Purpose and options | Behavior |
|---|---|---|
| Per Row | 2, 3, 4, 5, 6. | Shared |
| Transition Duration | Transition duration. | Shared |
| Border Radius | Border radius and unit. | Shared |
| Border Color | Color or supported fill. | Shared |
| Border Width | Border width and unit. | Shared |
| Opacity | Set opacity. Range: 0–1. | Shared |
| Hover > Border Color | Color or supported fill. | Shared |
| Hover > Opacity | Set opacity. Range: 0–1. | Shared |
| Active > Border Color | Color or supported fill. | Shared |
| Active > Opacity | Set opacity. Range: 0–1. | Shared |
Design > Spacing
| Setting | Purpose and options | Behavior |
|---|---|---|
| Between Images | Between images and unit. | Responsive |
| Container | spacing controls. | See linked controls |
Troubleshooting
The gallery is empty
Check the product's main image, gallery images, and Product Builder context.
A new custom gallery is needed
Use a Swiper bound to the current product gallery, following the product-page workflow, rather than building a static set of slides in the product template.