Single product – on click change picture

Hello,

my client wants in single product page that if he came with mouse on picture thumbnail he dont need to click thumbnail picture for change the main one. He wants that picture change at the time when u came with mouse on different thumbnail. Is there any possibility to change this thing?

Hello,

You will have to change the layout of the images in the Theme settings > Product page > Images.

Best Regards

Problem still not solved. If i change the layout its still the same – i have to click on picture for change.

When my mouse is on thumbnail i want to show picture on which is mouse without clicking on it

Hello,

Please add this code to the Theme Settings > Custom JS > On document ready:

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);
});

Best Regards

Great! It works. Thanks a lot for this because i tried something like this, but it didnt works:

document.querySelectorAll(‘.owl-stage’)[1].childNodes.forEach(item => {
item.childNodes[0].childNodes[0].addEventListener(‘mouseenter’, (event) => {
console.log(event)
item.childNodes[0].childNodes[0].click()
item.childNodes[0].click()
item.click()

})`

})

console.log(flexslider)`

You are welcome! If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts