Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • #1189700

    Hello,

    we have problems with the hover effect on product pages. Sometimes it works, sometimes not. I checked everything and don’t find any differences:

    This is a product created about 3 years ago, it works – like any other “older” product: https://vandyckkaffee.de/produkt/keramikmuehle-skerton/

    This is a not working product: https://vandyckkaffee.de/produkt/after-work-coffee-club/, looks like the zoom and the hover effect are showing up at the same time. It was created in October 19.

    First I thought, older products work and newer not, because of an update. But today I tested another product, and it works: https://vandyckkaffee.de/produkt/geschenke-bundle-cold-brew/. Then another one, and it works not: https://vandyckkaffee.de/produkt/filterroestung-verde/

    I don’t find any rule when it works and when not, which makes it difficult.

    Enfold is on the newest version, shop options say WooCommerce 3.0 product gallery. WooCommerce runs on 3.8.2 (we can’t update that because of another problem).

    Does anyone have a solution for this?

    Thanks
    Dirk

    #1189899

    Hey Dirk,

    Your JS files seem to be cached, what happens if you clear that or disable the plugin which is caching resources on your site?

    Best regards,
    Rikard

    #1189999

    Hi Rikard,

    that unfortunately doesn’t solve the problem. I deleted the cache before, and now I deleted the entire WP Rocket plugin and all files in /wp-content/cache. One thing changed: https://vandyckkaffee.de/produkt/geschenke-bundle-cold-brew/ doesn’t work anymore.

    The performance section of Enfold as well doesn’t combine JS.

    I’m a bit at a loss here …

    Thanks
    Dirk

    #1190187

    Hi Dirk,

    Best regards,
    Victoria

    #1190350
    This reply has been marked as private.
    #1190723

    Hi Dirk,

    Thanks for the update. We’ll keep this thread open for you in case you should need any further help from us.

    Best regards,
    Rikard

    #1195247

    Hi Rikard and Victoria,

    Update: header.php and footer.php of the child theme are OK.

    But we recognized that the Plugin WP Upload Size adds several unknown HTML-Attributes to the product gallery images (as “data-o-largeimage_large”). I deactivated this plugin, and uploaded the images for the After Work Coffee Club again. The spooky HTML-attributes disappeared, now it works fine on Windows (Chrome 80.0.3987.149 and Firefox 74.0).

    BUT: MacOS (Catalina) shows the same misbehaviour as before. We tested on three different devices in different networks in different locations in different browsers. So it’s no cache issue. Are there known MacOS issues?

    Please check: https://vandyckkaffee.de/produkt/after-work-coffee-club/

    Thank you,
    Joe (for Dirk & VanDyck)

    #1195318

    Hi,
    Thank you, I took a look at your page and found that when hovering over your product image on the right side the mouse changes size quickly and the flickering of the background image occurs, I thought this was due to some javascript, but when I add this css it all stops and behaves correctly:

    #top.postid-107581 .product-images:hover .woocommerce-product-gallery__image {
        width: 100%;
        height: 100%;
    }

    Please add this css and clear your browser cache and check, it will only effect the one page.

    Best regards,
    Mike

    #1195461
    This reply has been marked as private.
    #1196081

    Hi,
    Please try adding the css code in the General Styling > Quick CSS field, and then clear your browser cache and any cache plugin, and check.
    Whenever you add css to your style.css of your child theme you need to rebuild your compressed css by re-saving your Quick CSS.

    Best regards,
    Mike

    #1196084
    This reply has been marked as private.
    #1197667

    Hi,
    You said you are not able to update woocommerce or the other woo plugins?
    I see your child theme has many scripts and files, have you tried activating the parent theme “enfold” to see if this continues without the scripts & files?
    I noticed that on the pages that the Zoom is acting up the image doesn’t have the class “zoomImg” or the role “presentation”
    Please see the screenshots in Private Content area.

    Best regards,
    Mike

    #1197725
    This reply has been marked as private.
    #1198004

    Hi,
    I see the flickering on this product with Chrome on Windows.
    The image here is using the zoomImg class, as outlined here
    It is also the only product that I find that has two other images in the product image set, but neither are shown on “onmouseenter” or “onmouseleave”, most of your products seem to be like this one with only one image and no hover effect.
    When the option “WooCommerce 3.0 product gallery” is picked in the “Shop Options” the default action is the “zoomImg” when the “Default enfold product gallery” is picked then the product image has no hover effect but when clicked it opens in a lightbox.
    So I don’t see any settings to add another set of images that uses a hover effect to your product images, are you sure this is not added via a plugin or script?
    Perhaps this is a conflict with the latest Enfold and your older woocommerce which you said you can’t update or one of your scripts?
    Have you tried activating the parent theme “enfold” to see if this continues without the extra scripts & files from your child theme?
    Best regards,
    Mike

    #1198016
    This reply has been marked as private.
    #1198305

    Hi,
    Very good then, we will close this then. Thank you for using Enfold.

    For your information, you can take a look at Enfold documentation here
    For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)

    Best regards,
    Mike

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

The topic ‘Hover effect doesn't work correctly on products’ is closed to new replies.