The Product Images element allows you to change how Product Images are displayed on the Single Product template. The Product Images element must be placed within a Product Builder element.
Along with the controls below, it is possible to use WooCommerce hooks to further customize the Product Images. For example, using the woocommerce_get_image_size_gallery_thumbnail hook may be used to change the quality of the thumbnail images (reference).
Design Controls
Size
The controls in this section let you define the dimensions of your product images, ensuring they fit seamlessly within your design layout.
- Width – Adjust the width of your product image for a perfect fit.
Sale Badge
Customize the appearance and positioning of the sale badge on your product images to make them stand out and grab attention.
- Disable – Turn the sale badge on or off as per your preference.
- Position – Choose where on the image you’d like to display the sale badge.
- Background – Pick a color for the badge background to match your site’s theme.
- Typography – Define the font style and properties of the text within the badge.
- Borders – Design the badge’s borders to give it a distinct look. This includes:
- Radius – Round the badge corners for a softer appearance.
- Styling – Choose the type, color, and width of the badge border.
- Shadow – Add a shadow effect to make the badge pop out.
- Padding – Adjust the space within the badge for a balanced look.
- Nudge – Fine-tune the badge’s position by nudging it horizontally (X) or vertically (Y).
Zoom Icon
Manage the settings of the zoom icon, which allows viewers to magnify product images, enhancing user experience.
- Disable – Toggle the zoom icon on or off based on your design choice.
- Position – Decide the location of the zoom icon on the product image.
- Background – Select a background color for the zoom icon for better visibility.
- Icon – Define the color of the zoom symbol itself.
- Icon Size – Set the size of the zoom symbol to ensure it’s easily noticeable.
- Padding – Alter the space around the zoom icon for a clear and isolated appearance.
- Borders – Customize the edges of the zoom icon. This encompasses:
- Radius – Round the corners of the zoom icon for aesthetic appeal.
- Styling – Opt for the desired border type, color, and width around the zoom icon.
- Shadow – Introduce a shadow to make the zoom icon more pronounced.
- Nudge – Adjust the zoom icon’s exact placement using the horizontal (X) and vertical (Y) nudging controls.
Image
These controls allow you to modify the borders of your product images, enriching their presentation and alignment with your overall design.
- Borders – Personalize the edges of your product image. This section lets you:
- Radius – Curve the image corners for a modern, sleek look.
- Styling – Decide on the type, color, and thickness of the image border.
- Shadow – Give depth to your image by adding a shadow.
Thumbnails
Enhance the display and behavior of image thumbnails, offering users a preview of different product angles or variations.
- Per Row – Determine the number of thumbnails to be shown in a single row.
- Transition Duration – Set the time it takes for a thumbnail to fully display upon hovering or clicking.
- Border Radius – Curve the corners of the thumbnails for stylistic preference.
- Border Color – Choose a color for the thumbnail borders that matches your theme.
- Border Width – Adjust the thickness of the thumbnail borders.
- Opacity – Control the transparency level of the thumbnails for a more subdued or pronounced look.
- Hover – Customize the appearance of thumbnails when they’re hovered over:
- Border Color – Modify the border color for a highlighted effect on hover.
- Opacity – Adjust the transparency of the thumbnail on hover for a dynamic effect.
- Active – Personalize the appearance of the currently selected or clicked thumbnail:
- Border Color – Alter the border color to signify the active state.
- Opacity – Manage the transparency level of the active thumbnail.
Spacing
Control the space around and between your product images and thumbnails, ensuring a neat and organized display.
- Between Images – Manage the gap between multiple product images for clarity and separation.
- Container – Adjust the space around the entire image container:
- Margin Top – Increase or decrease the space above the image container.
- Margin Bottom – Modify the space below the image container.
