woocommerce zoom

WooCommerce Docs

Documentation, Reference Materials, and Tutorials for your WooCommerce products

Cloud Zoom

Installation ↑ Back to top

  1. Download the .zip file from your WooCommerce account.
  2. Go to: WordPress Admin > Plugins > Add New and Upload Plugin with the file you downloaded with Choose File.
  3. Install Now and Activate the extension.

Setup and Configuration

Enable / Disable Professor Cloud to Enable and then hit save, Image Zoom will now be working for you on the single product page.

Image tips ↑ Back to top

For Image Zoom to be effective you should have access to good quality images of a sufficient size that your customers can really see the detail.

A good image minimum size would be 600px x 600px when you load them, preferably much larger, if your images are all 300px x 300px you aren’t going to benefit from the Zoom effect.

Customizing the Zoom window ↑ Back to top

If you want to change the styling of the Zoom window you can override the default CSS file – you should always use this method to avoid losing your changes when you upgrade

To use your own version of the CSS file instead of the included CSS please do the following

  1. In your theme folder (wp-content/themes/YOUR-THEME-NAME/) create a folder called professor_cloud
  2. Copy the existing CSS file into that folder (you end up with wp-content/themes/YOUR-THEME-NAME/professor_cloud/woocomm-professor-cloud.css )
  3. Now edit the woocomm-professor-cloud.css file to your hearts content

Trouble Shooting ↑ Back to top

Constant ‘Loading…’ on the main image

Deactivate the scaling option in the Image Zoom settings, this issue is caused by TimThumb permissions being incorrect. If the Zoom works with scaling off them you should use it that way, if you need TimThumb for Zoom to work then you will need to access the directory via FTP and change the folder permissions.

The Image Zoom script file is one of the last to load which means it is vulnerable if another script causes an error. If the zoom is not working then you should load the page again with the console open and look for errors.

If there are no errors go to: WP Admin > WooCommerce > Settings > General > Products > Display > Product Images. Make sure that Enable Lightbox is checked.

Multiple copies of the main image in the Zoom window

Basically your main image is too small. Version 2.0.0 of Image Zoom has rectified this by stretching the image to fit the window but you should load bigger images to avoid distortion

Questions & Support

Have a question before you buy? Please fill out this pre-sales form.

Already purchased and need some assistance? Get in touch with a Happiness Engineer via the Help Desk.

Description

Improve the user experience, improve your sales

Offer to your visitors a chance to inspect in detail the quality of your products. With YITH WooCommerce Zoom Magnifier you can add a zoom effect to all your product images.
The WordPress plugin also adds a slider below the featured image with your product gallery images.

Main features

  • Show a bigger size product image on mouseover.
  • Customize zoom area width and height and the size of the image to show as zoomed image.
  • Enable or disable it on mobile devices.
  • Add a slider showing product image thumbnails.
  • Customize the slider behavior.

For a more detailed list of options and features of the plugin, please look at the official documentation.

Discover all the features of the plugin and install it in your theme: the result will be extremely satisfying.

Suggestions

If you have suggestions about how to improve YITH WooCommerce Zoom Magnifier, you can write us so we can bundle them into YITH Zoom WooCommerce Magnifier.

Translators

Available Languages

  • English (Default)
  • Italian
  • Spanish

If you have created your own language pack, or have an update for an existing one, you can send gettext PO and MO file
use so we can bundle it into YITH WooCommerce Zoom Magnfier Languages.

Documentation

Full documentation is available here.

Screenshots

  • The General plugin settings page. You can disable the plugin for mobile devices.
  • The Magnifier settings page. Choose the size of the zoom area, the size of the image to be shown in zoom area and the its position (on the right or over the image).
  • The slider settings page. You can choose to use the slider for product image thumbnails, set how many images to show within the slider, and the behavior of the slider, choosing if circular, infinite or standard carousel.
  • The zoom applied to a product image, showing zoomed image on the right side.
  • The zoom applied to a product image, showing zoomed image over the same image.
  • Choose how many items the slider should show, the image thumbnails will fit the available width.

