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 to disable the zoom option on mobile devices.

Zoom window position: choose the position of the zoom window in relation to the product image:

  • Right side
  • Inside
Zoom on the right side
Zoom inside the image

Zoom window size (pixels): set a width and hight for the zoom window in pixels. Leave 0 for the default value.

Zoom icon

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:

  • top left
  • top right
  • bottom left
  • bottom right
Zoom options 3

Loading label: set here a text that will show over the image when the image 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 controls the opacity of the square or rectangle zoom lens. From 0% invisible to 100% fully visible.

Blur main image: enable 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 modal window. You will find all the options for the Lightbox functionality in YITH > Product Gallery & Image Zoom > Main Image Options > Lightbox.

Lightbox options

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 you click 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:

  • top left
  • top right
  • bottom left
  • bottom right

Lightbox overlay color: set the color for the lightbox overlay. Opacity settings are supported.

Product gallery options

Hide gallery thumbnails from single product page: this will hide the product gallery thumbnails from the product page. Keep it enable to ON if you want to configure the gallery and the slider.

Change main image on:

  • Click – the user has to click on the thumbnail to change the main product image
  • 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 a grey scale 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.

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:

  • fixed – keep the slider arrows displayed
  • on hover – display the arrows on 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:

  • circular – the thumbnail after the last one will be the 1st of the list and the slider will start again.
  • 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 tab

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

  • specific products
  • categories
  • tags

Add exclusion

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

Excluded products

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 contents in replacement of the provided image for single products in the shop.

In combination with YITH WooCommerce Zoom Magnifier 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 Video

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”.

How to enable image zoom in quick view popup

Zoom magnifier in quick view

 

YITH WooCommerce Watermark

YITH WooCommerce Watermark lets you apply a logo or a watermark to all your product images. The Zoom Magnifier plugin uses a different image size, so the  Watermark plugin will add this specific image size in the available image sizes.

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.