Download WooCommerce Image Hover

This plugin is available from, 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
      $('.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_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

    • 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 repo? Download plugin here – WooCommerce Image Hover Plugin
      – can you provide a link to your site?


  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.


  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.

  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?

  5. 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:

    And also on the Home page of that site.

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>

This site uses Akismet to reduce spam. Learn how your comment data is processed.