About the Product Zoom
The WooCommerce Product Zoom provides the out-of-box Click-to-Zoom Gallery plugin that lets your customers see your products in detail.
You don’t need to be familiar with programming.
Let’s introduce this!
- (new)Vertical and Horizontal scrollable galleries!
- (new)Ability to change thumbnail sizes from admin panel
- Asynchronous – you will not see an emptiness while a zoomed image is loading
- Mobile Version – a zoomed image fits device screen and you can move across it
- Different zoom window positions
- Tested with many themes including not-woocommerce themes
- Horizontal/Vertical Slider
Quick Start Guide
First, download and put our plugin to the plugins folder of your site.
After you’ve done this the plugin will appear in the Admin Panel -> Plugins. Just activate it.
And now you can find it in the WooCommerce->Settings->WooCommerce Product Zoom.
Congratulations! Now you have the beautiful zoom gallery on your website!
You can leave it as it is or read below how to customize it.
The general parameters you need to know are Action to Zoom, Zoom Factor, Zoom Window Width and Height and Zoom Window Position. Let’s discuss each of them.
ACTION TO ZOOM
Generaly, the plugin provides two actions that user can make to zoom an image – either click-to-zoom or hover-to-zoom. You can set it on your settings page.
It means how many times your image has to be zoomed. This parameter provides values from 1 to 10. For example, here is 2X zoom at the picture.
ZOOM WINDOW WIDTH AND HEIGHT
The Zoom Window is the appearing area where your zoomed image is. It has its own size, by default, it equals to an original image. But you can easily set this parameter whatever you want.
It is set as consisting of original images. It is complicated to understand at first sight. See the image below.
As you can see a Zoom Window size is how many original image sizes in it. It is made so because in this case, it is not cool to use absolute units like pixels. So, it’s a good decision to use an original image size as a base.
ZOOM WINDOW POSITION
The Zoom Window position is based on the position of original image: on the right to it, on the left to it, on the top of it, on the bottom of it and overlay the original image.
Here are 4 Zoom Window positions relatively to an original image. And the 5th position simply overlays the original image.
There are few parameters that will be nice out-of-box: Thumbnails Size, Zoom Window Border parameters, Zoom Lens Border parameters and Number of Thumbnails per Row.
It is very simple – you can customize a color, thickness, and type of line of the Zoom Window Border and Lens Border.
So, the Number of Thumbnails per Row is an easy parameter, just look at the picture below. You see, here are totally 10 images, but each row contains no more than 6 images, because of this parameter set to 6.
Here the next parameter to be mentioned – Thumbnails Size. This parameter is useful for a horizontal or vertical slider because with standard thumbnail rows the size of each thumbnail is calculated from the Number of Thumbnails per Row parameter. Here is the example.
And the Plugin Templates Priority. Basically, the WooCommerce Product Zoom overrides standard WooCommerce single product image and single product thumbnails templates. This parameter defines do the overridden WooCommerce Product Zoom files have a higher priority than those one overridden by your theme. By default it is true.
Our plugin provides a smooth mobile zoom. It is a very good user experience when the user can REALLY zoom an image and see a product in details.
WooCommerce Product Zoom now provides a horizontal and vertical slider for a better appearance of the gallery.