Single Product – Image Change on Hover

Hello,

I would like to change the main image on sigle product on the mouse is on the thumbnail.
So it have to change on the hove on the thumbnail.

Something simillar like on amazon single product pag.
Also I want to make the thumbnail small around 38×38 px.

For the hover image change I used the following code On Document Ready JS but it did not worked:

jQuery(document).on(‘mouseenter’, ‘.product-image-thumbnail:not(.active-thumb)’, function(){
var $thumbsOwl = jQuery(‘.images .thumbnails’);
var $mainOwl = jQuery(‘.woocommerce-product-gallery__wrapper’);
var i = jQuery(this).parent().index();
$thumbsOwl.trigger(‘to.owl.carousel’, i);
$mainOwl.trigger(‘to.owl.carousel’, i);
});

Can you help me with this workaround>

Hi theinnovatorssrl,

Thanks for reaching to us.

Unfortunately, there is no such an option right now and customization is out of basic support.

You can create a ticket here: https://woodmart.canny.io/feature-requests so our developers will consider such a feature.

Regards,

Hello,

I found this code in the response at the another ticket from other customer and for him code provided by you worked.

So can you help me to find out why it is not working on my website please?

jQuery(document).on(‘mouseenter’, ‘.product-image-thumbnail:not(.active-thumb)’, function(){
var $thumbsOwl = jQuery(‘.images .thumbnails’);
var $mainOwl = jQuery(‘.woocommerce-product-gallery__wrapper’);
var i = jQuery(this).parent().index();
$thumbsOwl.trigger(‘to.owl.carousel’, i);
$mainOwl.trigger(‘to.owl.carousel’, i);
});

Hi theinnovatorssrl,

1. The old one doesn’t work because we changed the carousel library. Please add the following code snippet to the custom JS on document ready in Theme Settings

jQuery(document).on('mouseenter', '.wd-gallery-thumb .wd-carousel-item:not(.wd-thumb-active)', function(){
	var $mainCarousel = jQuery('.woocommerce-product-gallery__wrapper');
	var i = jQuery(this).index();

	if($mainCarousel[0].swiper) {
			$mainCarousel[0].swiper.slideTo(i);
	}
});

2. You can create a ticket here: https://woodmart.canny.io/feature-requests so our developers will consider such a feature. And in the future we may add this functionality to our theme. As it is very convenient.

Regards,

It worked perfect!

Thank you very much!

Hi theinnovatorssrl,

Glad to hear your issue has been resolved. Keep us in mind for future questions and concerns, we’re always here to help!

If you have a quick minute we always appreciate a 5-star rating on our theme!

https://themeforest.net/item/woodmart-woocommerce-wordpress-theme/reviews/20264492

Your feedback is the motivation to improve our work and services.

Regards,

[Author]

Posts