A very simple plugin that adds a secondary product thumbnail on product archives that is revealed when you hover over the main product image.
This plugin is ideal if you’d like to display more than one image on product archives, and perfect if you want to display front and back images of clothing for example.
Please feel free to contribute on github.
Note: This plugin uses CSS 3d transforms to show/hide the images and will therefore only work in modern browsers.
- Activate the plugin through the ‘Plugins’ menu in WordPress
- How do I control which image is displayed on hover?
Whichever image is first in the order of product gallery images will appear on hover.
- My secondary image is taller than the main product image and overlaps content when it fades in
This is due to the secondary image being positioned absolutely. This is the cleanest way I can think to do this with CSS alone. You may want to consider hard cropping your product catalog thumbnails to ensure all images are the same dimensions in product archives.
- It doesn’t work. Nothing happens when I hover over images?
First of all check that the product you’re checking has a gallery attached to it. Secondly you should be aware that this plugin uses CSS 3d transforms and will therefore only work in modern browsers.
have not updated for 2 years? still working! wtf!
Contributors & Developers
“WooCommerce Product Image Flipper” is open source software. The following people have contributed to this plugin.Contributors
Interested in development?
- Fix – WooCommerce 2.7 compatibility.
- Tweak – Simpler image transition.
- Fix – WooCommerce 2.2 compatibility