Posted on

Live Documentation – WooCommerce Product Zoom

A pretty smooth asynchronous zoom for WooCommerce


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)Hover-to-zoom!
  • (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
  • Customizable
  • Different zoom window positions
  • Tested with many themes including not-woocommerce themes
  • Horizontal/Vertical Slider

First, download and put our plugin to the plugins folder of your site.

install-2

After you’ve done this the plugin will appear in the Admin Panel -> Plugins. Just activate it.

activate

And now you can find it in the WooCommerce->Settings->WooCommerce Product Zoom.

WooCommerce Product Zoom tab

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.Click hover to zoom

ZOOM FACTOR

zoom_factor

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.

zoom_window_size

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.

positions

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.

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.

thumbnail_rows

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.

Plugin Templates Priority

Mobile Version


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.


One thought on “Live Documentation – WooCommerce Product Zoom

  1. […] We developed our plugin in such a manner that default settings suit most websites. We really like how our default version works and most of our users prefer to use default version of the plugin. But if you want to change look and feel of the page we provided a very simple to use settings page where you can control different settings such as borders, zoom window positions, zoom factors, etc. Detailed description of each customization option can be found in our documentation. […]

Leave a Reply

Your email address will not be published. Required fields are marked *