Back to top

YITH WooCommerce Zoom Magnifier Documentation

Thank you so much for using our plugin.

YITH WooCommerce Zoom Magnifier - Wordpress plugin

This document covers the installation and use of this plugin and reveals answers to common problems and issues - I encourage you to read this document if you are experiencing any difficulties.

Get started!


 

Getting started

To install this plugin you must have a working version of WordPress already installed. For information in regard to installing the WordPress platform, please see the WordPress Codex - http://codex.wordpress.org/Installing_WordPress

Installation

Upload via ftp:

First, unzip the zip archive you downloaded on your computer. Upload the folder to your server via ftp to the   /plugins/ directory on your Wordpress installation. (wp-content > plugins)

Upload via Wordpress admin:

Go to your Wordpress admin, and in the Plugins-panel, choose Add New. Click Upload in the below the title "Install Plugins". Upload the plugin zip.

Installing WordPress  http://codex.wordpress.org/Installing_WordPress

Activation

Once you have uploaded the plugin, activate your plugin in Plugins > Installed plugins.
This plugin will work only if WooCommerce - excelling eCommerce is installed and active.

Go in WooCommerce > Settings > Magnifier > General Settings and be sure that Enable YITH Magnifier is ticked.

Settings

In WooCommerce > Settings > Magnifier > tab you will find the settings of the plugin:

Settings

The screenshot above shows the default settings of the plugin.

General Settings
Enable YITH Magnifier Enable the plugin
Forcing Zoom Image sizes This option forces the dimension of zoom images to be exactly twice of the Single Product Image. If you disable the option, you will be able to manually set the dimensions.
Magnifier Settings
Zoom Area Width The width in pixel of magnifier box (default: auto). If the value is "auto" the width is equal to the Single Product Image width. If you want to customize the values.
Zoom Area Height The height in pixel of magnifier box (default: auto). If the value is "auto" the height is equal to the Single Product Image height. If you want to customize the values.
Zoom Area Position The position of the magnifier. It can be placed either inside the Single Product Image or to the right as well.
Zoom Area Mobile Position The position of the magnifier when the page is opened from a Mobile device. It can be disabled, placed inside the Single Product Image or use the default setting.
Loading label The label showed while the image is loading.
Lens Opacity The opacity of the lens
Blur Add a blur effect to the small image on mouse hover.
Slider Settings
Enable Slider Enable the slide thumbnails or use the default Woocommerce thumbnails
Enable Slider Enable the slide thumbnails or use the default Woocommerce thumbnails
Enable Slider Responsive The option fits the thumbnails within the available space. Disable it if you want to manage by yourself the thumbnails (eg. add margins, paddings, etc.)
Items Number of thumbnails to display below the Single Product Image.
Circular carousel Determines whether the carousel should be circular.
Infinite carousel Determines whether the carousel should be infinite. Note: It is possible to create a non-circular, infinite carousel, but it is not possible to create a circular, non-infinite carousel.

Codex

The plugin allows you to use your own custom templates and stylesheets.

Custom Stylesheet

In order to customize the style of the plugin you can easily create a file called yith_magnifier.css within the woocommerce folder of your theme. The file will be automatically loaded from your theme instead of the plugin folder.

In this way the frontend.css file contained within the plugin will be replaced with your stylesheet. Keep in mind to copy and paste the code contained within this file if you need that.

Custom Templates

If you need to include our plugin within your theme you can also customize the templates. Copy the folder templates/single-product from the plugin folder within the woocommerce folder of your theme and automatically the plugin will load the templates from your theme instead of the plugin folder.

FAQ

The size of the Zoom image is not the size I setted. Why?

If you enabled the plugin after you uploaded the images of the product you need to regenerate the thumbnails before to use it. Another reason could be that the size setted for the zoom images is greather than the original image size.

I'm not able to change the sizes of Zoom Image. Why?

The size of the Zoom Image is automatically setted. If you want to change these values you just need to untick the option Forcing Zoom Image sizes.

Localization

This plugin is ready for localization via .po/.mo files.

If you are not familiar with translating Wordpress plugins, I recommend you reading this article: http://codex.wordpress.org/Translating_WordPress

Change the language of YITH WooCommerce Zoom Magnifier Languages for dummies

  1. Check the values of your wp-config, the language of this file must match to your translation;
  2. Find the folder languages of the plugin
  3. Duplicate default.po
  4. Rename your copy of default.po example: yit-fr_FR.po for France, yit-en_EN.po for English, yit-he_HE.po for hebraic, and so on.
  5. Download POEdit
  6. Open your file with the POEdit software
  7. Update the catalog using the POT file (Catalog -> Update from POT file...)
  8. Translate your file (edit catalog properties using POEdit to add your credits)
  9. In File click on Preferences and tick Automatically generate mo
  10. Save your file
  11. Send the new .mo and .po via FTP to your server, in the folder languages of the plugin
  12. Send the new .mo and .po via email to plugins@yithemes.com so we can improve the quality of the plugin and you can help other users. We will thank you with official credits

Version 1.1.2 - Released: Jun, 30 - 2014

  1. Restored: Image size options on WC 2.1.x
  2. Fixed: Items number option on thumb slider
  3. Fixed: Hard crop issue on WC 2.1.x

Version 1.1.1 - Released: Mar, 14 - 2014

  1. Fixed: Thumbnails slider direction on single product page

Version 1.1.0 - Released: Feb, 13 - 2014

  1. Added: Support to WooCommerce 2.1.x

Version 1.0.8

  1. Added: ability to change the slider programmatically

Version 1.0.7

  1. Fixed: zoomed image did not change when select a variation

Version 1.0.6

  1. Removed white space from frontend.php

Version 1.0.5

  1. Fixed: magnifier override the plugin for featured video

Version 1.0.4

  1. Minor bugs fixes

Version 1.0.3

  1. Added ability to load the plugin even when WooCommerce is installed in a different folder

Version 1.0.2

  1. Fixed fatal error to yit_debug with yit themes

Version 1.0.1

  1. Optimized images
  2. Updated internal framework

Version 1.0.0

  1. Initial release.