Change image on hover and click instead of just ckick

Hi! On this demo page https://woodmart.xtemos.com/shop/?opt=filters_area the products on hover, show some variations. ex. color variations. When you click on the color circle the image changes, is it possible to create the same effect on hover and click instead of just click?

Thank you

Hello,

Unfortunately, there is no option to do that. It will work only on hover.

Best Regards

Before I purchased this item I asked you on the comments section if this is possible to do on your theme and you told me to purchase the theme and then contact you on the support forum so you will help me.

You can check my question and your answer on this comment https://themeforest.net/item/woodmart-woocommerce-wordpress-theme/20264492/comments?page=90&filter=all#comment_21227790

Can you provide the code that will make it work on hover?

Hello,

Add the following code snippet to the Custom JS section in Theme Settings

jQuery('body').on('mousemove', '.swatch-on-grid', function() {
	if(!jQuery(this).hasClass('current-swatch')) {
		jQuery(this).click();
	}
});

Regards

When I go to Theme Settings > Custom JS > add the above code
and save
The page refresh and the js disappear.

What might be the problem?

I added the code in the child themes script file but no luck.
I might

Try to clear your browser cache and check how the code works again.

Hi! I did clear the cache but I do not see any difference. It does nothing. Neither on hover or on click.

Here is how it works for us on your website https://gyazo.com/d2a3dd8170b5ffb516e5c972b3012390

Hi,

This is a variable product with different images per colour.
http://tsite.eu/sandals/product/spartiat-spartan-sandal/

When I hover over the colour, the images in gallery wont change.
If I click on colour the images will change.

Can you please provide me with a working js code that will make that happen?

Thank you

I have added the custom code that you have provided above, in the Custom Js section in Theme Settings.

You need to upload images for each variation like you did for this product http://tsite.eu/sandals/product/test-2/

I have added different images for different variation on this product http://tsite.eu/sandals/product/spartiat-spartan-sandal/
If you click on colour variation the images changes. But i need them to change on hover.

Even on this product http://tsite.eu/sandals/product/test-2/
when you hover on colour it do not change.

I want the images to change on hover.

Do you mean to change on the single product page? Sorry, but the code works on the shop page only.

The code does not work on the shop page either.

If you visit the shop page
http://tsite.eu/sandals/shop/

The product Spartiat – Spartan Sandal Prototype
has different images for different colour attribute.

But even if you hover on colour it does not change the colour.

Be sure that you have main image uploaded for each variation. Not only additional variation gallery images. But the main image too.

It does make the effect but I have another small problem.
When I add the main image instead of displaying the colour attribute image it will show the main image. How can I add the main image but instead show the attribute image?

Please check the attached file for more details.

Attachments:

You must be logged in to view attached files.

Try to disable “Use images from product variations” option in Theme Settings -> Shop -> attribute swatches.
https://gyazo.com/91832c62b9de2c4073a9a4a2c049133c

Hi,

the code that you provided me does not work any more.

jQuery('body').on('mousemove', '.swatch-on-grid', function() {
	if(!jQuery(this).hasClass('current-swatch')) {
		jQuery(this).click();
	}
});

As I mentioned on previous message:
On this demo page https://woodmart.xtemos.com/shop/?opt=filters_area the products on hover, show some variations. ex. color variations. When you click on the color circle the image changes, is it possible to create the same effect on hover and click instead of just click?

I guess this is because of the jquery update.
Can you please provide me with the new working code?

Hello,

Be sure that you place the code only once. We see duplicated instances of this snippet on your website.

Kind Regards

I do not think this is the case.
I created a staging site and I installed the “Enable jQuery Migrate Helper” plugin and the code above works as it should.

On my working site I tried to delete the above js code from Theme Settings > Custom Js (because you said that it appears two times) and it is till do not function as it should.

Is is safe to use the above plugin?

We can’t check this website because of this https://gyazo.com/f8e82aa1723cc8edbec2a8518137701e

I just disabled the coming soon plugin. You can check it now.

This website still has two instances of the code provided. Please, leave only one code.

I deleted the code from the Theme Settings > Custom Js.
I have also disabled the plugin “Enable jQuery Migrate Helper”.

Can you check again?

Try to replace the code with this one

jQuery('body').on('mousemove', '.swatch-on-grid', function() {
	if(!jQuery(this).hasClass('active-swatch')) {
		jQuery(this).click();
	}
});

Ok I did. But it still does not function as it should.

We still see the old code https://prnt.sc/un4is1

[Author]

Posts