Product Image Zoom Advanced WooCommerce Plugin

With the help of the plugin “Woocommerce Images ZOOM”, users are able to magnify an image to have a more detailed view of the image.


Welcome to Product Image Zoom Advanced WooCommerce Plugin

Installing Woocommerce Image Zoom

Once you've downloaded the installation file on CodeCanyon, extract it and locate a file called woo-image-zoom.zip. You can install the plugin by using one of two installation methods:

  1. WordPress upload - This is probably the simplest way for most users. Here are the steps you need to take:
    1. Login to WordPress admin
    2. Go to admin panel > Plugins > Installed Plugins > Add New > Upload Plugin
    3. Click on "Choose File" and select woo-image-zoom.zip
    4. Click on "Install Now"
  2. FTP upload - If you wish to install via FTP, here are the steps you need to take:
    1. Using FTP client, login to the server where your WordPress website is hosted
    2. Using FTP client, navigate to the /wp-content/plugins/ directory under your WordPress website's root directory
    3. Using FTP client, upload the woo-image-zoom directory to plugins directory on remote server

Once installation is complete, your Woocommerce Images ZOOM plugin will be ready to use. You should now see "iT WOO ZOOM" appear in the admin menu.

iThemeland Labels

Great - you can now start building your product images zoom!

Once you've installed Woocommerce Images Zoom, you can start building your product images zoom.

Enable & Setting Up the Woocommerce Image Zoom

There are two tabs on the settings page

Standard Post

Now let's go over the settings within each tab

Settings IconGeneral Settings

Let's go over the possible options:

Settings IconZoom Settings

Let's go over the possible options:

  • Preview Box Section

    Preview Box Section

    Check your settings live.

    In the Step 1, you’ll be able to define the zoom type: with No Lens, Circle Lens, Square Lens or With Zoom Window.

    Step 1

    In the Step 2, there are settings for creating your desired zoom, which we put into four sections inside four tabs.

    Now let's go over the settings within each tab

    Step 2

    General

    General

    • Cursor Type - the cursor that will be displayed when hovering over a zoomed image.
    • Animation Easing Effect - speed at which the zoom animation progresses. Allowed values: 0-200. 0 for no animation effect, 200 for very slow animation effect. Default: 12.
    Lens

    Next you can configure your lens. The Lens tab will be disabled if you chose the “No Lens” zoom type.

    Lens

    • Lens Size - means the diameter of the circle if you chose the Circle Lens and the width and height of the square in case you chose the Square Lens.
    • Lens Color - is available only if you chose the With Zoom Window zoom type. Will change the color of the lens.
    • Border Thickness - You are not limited to any values, but it’s best to keep the value between 0px and 10px.
    • Border Color - changes the color of the border.
    • Fade Time - will fade in and fade out the lens in this amount of time. You are not limited to integers, so, for example, you can write 0.5 for “half a second”.
    • Tint - you can choose to lay a color over the part of the image left uncovered by the lens.
    • Tint Color - the color of the tint (see above for a definition for Tint).
    • Tint Opacity - the opacity of the tint (see above for a definition for Tint).
    Zoom Window

    The Zoom Window tab will be active only if you chose the “With Zoom Window” zoom type.

    Zoom Window

    • Zoom Window Width - the width of the Zoom Window. The width and height of the Lens will be calculated automatically in order to display the relation between the Lens and the Zoom Window.
    • Zoom Window Height - the height of the Zoom Window.
    • Responsive - the Zoom Window will adapt to the browser size. For example, if you set the Zoom Window Width to 600px, but the amount of space where the Zoom Window should show up is smaller than 600px, then the Zoom Window will shrink in order to fit into the amount of space available.
    • Responsive Threshold - the zoom type will automatically switch from With Zoom Window to No Lens (or inner zoom) once the browser is smaller than this threshold. For example, if the Responsive Threshold is set to 800px, then there will be a Zoom Window displayed on desktop browsers and No Lens zoom for browsers with width less than 800px.
    • Positioning - choose the positioning of the Zoom Window in relationship to the zoomed image. Available options are: Right Top, Right Bottom, Right Center, Left Top, Right Bottom, Right Center. The default option is Right Top.
    • Distance from the Main Image - the distance between the Zoom Window and the zoomed image. Default is 10px.
    • Border Thickness - the thickness of the border.
    • Border Color - the color of the border.
    • Shadow Thickness - the thickness of the shadow. Use 0 in order to remove the shadow. There are no limitations to the values, but it is advisable to keep it in the 0-10 range.
    • Rounded Corners - the radius of the border.
    • Mousewheel Zoom - your website’s user will be able to increase or decrease the zoom level with the mouse wheel.
    • Fade Time - will fade in and fade out the Zoom Window in this amount of time. You are not limited to integers, so, for example, you can write 0.5 for “half a second”.
    Text On Image

    Under this tab you can set your own text on the images, for example “Hover for zoom” or simply your website’s name.

    Text On Image

    Click on "Save changes" for save changes options.
  • For support on Woocommerce Images ZOOM plugin, please send your issue to https://support.ithemelandco.com