Posted on

How to set up the Product Zoom

After you have install the WooCommerce Product Zoom plugin on your site the new menu item will appear in your WordPress Admin Panel in WooCommerce->Settings.

WooCommerce Product Zoom tab

Click it and you’ll see the Settings page of this plugin. Let’s go through each parameter and study what does it do.

Zoom Factor

setup-02

This is a simple thing – just set what times your image should be zoomed in. It accepts the values from 1 to 10 with 0.1 step.

Zoom Window Width and Zoom Window Height

woocommerce-product-zoom-zoom-width-height

These two parameters are the sizes of a zoom window. Zoom Window is a floating window where your zoomed image will be put in. So, what are these parameteres actually? Well, your current image in a gallery has its own size. Each image. And when you zoom the current image the Zoom Window will have the follow sizes:

  • width = Zoom Window Width parameter × Current Image Width;
  • height = Zoom Window Height parameter × Current Image Height;

And remember that this parameters also define the aspect ratio of your zoom window, so don’t overdo it with these parameters. It accepts the values from 1 to 10 with 0.1 step.

Zoom Window Position

setup-04

Zoom Window position is set up relatively to the current image. By default, its value is ‘right’ that means ‘to the right of the current image’. I think the next three parameters are clear for you now. And the ‘overlay’ is when your Zoom Window top left corner mathes the current image top left corner.

Zoom Window Border

setup-05

This parameter not so complex as it may seems at first sight. It consists of three parts: border width, border type and border color.

  • border width: just the border width in pixels;
  • border type: the type of border line;
  • border color: the simple color picker that lets you choose border color.

And the red arrow points to the border example that changing with parameters. Just play with it to decide what border you want.

Zoom Lens Border

setup-06

Zoom Lens is the little rectangle that follows your cursor and shows what area is beign zoomed at the moment. As you can see it provides the same parameters as the Zoom Window Border above.

Max Images per Row

setup-07

Such a long title and such a pretty simple parameter for dessert! It defines how many images can be in each row of thumbnail block. For ex., there are 7 images per row on the image below. But if you set this to 0 all the images will be in one row.

woocommerce-product-zoom-gallery-example

I know you want to play with this pretty gallery :)

Leave a Reply

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