Introducing WooCommerce Product Image Flipper


It’s time for another WooCommerce plugin! This one introduces a nifty little feature that I’ve seen showcased in several ThemeForest themes. However, I always felt it really should be a plugin rather than a theme feature. And so, the WooCommerce Product Image Flipper was born.

It’s a very simple plugin really. It takes the first image in your product gallery (excluding the featured image) and displays it (along side aforementioned featured image) in product categories / archives. This secondary image is revealed on hover.

WooCommerce Product Image Flipper reveals a secondary image on hover.

WooCommerce Product Image Flipper reveals a secondary image on hover.

This plugin is perfect for displaying shots of clothing and allowing the user to flip it over to see it from the back (hence the name). There are probably many other useful applications as well though :-)


Download Now

34 thoughts on “Introducing WooCommerce Product Image Flipper

  1. Love the plugin! Would it be possible to have the images flip horizontal like this theme does?

  2. James

    thanks for this – can I send you a few bucks to tell why this won’t fire on the demo here?

  3. Great website, and I appreciate the plugin! I can’t seem to get the Image Flipper to behave correctly on the website I’m working on:

    -The images seem to display at 65% on hover and the full flip doesn’t take effect until the cursor is off the image.

    Any help would be greatly appreciated, Best-

    James S.

    • I think it’s because your theme sets all images to 65% opacity on hover. It’s doing this via jQuery so take a look in the theme js files for that and remove it.

      • My thanks is long overdue, THANK YOU, That was exactly the issue. I found it it the jquery.custom.js file.

        The plugin is still working beautifully with the newest version of WooCommerce-

        • Hi Jay & James,

          I have the same issu than you with a problem in my jQuery.

          Could you tell me what exactly is the line that you have change to get the plugin work ?

          Best regards,

  4. Hi Jay, Can i modify the css of your plugin “WooCommerce Product Image Flipper” and distribute it in my commercial theme on Themeforest?

  5. hey jay, i’ve been looking for something like this! thank you!!

    i’m just wondering if it’s possible to use a custom field image instead of the first one of the gallery. i use a specific image for the product image (and another for the hover image) and have different images for the gallery.

  6. As you mentioned ” you should be aware that this plugin uses CSS 3d transforms and will therefore only work in modern browsers.”
    wont it work with IE9?

  7. Hi James,

    Absolutely great work and a plug-in I’ve been looking for forever!! Many many thanks first, and hope you can help me out here.

    Somehow the hover effect doesn’t seem to work with my site (I’m using Newcastle woocommerce theme) and the second images are shown now right under the featured images. Any idea why and how I can fix that?

    Much appreciated!

  8. once i have activated the plugin, how to put it inside a page?? pls help.

  9. Hi, Jay,
    I’ve been looking for this functionality for a while. A couple of questions:

    Can it be tweaked so it yields something like this:

    My site is:

    Can you help me with the actual CSS tweaking if I I pay your rate to fix?

  10. Is it possible to remove the animation so that it just changes the images instead of fading up and down?


    • Hi,
      Did you manage to change the animation?

      • You can do this by editing the CSS file that is included with the plugin, and removing all

        -webkit-transform: translateY(-20px);
        -moz-transform: translateY(-20px);
        -o-transform: translateY(-20px);
        transform: translateY(-20px);

        statements. Hope that helps!

  11. Hi,

    the second image shown when I’m hover is enlarged 120%.
    I did not find any CSS causing this.


  12. Hi, I think your plugin is amazing!

    But I need the image go back to the first after a few seconds. I want the transition does not stop in the second image, conversely, I would like this return to the first image. Is it posible?


  13. Hello, I installed a free theme woocommerce “My Style” on localhost on my computer when I installed your plug-in Image Flipper, the plug-in does not work! The image is always static, why?


  14. Flipping to reveal a video would also be a nice addition.

  15. Hi – I am wondering if there is a way to get an image from the parent category (that would show on hover) instead of a gallery image? Has anyone tried anything like that?

    thanks thanks thanks,

  16. Great plug-in, but instead of the fading or smooth transition, the image bounces two or three times for about a quarter second before showing the next image. When the cursor is moved away so that the original item returns, the bounce happens again.

    I am guessing this is not the way it is supposed to be. Any guesses on what is happening here? Any help would be greatly appreciated. Thank you!

  17. Hi James,

    installed your plugin mate, but does not seem to function…have also left a support message tricky7001for help..

    when you get 5mins could you take a look for me please


  18. Hi James,

    Does not work mate,sorry left a message on your support tricky7001:

    hen you get 5 min could you look into it please

  19. Getting an error, seems to have a conflict with another plugin.

    Plugin could not be activated because it triggered a fatal error.
    Fatal error: Cannot redeclare plugin_init() (previously declared in /wp-content/plugins/woocommerce-new-product-badge/new-badge.php:26) in /wp-content/plugins/woocommerce-product-image-flipper/image-flipper.php on line 25

  20. Hi, plugin is working just fine on Superstore, except for the two featured product that I’ve decided to show on the home page. the product image dows not change on mouse over, but it is a kind of reflected, so I have the image 1 and image 2 one on top of the other, both completely visible at the same time.

    any idea how to solve this?

  21. when I hover over the image, it dissapears but no other image appears.

Leave a Reply

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