Disable mobile hover

Hi guys,

Is it possible trough css to disable the product hover (which shows add to cart for example) on mobile and make it with one click go to the product page?

Hi,

Try to add the following code snippet to the Custom JS area in Theme Settings to change this behavior

if( jQuery(window).width() <= 1024 ) {
    jQuery('body').on('click', '.woodmart-hover-base', function( e ) {
        window.location = jQuery(this).find('.product-element-top > a').attr('href');
    });
}

Regards

Hi Artem,

Thank you for you reply.

However the code is not resolving the problem.
I get multiple errors on the custom JS sheet.

Check my attached image for all the errors.

Strange, but we don’t see the code added to your source code. Could you please provide us your admin access so we can check it?

Sorry I deleted it when I checked if it worked.

I just found the issue, I copied the code from the mail directly this was my fault.
Now I copied the code from the code box above and it works.

When I click on a product it takes me directly to the product page.
But the only thing now is, when clicking on a product I still see the hover effect popping up, but it’s loading the new page at the same time and short after that it takes me to the product page.

Is there a way to completely disable the hover effect on those products on mobile?

Try to add the following code snippet to the Custom CSS area for mobile and tablet devices in Theme Settings to remove them

div.woodmart-hover-base.hover-ready.state-hover, 
div.woodmart-hover-base.hover-ready:hover {
   -webkit-transform: none;
   transform: none;
}

div.woodmart-hover-base .content-product-imagin,
.woodmart-hover-base .fade-in-block {
    display:none;
}

Great thank you Artem this fixed my issue!

Have a nice day!

Great, you are welcome!

We’ve copied this code also to our website. We’ve to click on the product twice before it opens.
Could you help us out?

Could you please describe your problem in more details and provide us some link where we can see the code added?

Hi,

We’ve added the code in : Custom CSS for tablet & Custom CSS for mobile in the theme settings.
Please visit our website. The link is in the private content.

Did you add JS code also?

Yes!

Try to put it to the custom JS on document ready event.

It’s working thanks!

Is it possible to display some custom text on the hover on desktop page?

Sorry, but it requires more customization of PHP and CSS template files and we don’t have a quick tip for this.

Ok thanks!

[Author]

Posts