Home Forums WoodMart – Premium Template Change image on hover and click instead of just ckick

This topic contains 18 replies, has 3 voices, and was last updated by Artem Temos Artem Temos 2 months, 1 week ago.

Viewing 19 posts - 1 through 19 (of 19 total)
  • Author
    Posts
  • #107778

    bigdrop
    Customer

    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

    Private Content Hidden
    #107821

    Hello,

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

    Best Regards

    #108006

    bigdrop
    Customer

    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
    Customer

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

    #108057

    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
    Customer

    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
    Customer

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

    Private Content Hidden
    #110089

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

    #110177

    bigdrop
    Customer

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

    #110185

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

    #113235

    bigdrop
    Customer

    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
    Customer

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

    #113254

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

    #113308

    bigdrop
    Customer

    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

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

    #113523

    bigdrop
    Customer

    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

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

    #113540

    bigdrop
    Customer

    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

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

Viewing 19 posts - 1 through 19 (of 19 total)

You must be logged in to reply to this topic.