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

    Hi!

    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{

    width:96%;
    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?

    #187967

    Hi Erik!

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

    Best regards,
    Yigit

    #188284

    Hi Yigit!

    You can view it here: http://polyfieldhill.com/

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

    / Erik

    #189204

    Hi!

    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;
    width:114%;
    left:-9%;
    -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);
    }

    Regards,
    Devin

    #189226

    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,
    Erik

    #190084

    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.

    #190321

    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.

    #190335

    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.

    Regards,
    Erik

    #190889

    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?

    #191782

    Hi!

    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: http://www.screenr.com/XP3H

    Cheers!
    Peter

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

You must be logged in to reply to this topic.