Home Forums WoodMart support forum Change image on hover and click instead of just ckick

Change image on hover and click instead of just ckick

Viewing 30 posts - 1 through 30 (of 32 total)
  • Author
    Posts
  • #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

    #107821

    Hello,

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

    Best Regards

    #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

    #108010

    bigdrop
    Participant

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

    #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

    #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?

    #110085

    bigdrop
    Participant

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

    #110089

    Artem Temos
    Keymaster

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

    #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.

    #110185

    Artem Temos
    Keymaster

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

    #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

    #113236

    bigdrop
    Participant

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

    #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/

    #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.

    #113335

    Artem Temos
    Keymaster

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

    #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.

    #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.

    #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.
    #113544

    Artem Temos
    Keymaster

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

    #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?

    #228413

    bigdrop
    Participant

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

    #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

    #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?

    #228636

    Artem Temos
    Keymaster

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

    #228680

    bigdrop
    Participant

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

    #228681

    Artem Temos
    Keymaster

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

    #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?

    #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();
    	}
    });
    #228756

    bigdrop
    Participant

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

    #228760

    Artem Temos
    Keymaster

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

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

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