Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
  • #187337


    I have disabled the “Add to cart” and “Show details”-button in product lists.
    How can I disable the hover-effect on product images for touch-devices? I’ve read on the forum that you could you use the following code:

    /* Hide the buttons */
    .avia_cart_buttons {
    display: none;

    /* No hover effect */
    .csstransitions #top .products .product:hover>.inner_product, #top .products .product.js_hover:hover>.inner_product{

    left: 0;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;

    But that still gives you a hover-state (but not visible) on for example iPad. This means that you have to click on the image twice (one to trigger hover and one for the link) to see the product.

    I would also like to do this tweak in a update-safe manner (for example via functions.php in my child-theme) so I won´t loose changes in the future.

    How can I do this?


    Hi Erik!

    Can you post the link to your website so we can take a look at it on our mobile devices?

    Best regards,


    Hi Yigit!

    You can view it here:

    Sometimes we set the site in maintenance mode, post me if you can´t view the start-page.

    / Erik



    As far as I know you wouldn’t be able to remove the double click since iOS renders hovers as a first touch.

    You could try removing the following from config-woocommerce>woocommerce-mod.css but I don’t really know if it will help or not:

    .csstransitions #top .products .product:hover>.inner_product, #top .products .product.js_hover:hover>.inner_product{
    z-index: 100;
    -moz-box-shadow: 	0px 0px 29px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0px 0px 29px rgba(0, 0, 0, 0.3);
    box-shadow: 		0px 0px 29px rgba(0, 0, 0, 0.3);



    Ok, thanks. If i remove this from config-woocommerce>woocommerce-mod.css and, in the future, update the theme – will I have to do this change over again?

    Best regards,


    Yes. I recommend keeping a personal change log of your own with the file location and lines that you’ve removed and then save it locally so you have it on hand for any future updates.


    Ok, it would be nice to do these kind of tweaks in a update-safe way, like if you could configure it in your own functions.php. Just a wish for a feature.


    I tried to remove the lines from in the woocommerce-mod.css but it didn´t work. Do you know if the hover-state is triggerd throw javascript? Or is it pure css? If it´s javascript, maybe I could disable it in some way.



    Yes it seems to be Javascript. Could I disable it in “js” => avia.js maybe? Which function triggers the hover-state on the product-thumbnails?



    No, afaik there’s no js code required and the hover effect is only done with css code. The code Devin posted above animates the grid hover effect and if you remove it the grid should be static. I tested it on your website and Devins suggestion seems to work for me and the hover effect doesn’t work anymore:


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

You must be logged in to reply to this topic.