The Product Gallery Images block allows you to seamlessly insert your WooCommerce product gallery images into Single Product templates. It renders the product’s full image gallery — including main image and thumbnails — and gives you controls to style the zoom button, image borders, and thumbnail borders to match your design.
This block is designed exclusively for use inside Single Product templates. Before getting started, make sure you have WooCommerce installed and have published products with gallery images assigned.
Adding the Product Gallery Images Block to Your Pages
Follow these steps to add a Product Gallery Images block to your SeedProd Single Product template:
Step 1: Add the Block
Under WooCommerce Template Tags, drag and drop the Product Gallery Images block into the desired section of your Single Product template.
Step 2: Configure Content Settings
Once added, click on the Product Gallery Images block to open its settings. In the Content tab, you will find the following options.
Zoom Button:
- Position Top: Set the vertical position of the zoom button relative to the top of the product image (in pixels).
- Position Right: Set the horizontal position of the zoom button relative to the right edge of the product image (in pixels).
- Font Size: Set the size of the zoom icon.
- Icon Color: Set the color of the zoom icon.
- Background Color: Set the background color of the zoom button.
- Border Radius: Adjust the corner roundness of the zoom button using a slider.
Image Border:
- Image Border Radius: Set the corner roundness of the main product image.
- Image Border Width: Set the border thickness on each side of the main product image.
Thumbnails Border:
- Thumbnails Border Radius: Set the corner roundness of the thumbnail images below the main product image.
- Thumbnails Border Width: Set the border thickness on each side of the thumbnail images.
Step 3: Customize the Design
In the Advanced tab, you can further customize the appearance of your Product Gallery Images block.
Border:
- Border Style: Set the border style of the block wrapper — Solid, Dotted, or Dashed.
- Border Color: Set the color of the block wrapper border.
- Border Width: Set the border thickness on each side of the block wrapper.
- Border Radius: Set the corner roundness of the block wrapper.
Spacing:
- Margin: Set the outer spacing around the block on all four sides, with independent controls for desktop, tablet, and mobile.
- Padding: Set the inner spacing inside the block wrapper on all four sides, with per-device controls.
Attributes:
- Custom Class: Add one or more custom CSS classes to the block wrapper for targeted styling.
- CSS ID: SeedProd automatically generates a unique CSS ID for this block. You can use it to reference the block in custom CSS or JavaScript.
- Custom Attributes: Add custom HTML attributes to the block wrapper element. Enter each attribute on a new line using the key|value format.
Device Visibility:
- Hide on Desktop: Toggle to hide the block when viewed on desktop screens.
- Hide on Tablet: Toggle to hide the block when viewed on tablet screens.
- Hide on Mobile: Toggle to hide the block when viewed on mobile screens.
Animation Effects:
- Scrolling Effect: Apply a scroll-triggered animation to the block, including Vertical Scroll and Horizontal Scroll options with direction, speed, and viewport offset controls.
- Mouse Effect: Apply a mouse movement-driven parallax effect to the block.
Step 4: Save Your Changes
Once you have finished configuring the Product Gallery Images block and customizing its appearance, make sure to save your work.
You’ve successfully added a Product Gallery Images block to your Single Product template! With controls for zoom button positioning, image border styling, and thumbnail border presentation, you can build a polished product gallery that gives customers a thorough and visually appealing view of everything you sell.