Download WooCommerce Image Hover
This plugin is available from WordPress.org, download WooCommerce Image Hover.
Warning: WooCommerce Image Hover Disables Functionality
With WooCommerce 3.0+ and the new image slider, for this plugin to work I needed to disable some of the new features and I feel that we should embrace the new features as they are more mobile friendly.
A common request on WooCommerce builds is to add a mouseover or hover event on the thumbnail image so it replaces the main product image. Here is how I did it on a recent build for Punch Fitness Equipment and hopefully it will work for you as well with just a little jQuery.
Step 1: You Need A File To Place Your jQuery Mouseover / Hover Snippet
Depending on your theme you may already have a file that you can use to place your jQuery to create the mouseover / hover affect. If not, create a file, in this example I call the file theme.js and place it in a js within your theme. Once you have created the file place the following code in your themes functions.php file to load your newly created theme.js file.
function YourUniqueID_add_enqueue_scripts() {
wp_enqueue_script( 'theme_js', trailingslashit( get_stylesheet_directory_uri() ) . 'js/theme.js', array( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'YourUniqueID_add_enqueue_scripts' );* Note: In the above function, the text “YourUniqueID” in the lines that start with function and add_action should be replaced with a prefix that is unique to you, eg, your name.
Step 2: The Thumbnail Mouseover / Hover Magic
The below is the code snippet that you will need to add to the file you just created, or a .js file that already exists within your theme.
jQuery(document).ready(function($) {
// Get the main WC image as a variable
var wcih_main_imgage = $( 'a.woocommerce-main-image' ).attr( 'href' );
// This is what will happen when you hover a product thumb
$(".thumbnails a").hover(
// Swap out the main image with the thumb
function() {
var photo_fullsize = $(this).attr('href');
$('.woocommerce-main-image img').attr('src', photo_fullsize);
},
// Return the main image to the original
function(){
$('.woocommerce-main-image img').attr('src', wcih_main_imgage);
}
);
} );Hopefully you now have a nice little mouseover / hover event on your WooCommerce product thumbnails that replaces the main product image like the below screenshots. The first image is how the page loads (pink glove) and when you hover over a thumbnail(black glove for example), the main image is replaced by the thumbnails full image.
User Update: Marc (you can see his comment below) dropped me an email to let me know if anyone is interested he found it also best to hide woocommerce’s lightbox on mobile devices. To do this, find the media query for the device sizes you want to hide the lightbox and add the following code:
div.pp_overlay,
div.pp_pic_holder {
display:none !important;
}Thanks Marc.
Marc says:
Hey Bradley,
great post, exactly what I was looking for!
regards,
Marc
Kévin Lemonnier says:
Pretty Good,
Sorry do you have an idea to get the lightbox on click and on hover just change the main image?
Thanks
Kévin Lemonnier says:
I got it only removing the CSS. Thanks
Kévin Lemonnier says:
Do you have an idea how to get back the original main image on mouseleave. Thanks
pinkfloyd says:
great post, works.
Thanks
BradleyJ says:
I have had a few requests on how to get the original main image back when you are no longer hovering over a thumbnail so I have updated my code above to do just that. This will also be released as a plugin on WordPress.org
mmoore5553 says:
Where is the plugin on wordpress.org ?
Advitya says:
I am impressed by your plugin. But it is not working with my site.
BradleyJ says:
Hi Advitya,
Can you give me a little more detail and we can see if we can get this working for you?
– what theme are you using?
– did you try and implement the code yourself or use the plugin from the wordpress.org repo? Download plugin here – WooCommerce Image Hover Plugin
– can you provide a link to your site?
Cheers
Brad
Meagan says:
Hi,
unfortunately your plugin does not work at all on my site. Iam using Virtue premium theme. Could you help me on how to figure out why it is not working?
Thanks, Meagan
Bradley D says:
Hi Meagan,
Thank you for checking out my plugin. It looks like the theme you are using doesn’t wrap the images in the standard class required to make the plugin work. If you get in contact via the contact form I should be able to help you out.
Cheers
Brad
Meagan says:
Hey Bradley,
I just did!
Best wishes,
Meagan
Matt says:
hey.
great plugin. it is working if all images have the same size (product image and thumbnails are quadratic). I have one setup on my page where the main product image has an other size (rectangular 424x600px) and the thumbnails are quadratic (180x180px). When hovering the entire page is flickering!
Do you have an idea / solution???
Many thanks in advance.
Matt
Thomas says:
Hi Bradley! I’m using your plugin along with WooThemes “WooCommerce Additional Variation Images”, and it seems like these 2 plugins aren’t compatible. It works fine without the Additional Variation plugin, but as soon as I activate it it doesn’t work.
I really need the other plugin to show multiple different images per variation, so do you know if there’s anything to do to make them work together?
Neville Nicholson says:
Not really the problem discussed above, but I am experiencing a similar issue with product images displaying only on hover. You first see just a blank space.
I am using Avada theme and Smush..
You can see the problem at:
aonnertrading.com/product/lavender-and-rosemary-oil/
And also on the Home page of that site.