Installation

Important: First of all, you have to download and activate WooCommerce plugin, which is mandatory for Yith WooCommerce Zoom Magnifier to be working.

  1. Unzip the downloaded zip file.
  2. Upload the plugin folder into the wp-content/plugins/ directory of your WordPress site.
  3. Activate YITH WooCommerce Zoom Magnifier from Plugins page

Configuration

YITH WooCommerce Zoom Magnifier will add a new tab called “Zoom Magnifier” in “YIT Plugins” menu item. There, you will find all Yithemes plugins with quick access to plugin setting page.

Nederlands

YITH WooCommerce Zoom Magnifier

Omschrijving

Verbeter de gebruikerservaring, verbeter je omzet

Bied uw bezoekers een kans om de kwaliteit van uw producten gedetailleerd te bekijken. Met YITH WooCommerce Zoom Magnifier kun je een zoomeffect toevoegen aan al je productafbeeldingen.
De plug-in WordPress voegt ook een schuifregelaar onder de afbeelding met afbeeldingen van uw productgalerij toe.

Main features

  • Toon een grotere afbeelding van het product op mouseover.
  • Pas zoombereik breedte en hoogte aan en de grootte van de afbeelding om te tonen als ingezoomde afbeelding.
  • Schakel het in of uit op mobiele apparaten.
  • Voeg een schuifregelaar toe met productafbeeldingen.
  • Pas het gedrag van de schuifregelaar aan.

For a more detailed list of options and features of the plugin, please look at the official documentation.

Ontdek alle functies van de plug-in en installeer deze in je thema: het resultaat zal zeer bevredigend zijn.

Suggesties

If you have suggestions about how to improve YITH WooCommerce Zoom Magnifier, you can write us so we can bundle them into YITH Zoom WooCommerce Magnifier.

Beschikbare talen

  • Engels (Default)
  • Italiaans
  • Spaans

If you have created your own language pack, or have an update for an existing one, you can send gettext PO and MO file
use so we can bundle it into YITH WooCommerce Zoom Magnfier Languages.

Documentatie

Schermafdrukken

  • De algemene plugin-instellingenpagina. Je kunt de plug-in voor mobiele apparaten uitschakelen.
  • De instellingenpagina Vergrootglas. Kies de grootte van het zoomgebied, de grootte van de afbeelding die in het zoomgebied en de bijbehorende positie wordt weergegeven (aan de rechterkant of boven de afbeelding).
  • De pagina met schuifregelaarinstellingen. Je kunt ervoor kiezen om de schuifregelaar voor miniaturen voor productafbeeldingen te gebruiken, in te stellen hoeveel afbeeldingen binnen de schuifregelaar moeten worden getoond en het gedrag van de schuifregelaar, waarbij je kiest voor circulaire, oneindige of standaard carrousels.
  • De zoomlens die op een productafbeelding wordt toegepast en de ingezoomde afbeelding aan de rechterkant laat zien.
  • De zoom toegepast op een productafbeelding, waarbij de ingezoomde afbeelding over dezelfde afbeelding wordt weergegeven.
  • Kies het aantal items dat de schuifregelaar moet weergeven, de afbeeldingsminiaturen passen in de beschikbare breedte.

Installatie

Belangrijk: Allereerst moet je de WooCommerce-plug-in downloaden en activeren, wat voor Yith WooCommerce Zoom Magnifier verplicht is om te werken.

  1. Unzip de gedownloade zip file.
  2. Upload de plug-in map in de map wp-content / plugins / van je WordPress-site.
  3. Activeer YITH WooCommerce Zoom Magnifier van plug-inpagina

Configuratie

YITH WooCommerce Zoomvergroter voegt een nieuw tabblad toe met de naam “Zoomvergroter” in het menu-item “YIT-plug-ins”. Daar vindt je alle Yithemes-plug-ins met snelle toegang tot de instellingspagina voor invoegtoepassingen.

Leave a Reply

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