Support » Plugin: WooCommerce » Instead image while hover mouse

  • Resolved TomQv

    (@qvantoan)


    Hello.
    I’d love to use Woo’s mouse hover feature, but I’m having a hard time because my image is PNG and the background is empty.
    When I hover the mouse over to view the product, there is a situation where 2 images are displayed at the same time as in the video.
    Can you change it by completely hiding the original display image when I hover over it?
    Thanks.

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Support abwaita a11n

    (@abwaita)

    Hi @qvantoan,

    The hover effect is most likely added by your theme.
    *You can follow the same steps of a conflict test to ascertain this, especially whether the hover effect is not present when you switch to another theme.

    In the event you confirm that it’s coming from your theme, you’ll want to get in touch with them for further assistance regarding the display of the images.

    I hope this helps.
    Thanks.

    Thread Starter TomQv

    (@qvantoan)

    Did you know that PNG image files will have some blank areas. With woo’s hover feature, it only displays the image below and inserts it on the image above, without completely hiding the original image.
    What I mean is that when hovering the mouse over the product to see, the original image will be completely hidden, not the 2nd image inserted on top of the 1st image. You know what I mean?
    I confirm that there is absolutely no conflict here, but the main cause is that the PNG image is empty in some places, leading to displaying 2 images at the same time.

    Plugin Support abwaita a11n

    (@abwaita)

    Thanks for getting back.

    Ideally, I wanted you to ascertain that the hover effect was coming from your theme. The most important part of the test would be switching to a different theme and disabling all other plugins apart from WooCommerce, just to confirm.
    If ascertained that it’s a feature from your theme, the theme author might have some other options to work around the issue.

    Nonetheless, have you also considered switching from PNG to JPG images?

    Since JPG images will add a background to cover the “empty” areas of the image, it should help with the visible overlapping display issue.

    Converting manually might take a while, but I’ve found a plugin that advertises a functionality to convert images from PNG to JPG: https://wordpress.org/plugins/png-to-jpg/.
    It is a third-party app, so use it with caution. I would recommend keeping a backup of your site before making the changes and trying it first on a staging site. More info on these precautions can be found in this backup and staging documentation section: https://docs.woocommerce.com/document/how-to-test-for-conflicts/#section-3

    I hope this helps.

    Thread Starter TomQv

    (@qvantoan)

    I don’t intend to change PNG to JPG, because my website needs to use PNG rather than JPG.
    I just want one thing that you will completely hide instead of using the feature to show the bottom image on the top image on hover. That’s all.
    I do not use any plugin related to this section.
    The problem is still unresolved, I will find a way myself. Anyway, thank you for spending time with me. Thanks

    Plugin Support abwaita a11n

    (@abwaita)

    Thanks for clarifying about the preference for PNG.

    I hope you’ll be able to find a way around the issue.

    *Remember to check with your theme author since the image swapping behavior on hover is not coming from WooCommerce.

    All the best.

    Plugin Support abwaita a11n

    (@abwaita)

    Hi,

    Just a heads up, since the thread has been inactive for a while, we’ll go ahead and mark it as resolved for the overall health of the forum. We hope the above info was helpful and you were able to make headway with the issue.

    If you have further questions, please feel free to open a new topic.

    Thanks.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Instead image while hover mouse’ is closed to new replies.