Image Zoom Pro for WooCommerce

Image Zoom Pro for WooCommerce offers tools which can help your users to view the product image and product gallery images more clearly.

Installation

↑ Back to top

1. Download the image-zoom-pro-for-woocommerce.zip file from your WooCommerce account.

2. Go to: WordPress Admin > Plugins > Add New and Upload Plugin with the file you downloaded with Choose File.

3. Install Now and Activate the extension.

More information at: Install and Activate Plugins/Extensions.

Features

↑ Back to top

1. Image Zoom Types

↑ Back to top

Apart from the Default Image Zoom offered by WooCommerce, you can choose between,

Window Zoom

In Window Zoom mode, the zoomed view of the image will be displayed in a separate window when the user hovers over the image.

Lens Zoom

In Window Zoom mode, the zoomed view of the image will be displayed inside a lens when the user hovers over the image.

2. Lens Types

↑ Back to top

Round

In Round Lens, the zoomed area will be displayed inside a circle.

Square

In Square Lens, the zoomed area will be displayed inside a square.

3. Mouse Wheel Zoom

↑ Back to top

Users can zoom into the image using their Mouse Wheel. This can be optionally turned off.

Setup and Configuration

↑ Back to top

General

↑ Back to top

To activate this plugin, go to WooCommerce > Settings > Image Zoom Pro > General and select the Enable Image Zoom Pro checkbox.
To enable zoom for mobile devices, then select the Enable Image Zoom Pro for Mobile Devices checkbox.

Zoom Settings

↑ Back to top

In Zoom Type for Desktop option, select Window Zoom to display the zoom effect in a separate window which will be displayed outside the original product image. Select Lens Zoom to display the zoom effect in a lens which will be displayed inside the original product image.
In Zoom Type for Mobile Devices option, select Window Zoom or Lens Zoom to display the zoom effect in mobile devices.
In Lens Type option, select whether you want to display the lens in Round shape or a Square shape.
Give the size of the Lens in Lens Size field. The size has to be given in pixels.
If you want to give a fade in effect while displaying the lens, in Lens FadeIn Speed option, set the fade in speed. FadeIn speed has to be given in milliseconds. If 0 is given, then FadeIn effect will not work.
In Mouse Pointer option, select the mouse pointer to be used.
If you want to give in depth zoom effect when using mouse wheel, then select Enable Mouse Wheel Zoom option.
If you want this plugin to be worked based on device responsiveness, then select Enable Responsiveness option.
While an image is zoomed, it will be displayed in a linear pattern which will slow down the animation time. To start the animation more quickly, select the Enable Easing Effect option.
Set the duration for easing effect in Easing Duration option. Duration has to be given in milliseconds.
Set the border size for window/lens in Zoom Border Size option. Size has to be given in pixels
Set the border color for window/lens in Zoom Border Color option.
For Window Zoom type, set the width of the window in Zoom Window Width option and height of the window in Zoom Window Height option. Size has to be given in pixels.
By default, there will be no gap between border of original image and border of zoom window. Set the distance of zoom window from the image through X-axis in Zoom Window Offset X option. and set the distance of zoom window from the image through Y-axis in Zoom Window Offset Y option.
Set the window position for desktop in Zoom Window Position for Desktop option and window position for mobile devices in Zoom Window Position for Mobile Devices option.
Note: Not all themes supports all the positions. If zoom window is not displaying correctly in a position, then try changing to a different position.
If you want to give a fade in effect for the zoom window, then in in Zoom Window FadeIn Speed option, set the fade in speed. FadeIn speed has to be given in milliseconds. If 0 is given, then FadeIn effect will not work.
If you want to give a tint or shadow effect in the original image outside the zoom effect applied area, then select Enable Tint Effect option.
Set the color to be given for the tint effect applied area in Tint Color option.
Set the opacity for the tint effect applied area in Tint Opacity option. Opacity has to be given between 0 to 1.
If you want to give a fade in effect for the tint effect applied area, then in in Tint FadeIn Speed option, set the fade in speed. FadeIn speed has to be given in milliseconds. If 0 is given, then FadeIn effect will not work.
In Lens Zoom type, if you want to contain the lens within the original image, then select Contain Lens Inside the Image option. If selected, lens will not fall outside the original image.

If you want to disable the zoom effect to be applied for specific products or categories, then select the products and categories to exclude in Exclude Products for Zoom and Exclude Categories for Zoom option respectively.

Translation

↑ Back to top

Image Zoom Pro for WooCommerce is translation ready, meaning you can edit the po files by which you can translate the text to any language. Steps to perform the translation are as follows. For example, a translation to French.

Download and install Poedit
Open the file image-zoom-pro-for-woocommerce > languages > image-zoom-pro-for-woocommerce.pot using Poedit.
Create a new translation file by clicking Create new translation button.
Choose the Source text and set its corresponding French text in Translation Text Area.
Save the changes.
Save the file name as image-zoom-pro-for-woocommerce-fr_FR.po.
Then go to WordPress dashboard > Settings > General and select the Site Language as French.