The WooCommerce Product Gallery Block creates an interactive image gallery for WooCommerce products with advanced layout options, lightbox functionality, and thumbnail navigation. This DigiBlocks WooCommerce category block automatically pulls product images from WooCommerce and presents them in a fully customizable gallery format with hover effects, shadow styling, and responsive design.
This block is perfect for creating custom single product templates using the Site Builder feature from our DigiFusion theme and its Pro version, giving you complete control over how product galleries appear throughout your WooCommerce store.
Adding the Product Gallery Block
Navigate to any post, page, or custom template where you want to display WooCommerce product galleries. Click the block inserter (+) and search for “Product Gallery” in the DigiBlocks WooCommerce category. The block will be added with placeholder images that demonstrate how the actual product gallery will appear on single product pages.
Layout Configuration
Thumbnail Positioning
Control where thumbnail images appear relative to the main image using the Thumbnail Position toggle group:
Bottom – Places thumbnails below the main image in a horizontal grid layout
Left – Positions thumbnails vertically to the left of the main image
Right – Displays thumbnails vertically to the right of the main image
Thumbnail Columns
When thumbnails are positioned at the bottom, control the number of columns using responsive thumbnail column controls:
Desktop Columns – Set 1-8 columns for desktop displays
Tablet Columns – Configure column count for tablet devices
Mobile Columns – Define columns for mobile screens
Note: Left and right positioned thumbnails automatically display in a single column with vertical scrolling when needed.
Lightbox Functionality
Enable Lightbox – Toggle lightbox functionality that allows users to view full-size images in an overlay modal when clicking the main image. When enabled, a zoom icon appears on hover to indicate the lightbox functionality.
Image Settings
Main Image Size
Select the image size for the primary product image display:
Thumbnail – WordPress thumbnail size
Medium – WordPress medium size
Large – WordPress large size
Full – Full resolution image
WooCommerce Single – WooCommerce single product image size
WooCommerce Thumbnail – WooCommerce thumbnail size
WooCommerce Gallery Thumbnail – WooCommerce gallery thumbnail size
Thumbnail Size
Choose the image size for thumbnail displays using the same size options as the main image. Typically set to WooCommerce Gallery Thumbnail or Thumbnail for optimal performance.
Spacing Controls
Gallery Spacing
Control the gap between the main image and thumbnail container using responsive spacing controls:
Desktop Spacing – Set 0-80px gap for desktop displays
Tablet Spacing – Configure spacing for tablet devices
Mobile Spacing – Define spacing for mobile screens
Thumbnail Spacing
Adjust the gap between individual thumbnail images:
Desktop Spacing – Set 0-40px gap between thumbnails
Tablet Spacing – Configure thumbnail spacing for tablets
Mobile Spacing – Define thumbnail spacing for mobile
Container Spacing
Padding – Control internal spacing within the gallery container
Top Padding – Space above gallery content
Right Padding – Space to the right of gallery content
Bottom Padding – Space below gallery content
Left Padding – Space to the left of gallery content
Margin – Set external spacing around the entire gallery block
Top Margin – Space above the gallery block
Right Margin – Space to the right of the gallery block
Bottom Margin – Space below the gallery block
Left Margin – Space to the left of the gallery block
Visual Styling
Border Radius
Create rounded corners for gallery elements:
Main Image Border Radius – Round the corners of the main product image with responsive controls supporting pixel and percentage units
Thumbnail Border Radius – Apply corner rounding to thumbnail images independently from the main image
Shadow Effects
Add depth and visual interest with comprehensive shadow controls:
Main Image Shadow – Configure drop shadow for the main image including:
- Horizontal offset positioning
- Vertical offset positioning
- Blur radius amount
- Spread radius size
- Shadow color with transparency
- Separate hover state shadow effects
Thumbnail Shadow – Independent shadow controls for thumbnail images with the same comprehensive options as main image shadows, including distinct hover effects.
Both shadow systems support normal and hover states, allowing thumbnails to become more prominent when users interact with them.
Interactive Features
Thumbnail Navigation
Clicking thumbnail images updates the main image display, providing intuitive gallery navigation. Active thumbnails display at full opacity while inactive thumbnails appear at 50% opacity for clear visual hierarchy.
Hover Effects
Main Image Hover – Subtle scale transformation and shadow changes on hover provide visual feedback and enhance the interactive experience.
Thumbnail Hover – Thumbnails transition to full opacity and enhanced shadows when hovered, indicating their interactive nature.
Lightbox Integration
When lightbox functionality is enabled, clicking the main image opens a full-screen overlay displaying the high-resolution product image. A zoom icon appears in the top-right corner of the main image on hover to indicate this functionality.
Advanced Features
Animation Effects
Add engaging entrance animations to the gallery:
Animation Selection – Choose from fade, slide, zoom, bounce, and other animation effects
Preview Functionality – Test animations directly in the editor with the Preview Animation button
Animation Timing – Animations trigger when users scroll the block into view
Responsive Behavior
The gallery adapts intelligently across different screen sizes:
Desktop and Tablet – Maintains the selected thumbnail position and column configuration
Mobile Devices – Automatically switches to bottom thumbnail positioning regardless of the desktop setting for optimal mobile usability
All spacing, sizing, and layout elements include device-specific controls for precise responsive design.
Responsive Visibility
Control block visibility across different devices:
Hide on Desktop – Conceals the gallery on desktop screens (992px and above)
Hide on Tablet – Hides the block on tablet devices (768px to 991px)
Hide on Mobile – Removes the block from mobile displays (767px and below)
Hidden elements appear with reduced opacity in the editor for easy identification while remaining completely hidden on the frontend.
Additional Options
HTML Anchor – Create a unique anchor link for direct navigation to the gallery
Additional CSS Classes – Add custom CSS classes for advanced styling or functionality targeting
Gallery Functionality
The block automatically integrates with WooCommerce product data:
Product Image Detection – Automatically displays all images attached to the current product
Fallback Handling – Shows placeholder content when no product images are available
Variation Support – Updates gallery images when product variations are selected (requires theme integration)
Image Optimization – Respects WordPress image size settings for optimal loading performance
The gallery maintains its styling and functionality whether used in single product templates, product loops, or custom WooCommerce layouts created with the DigiFusion theme’s Site Builder feature.