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.
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
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.
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.
