View Product Page

Zoom options

Let’s start with the main zoom options, that you can find in YITH > Product Gallery & Image Zoom > Zoom Options.

Zoom options
  • Hide zoom on mobile devices: enable this option to disable the zoom option on mobile devices.
  • Zoom window position: choose the position of the zoom window in relation to the product image from Right side or Inside.
Zoom on the right side
Zoom inside the image
  • Zoom window size (pixels): set the width and height for the zoom window in pixels. Leave 0 for the default value.
Zoom icon options
  • Show zoom icon: enable to show a magnifying glass icon and customize its colors, size and position in the options below.
  • Zoom icon colors: icon and icon on hover, background and background on hover.
  • Zoom icon size (px): choose the size of the icon in pixels.
  • Zoom icon radius (%): set the border radius to change the shape of the zoom background. From 0% square to 100% round.
  • Zoom icon position: choose the position of the icon from top left, top right, bottom left, or bottom right.
Other options
  • Loading label: set the text that will show over the image when it is loading. This cannot be appreciated if the site is loading images quickly, but it is useful if your users visit the site with a slow connection.
  • Lens border opacity: this option controls the opacity of the square or rectangle zoom lens. From 0% invisible to 100% fully visible.
  • Blur main image: enable this option to blur the main image when zooming. This effect will be visible only if the zoom box is on the right side of the product image, not when the zoom is set to show inside the image.

Lightbox

The plugin allows you to also enable a lightbox option to show the product images in a modal window. You will find all the options for the Lightbox functionality in YITH > Product Gallery & Image Zoom > Main Image Options > Lightbox.

Lightbox settings
  • Enable lightbox in main product image: enable the lightbox feature on the main product image. This will show an icon that will open the image in a modal window when clicking on it. You can customize the icon with the options below.
  • Lightbox icon colors: background and background on hover – icon and icon on hover
  • Lightbox icon size (px): set the lightbox icon size in pixels.
  • Lightbox icon radius (%): set the border radius to change the shape of the lightbox icon background. From 0% square to 100% round.
  • Lightbox icon position: choose in which position to show the lightbox icon on the product image from top left, top right, bottom left or bottom right.
  • Lightbox overlay color: set the color for the lightbox overlay. Opacity settings are supported.

Product gallery options

Product gallery options
  • Hide gallery thumbnails from single product page: this will hide the product gallery thumbnails from the product page. Keep it enabled to configure the gallery and the slider.
  • Change main image on:
  1. Click – the user must click on the thumbnail to change the main product image
  2. Hover – the image will be replaced when the mouse hovers over the thumbnail
  • Add opacity on inactive thumbnails: enable to add opacity on inactive thumbnails and let only the active thumbnail stand out.
  • Apply grey scale on inactive thumbnails: enable to apply greyscale to inactive thumbnails and let only the active thumbnail stand out.
  • Add zoom effect to the thumbnails: add a zoom effect when hovering over the thumbnails.
  • Active thumb border color: set the color of the active thumbnail border.

Slider options

  • Enable slider: enable this option to show the product gallery images in a slider. If enabled, you will be able to configure colors, arrows and autoplay options from the settings below.
Slider options
  • Thumbnails to show: set the number of thumbnails to show in the slider.
  • Slider colors: background – border – arrow (default color and on hover)
  • Slider sizes: slider – arrow – border
  • Border radius (%): set the border radius to change the shape of the slider. From 0% square corners to 100% round corners.
  • Show slider arrows:
  1. fixed – keep the slider arrows displayed
  2. on hover – display the arrows when hovering over the thumbnail gallery.
  • Infinite slider: enable to let the slider show all the images and start again from the first. This can have a different setting:
  1. circular – the thumbnail after the last one will be the 1st of the list and the slider will start again.
  2. back to the 1st – after the last thumbnail the slider go back and jump to the 1st thumbnail.
  • Autoplay slider: the slider will automatically play and let the images rotate when the page is loaded.

Exclude products

You can disable the zoom option on specific products of your store, or by tag or category.

Go to the Exclusion list tab.

Exclusion list

Then, click on + Add exclusion, and you will be able to choose among:

  • specific products
  • categories
  • tags

Add exclusion list

Once the products are added here, the zoom options will not apply to them.

Products in the exclusion list

Elementor

The compatibility this plugin has with Elementor allows you to add the product gallery slider and zoom feature into the product page using the following widget:

Zoom Product Images widget

Here is an example of the features added by the widget:

Zoom product image widget example

YITH WooCommerce Featured Audio and Video Content

YITH WooCommerce Featured Audio and Video Content is a plugin for WooCommerce that allows you to set video and audio content in replacement of the provided image for single products in the shop.

In combination with YITH WooCommerce Product Gallery & Image Zoom the video or audio you have added in the video gallery, will replace the featured image and will not be shown in a popup.

To do it, you need to install and activate both plugins then go to YITH > Featured Video > Gallery settings and enable the option Video and Audio gallery mode.

Integration with YITH Featured Audio and Video Content
Integration with YITH Featured Audio and Video Content

YITH WooCommerce Quick View

YITH WooCommerce Quick View allows the users to get a quick view of the product in which they are interested. The product details will be shown in a popup, so they don’t need to leave the current page.

To make the two plugins work well together you’ll need to enable Enable image zoom in Quick View -> Products -> Content Options. Once enabled it allows you to enable the zoom feature also in the product “quick view”.

Integration with YITH Quick View

Zoom magnifier in quick view

YITH WooCommerce Watermark

YITH WooCommerce Watermark lets you apply a logo or a watermark to all your product images. YITH Product Gallery & Image Zoom uses a different image size, so the Watermark plugin will add this specific image size to the available ones.

Integration with YITH Watermark
zoom and watermark

In order to make the two plugins work together, you will only have to activate the premium version of both of them.

For more information on how to set up the watermark plugin, take a look at the full documentation here.