Change image on hover and click instead of just ckick

This topic has 31 replies, 1 voice, and was last updated 4 years, 2 months ago by Artem Temos.

Viewing 30 posts - 1 through 30 (of 32 total)

1 2 →

Author

Posts
February 15, 2019 at 7:45 pm #107778

bigdrop
Participant

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

February 16, 2019 at 7:15 am #107821

Elise Noromit
Member

Hello,

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

Best Regards

February 17, 2019 at 6:22 pm #108006

bigdrop
Participant

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

February 17, 2019 at 6:52 pm #108010

bigdrop
Participant

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

February 18, 2019 at 6:54 am #108057
Artem Temos
Keymaster
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
February 27, 2019 at 1:19 pm #110082

bigdrop
Participant

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?

February 27, 2019 at 1:36 pm #110085

bigdrop
Participant

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

February 27, 2019 at 1:52 pm #110089

Artem Temos
Keymaster

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

February 28, 2019 at 6:57 am #110177

bigdrop
Participant

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

February 28, 2019 at 7:29 am #110185

Artem Temos
Keymaster

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

March 15, 2019 at 6:53 pm #113235

bigdrop
Participant

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

March 15, 2019 at 7:18 pm #113236

bigdrop
Participant

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

March 15, 2019 at 9:39 pm #113254

Artem Temos
Keymaster

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

March 16, 2019 at 11:41 am #113308

bigdrop
Participant

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.

March 16, 2019 at 2:53 pm #113335

Artem Temos
Keymaster

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

March 18, 2019 at 8:26 am #113523

bigdrop
Participant

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.

March 18, 2019 at 8:59 am #113530

Artem Temos
Keymaster

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

March 18, 2019 at 9:33 am #113540

bigdrop
Participant

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.

March 18, 2019 at 9:47 am #113544

Artem Temos
Keymaster

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

September 23, 2020 at 10:44 am #228411
bigdrop
Participant
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?
September 23, 2020 at 10:47 am #228413

bigdrop
Participant

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

September 23, 2020 at 12:18 pm #228457

Artem Temos
Keymaster

Hello,

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

Kind Regards

September 23, 2020 at 6:43 pm #228553

bigdrop
Participant

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?

September 24, 2020 at 7:27 am #228636

Artem Temos
Keymaster

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

September 24, 2020 at 9:31 am #228680

bigdrop
Participant

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

September 24, 2020 at 11:32 am #228681

Artem Temos
Keymaster

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

September 24, 2020 at 12:38 pm #228740

bigdrop
Participant

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

Can you check again?

September 24, 2020 at 12:56 pm #228746
Artem Temos
Keymaster
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();
	}
});
```
September 24, 2020 at 1:52 pm #228756

bigdrop
Participant

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

September 24, 2020 at 2:01 pm #228760

Artem Temos
Keymaster

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

Posts

Viewing 30 posts - 1 through 30 (of 32 total)

1 2 →

The topic ‘Change image on hover and click instead of just ckick’ is closed to new replies.

Change image on hover and click instead of just ckick

Attachments:

Create your WordPress website.