Cloud Zoom for woocommerce uses Cloud Zoom jQuery image zoom plugin

WooCommerce Cloud Zoom

Freebies, Plugin, WooCommerce, Wordpress Apr 29, 2012 30 Comments

This is the Cloud Zoom plugin for WooCommerce. It gives the ability to users to zoom in on your main product image by simply hovering the mouse over it

== Installation ==
1. Ensure you have latest version of WooCommerce plugin installed
2. Unzip and upload contents of the plugin to your /wp-content/plugins/ directory
3. Activate the plugin through the ‘Plugins’ menu in WordPress

Download it from WordPress Plugin Directory

top
  • Ravi

    Thanks a ton dude…

  • Adriano Matos

    Well, i must be doing something wrong.. I’ve install it, activated and still, it doesnt work.

    i have put a product to test it, but it won’t zoom anything.. :(

    • http://www.facebook.com/luthra.sunny Sunny Luthra

      ah.. I can’t say why it is not working, you have to check for any JS errors or else share the link with me so that i can have a look.

      • Adriano Matos

         I’ve got it to work (plugins were crashing each other) but it has a bug.. or i can’t do it well.. when i put the mouse over, it shows me one image larger between..

        • http://www.facebook.com/luthra.sunny Sunny Luthra

          which browser are you using?

          • Adriano Matos

             Firefox.. can it be another pluging conflict?

          • Adriano Matos

             Wow.. i’ve try to visit the website in IE but the zoom plugin doesn’t even work at all!

  • Gladnomad

    it’s working but one problem: how does it work with multiple images? the thumbnails can’t seem to be selected and zoomed

  • http://masjamal.com/ Mas Jamal

    Trouble. Why this happen?

    Fatal error: Call to undefined function is_product() in /home/tergilac/public_html/masjamal.com/wp-content/plugins/cloud-zoom-for-woocommerce/index.php on line 206 

  • Vince

    yep IE not working. by the way, anyone knows how to modify this from mouse click to mouse over – so that visitors do not need to click on the thumbnail to change to different photos? :)

    • Meeklog

      In order to get it to work in IE, you need to have seen the little note in the JS file:  ”We need the dummy background image as IE does not trap mouse events on transparent parts of a div. background-image:url(“.”)”.

      So basically, what i did was add a new class to the CSS file (/wp-content/plugins/cloud-zoom-for-woocommerce/css/cloud-zoom.css) to load a transparent pixel image:

      .mousetrap {background-image:url(‘/wp-content/themes/mytheme/images/spacer.png’)}

      Hope that helps!

      • meyolito

        Thank you!
        solved problem with IE

    • Meeklog

      Ignore the attached image — I thought I could save folks time by adding the spacer.png file, but it looks like it’s only offering a JPG download.  Oh well.

  • LH

    There’s a problem if the product has multiple images. The featured image is by default not showing in the thumbnails, therefore once users click to view another thumbnail, they have no way to get back to the featured image. Anybody got an idea how to change this?

  • http://www.facebook.com/TonyRebel12 Tony Davis

    Really like your plugin, Im using Flashlight theme with Woo Commerce plugin. Can I use the Cloud Zoom plugin for WooCommerce? If yes, what are the
    steps to make it work? I already installed and activated plugin.
     

  • Anonymous

    This looks very promising, but I’m facing a little problem.
    The moment I activate the plugin, I get an error.
    wp-contentpluginscloud-zoom-for-woocommerceindex.php on line 206

    • food

      hey there, on the plugin

      1)go to your cpanel

      2)log into your file manager

      3)go too>public html>wp content>plugins

      4)do you see the cloud zoom folder?

      5)click on it, and go to “change permissions”

      6)its a 3×3 box, you want to check 3×2 (leaving the last horizontal row blank)

      7)your permission should now be 666 (eek scary)

      8)save it, and walla

      a page that is working

      Hope i helped.

  • deepti

    please do check
    http://passionapparels.in/?product=91, the image, which you want to zoom, in the square box, image cannot be viewed

  • http://www.facebook.com/justin.bourne.378 Justin Bourne

    Hey guys, I’m having the same issue as Adriano Matos, with the preview area on the image not matching the what is actually being displayed in the zoomed section, I am using the woocommerce theme SMPL, this happens in Safari, Firefox, and IE, just not working correctly, it simply takes over the entire browser window. Any help would be apprieciates. Site http://www.velvetrythms.com.au/2012

    • mRova

      We are working on a new and improved version, will push the updates soon.

      • Johnny

        Any updates? I still see multiple images and not a zoom when I put my mouse on top of the images.. Please let us know. Thank you.

  • diver66

    Hi,
    is this plugin funtional now ?
    best regards

  • damond

    How do you change the color of the boarder around the zoom image?

  • Brian

    How do you get this to work?

  • Syl

    hi, i just installed your plugin, but there is a problem.
    the plugin, after installing changed the size of the additional images below the main image on my products page in woo commerce shop.

    the images are normally about 90×90, after intalling your plugin, they change its size to about 200×200 or thereabout.

    any idea why and how to fix it?

    at this point i need to disable it, as i dont like what it does to my products page.

    i will be greatful for your help

  • Sara

    I really like this plugin but I have a problem: when I hover over my image splits into four and I see four of the same instead of one zoomed in. My website is: test.wildatartatelier.com

    • Reza

      Check Your WooCommerce Version. I Had This Problem, So I Re-Instal Latest Version of WooCommerce and Problem Solved.