Not compatible with last version of wordpress

Looks like you now need the script to also update the srcset attribute as well as the src attribute on the main image. Hopefully the developer can update this soon as it’s a simple fix.

I changed it a little bit. It works for me now:

jQuery( document ).ready( function( $ ) {
	// Get the main WC image as a variable
	var wcih_main_imgage = $( 'a.woocommerce-main-image img' ).attr( 'src' );
	// This is what will happen when you hover a product thumb
	$( '.thumbnails a' ).mouseover(
		// Swap out the main image with the thumb

		// if you have the images all in the same size you could use this (with your own imige size) to save some data loading...
		function() {
			var photo_srcset = $(this).attr('href').replace('.jpg','-583x300.jpg');
			$( '.woocommerce-main-image img' ).attr( 'srcset', photo_srcset );
		}

		// ... otherwise use this
		//function() {
			//var photo_fullsize = $( this ).attr( 'href' );
			//$( '.woocommerce-main-image img' ).attr( 'srcset', photo_fullsize );
		//}

	);
	$( '.thumbnails a' ).mouseout(
		// Return the main image to the original
		function() {
			$( '.woocommerce-main-image img' ).attr( 'srcset', wcih_main_imgage );
		}
	);
});

I changed it again because it didn’t work in IE.

jQuery( document ).ready( function( $ ) {
	// Get the main WC image as a variable
	var wcih_main_imgage = $( 'a.woocommerce-main-image img' ).attr( 'src' );
	// This is what will happen when you hover a product thumb
	$( '.thumbnails a' ).mouseover(
		// Swap out the main image with the thumb

		// if you have the images all in the same size you could use this (with your own imige size) to save some data loading...
		function() {
			var photo_smallsize = $(this).attr('href').replace('.jpg','-583x300.jpg');
			$( '.woocommerce-main-image img' ).attr( 'srcset', photo_smallsize );
			$( '.woocommerce-main-image img' ).attr( 'src', photo_smallsize );
			//window.alert(photo_srcset);
		}

		// ... otherwise use this
		//function() {
			//var photo_fullsize = $( this ).attr( 'href' );
			//$( '.woocommerce-main-image img' ).attr( 'srcset', photo_fullsize );
			//$( '.woocommerce-main-image img' ).attr( 'src', photo_fullsize );
		//}

	);
	$( '.thumbnails a' ).mouseout(
		// Return the main image to the original
		function() {
			$( '.woocommerce-main-image img' ).attr( 'srcset', wcih_main_imgage );
			$( '.woocommerce-main-image img' ).attr( 'src', wcih_main_imgage );
		}
	);
});

And another update, now its with preloading the images. Also put this in your css: .hide { display: none; }

jQuery( document ).ready( function( $ ) {
	// preload images
	// if you have the images all in the same size you could use this (with your own image size) to save some data loading...
	$('.thumbnails a').each(function() {
		var photo_smallsize = $(this).attr('href').replace('.jpg','-583x300.jpg');
		$( "body" ).append( '<img src="'+photo_smallsize+'" class="hide">' );
	})

	// ... otherwise use this
	//$('.thumbnails a').each(function() {
		//var photo_fullsize = $(this).attr('href');
		//$( "body" ).append( '<img src="'+photo_fullsize+'">' );
	//})

	// Get the main WC image as a variable
	var wcih_main_imgage = $( 'a.woocommerce-main-image img' ).attr( 'src' );
	// This is what will happen when you hover a product thumb
	$( '.thumbnails a' ).mouseover(
		// Swap out the main image with the thumb

		// if you have the images all in the same size you could use this (with your own image size) to save some data loading...
		function() {
			var photo_smallsize = $(this).attr('href').replace('.jpg','-583x300.jpg');
			$( '.woocommerce-main-image img' ).attr( 'srcset', photo_smallsize );
			$( '.woocommerce-main-image img' ).attr( 'src', photo_smallsize );
		}

		// ... otherwise use this
		//function() {
			//var photo_fullsize = $( this ).attr( 'href' );
			//$( '.woocommerce-main-image img' ).attr( 'srcset', photo_fullsize );
			//$( '.woocommerce-main-image img' ).attr( 'src', photo_fullsize );
		//}

	);
	$( '.thumbnails a' ).mouseout(
		// Return the main image to the original
		function() {
			$( '.woocommerce-main-image img' ).attr( 'srcset', wcih_main_imgage );
			$( '.woocommerce-main-image img' ).attr( 'src', wcih_main_imgage );
		}
	);
});

Hi @webkelder, thank you very much for the code. Unfortunately it doesnt work for me. Any idea where I should look, plugin conflict?

Hi crashguru, can you give me the url of a page where this should happen? Thanks!

https://irinaafrica.tours/travels/namibia-windhoek-victoria-falls-self-drive/

Thanks!

Hi crashguru, the script (wcih.js) is not loaded on the page. Did you turn off the plugin?
By the way, I see that there has been an update of this plugin 2 weeks ago. When I look at the sourcecode of your page I think it should work without my customizations.

No, it doesnt, thanks!

Is the plugin active at the moment? When it is it should link to a javascript but thats not the case now.

I just activated it.

Ok the script is still not showing despite you activated it.
So maybe you better disable and remove the plugin then and:

1) make a directory in your theme or child theme named ‘js’ (if not already exists)

2) make a file called ‘theme.js’ and put it in the directory ‘js’

3) put this code in the file ‘theme.js’:

jQuery( document ).ready( function( $ ) {
	// preload images
	$('.thumbnails a').each(function() {
		var photo_fullsize = $(this).attr('href');
		$( "body" ).append( '<img src="'+photo_fullsize+'" class="hide">' );
	})

	// Get the main WC image as a variable
	var wcih_main_imgage = $( 'a.woocommerce-main-image img' ).attr( 'src' );

	// Swap out the main image with the thumb
	$( '.thumbnails a' ).mouseover(
		function() {
			var photo_fullsize = $( this ).attr( 'href' );
			$( '.woocommerce-main-image img' ).attr( 'srcset', photo_fullsize );
			$( '.woocommerce-main-image img' ).attr( 'src', photo_fullsize );
		}
	);

	// Return the main image to the original
	$( '.thumbnails a' ).mouseout(
		function() {
			$( '.woocommerce-main-image img' ).attr( 'srcset', wcih_main_imgage );
			$( '.woocommerce-main-image img' ).attr( 'src', wcih_main_imgage );
		}
	);
});

4) put this in your theme or child theme style.css file:

.hide { display: none; }

5) put this in your theme or child theme functions.php

// javascript image hover
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' );

Awesome … ??
Thank you very much! Are you a freelancer?
May be you send us your email? info at irinaafrica.com

Thanks again!
Reinhard

Great! Glad I could help!
I sent you an email.

@webkelder did you get it working?