You can now download this as a plugin from WordPress.org – WooCommerce Image Hover or read more about the WooCommerce Image Hover plugin

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.

Page loads with pink glove as main image.Mouseover the black glove

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.

  1. 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

    • 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

  2. 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

    • 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

  3. 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

  4. 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?

Leave a Reply

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

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>