Configuration of WooCommerce Product Gallery & Image Zoom
Configuring Zoom Options on the Product Images
Go to WooCommerce > Product Gallery & Image Zoom > Main Image Option > Zoom Options.
Hide Zoom Icon on Mobile Device: Enable this option to hide the zoom icon when viewed on mobile devices for a better user experience.
Zoom Window Position: Choose the position of the zoom window in relation to the product image. You can select from:
- Right side
- Inside
Show Zoom Icon: Enable this option to display an icon that identifies the zoom feature on the product image.
Zoom Icon Background Color: Select the background color for the zoom icon.
Zoom Icon Background Hover Color: Select the background color for the zoom icon when hovered over by the cursor.
Zoom Icon Color: Choose the color of the zoom icon itself.
Zoom Icon Hover Color: Select the color of the zoom icon when hovered over.
Zoom Icon Size (px): Set the size of the zoom icon in pixels.
Zoom Icon Radius (%): Adjust the border radius to change the shape of the zoom background.
Zoom Icon Position: Choose the position to display the zoom icon relative to the product image. Options include:
- Top left
- Top right
- Bottom left
- Bottom right
Loading Label: Customize the text displayed when the zoom feature is loading.
Blur Main Image: Checkmark this option to blur the main product image when zoomed in for better focus.
After configuring the desired zoom options, don’t forget to click on the “Save Settings” button to apply the changes.
Enabling & Customizing Lightbox on the Product Image
Go to WooCommerce > Product Gallery & Image Zoom > Main Image Option > Lightbox.
Enable Lightbox on Main Product Image: Toggle the switch to enable the lightbox feature on the main product image.
Lightbox Icon Background Color: Select the background color for the lightbox icon.
Lightbox Icon Background Hover Color: Select the background color for the lightbox icon when hovered over by the cursor.
Lightbox Icon Color: Choose the color of the lightbox icon itself.
Lightbox Icon Hover Color: Select the color of the lightbox icon when hovered over.
Lightbox Icon Size (px): Set the size of the lightbox icon in pixels.
Lightbox Icon Radius (%): Adjust the border radius to change the shape of the lightbox background.
Lightbox Icon Position: Choose the position to display the lightbox icon relative to the product image. Options include:
- Top left
- Top right
- Bottom left
- Bottom right
Lightbox Overlay Color: Set the color for the lightbox overlay, which appears when the lightbox is activated.
Once you have configured the desired lightbox options, click on the “Save Settings” button to apply the changes.
Showing Gallery Thumbnails on Product Pages
Go to WooCommerce > Product Gallery & Image Zoom > Product Gallery Option.
Show Gallery Thumbnails Feature: Toggle the switch to enable or disable the gallery thumbnails feature on the single product details page. This feature allows customers to view multiple product images in a thumbnail gallery.
Change Main Image Option: Choose how the main product image changes when interacting with the gallery thumbnails. You can select from:
- Click: Requires the user to click on the thumbnail to change the main product image.
- Hover: The main image will be replaced when the mouse hovers over the thumbnail.
Add Opacity on Inactive Thumbnail: Enable to add opacity to inactive thumbnails for better visual distinction.
Add Greyscale on Inactive Thumbnail: Enable to apply a grayscale effect to inactive thumbnails.
Add Zoom Effect to the Thumbnail: Enable to add a zoom effect when hovering over the thumbnails.
Active Thumbnail Border Color: Set the color for the border of the active thumbnail.
Enable Slider Navigation Icon: Toggle to enable or disable the slider navigation icon.
Thumbnail to Show: Set the number of thumbnails to display. You can choose between 2 and 10 thumbnails.
Navigation Icon Dimension (px): Set the size of the slider elements, including width, height, border, and icon size.
Slider Navigation Icon Border Radius (%): Adjust the border radius to change the shape of the slider navigation icon.
Show Navigation Slider Arrows: Choose how to display the slider navigation arrow:
- Fixed: Keep the arrows displayed.
- On Hover: Display the slider arrows when hovering over the thumbnail gallery.
Infinite Thumbnail Slider: Toggle to enable or disable the slider as infinite. When enabled, the slider will start again from the first image after reaching the last thumbnail.
Autoplay Thumbnail Slider: Toggle to enable or disable autoplay mode for the thumbnail slider.
Setting Colors for the Slider Navigation
Background Color: Select the background color for the slider navigation.
Border Color: Select the color for the border of the slider navigation.
Icon Color: Choose the color for the icon used in the slider navigation.
Background Hover Color: Select the background color for the slider navigation when hovered over.
Border Hover Color: Select the color for the border of the slider navigation when hovered over.
Icon Hover Color: Choose the color for the icon in the slider navigation when hovered over.
Once you have customized the colors for the slider navigation according to your preferences, click on the “Save Settings” button to apply the changes.
Restricting Products for the Product Gallery & Image Zoom
Go to WooCommerce > Product Gallery & Image Zoom > Exclusion List.
Select Product: From the dropdown menu, select the specific product that you want to exclude from the gallery and image zoom feature.
Select Category: Alternatively, you can choose to exclude an entire category of products from the gallery and image zoom feature. Select the category from the dropdown menu.
After selecting the product or category to be excluded, click on the “Save Settings” button to apply the changes.
