Woocommerce shop page - hover to display variations

[Deesign]

Hi Team,

Hoping you can point us in the right direction for updating a woocommerce shop page so that each product image that includes a variation image will display that when you hover on the image. An example would be a shop full of shirts and on the /shop page you would see the front image of the shirt displayed but a mouse hover would display the variation image or back of the shirt - before clicking through to the product page. Is this possible?

[rad]

Hi @Deesign,

Thanks for reaching out.

That’s possible, but not by simple CSS or JS since it’s mostly Woocommerce customization, and it’s probably a custom development. A sample is this https://iconicwp.com/blog/show-variations-shop-page-woocommerce/#:~:text=Navigate%20to%20Products%20and%20then,shop%2Fcategory%2Fshortcodes)., just to include variation. Then another set of customization to make the hover functionality, and of course to pull the images, and there are variations that contain multiple images too which will make it more complex

But if it’s just displaying images upon hover, then I recommend using custom fields instead, where in custom field, you can just set hover images without relying too much on variation. This will make it simpler, just output the custom field value and hide it, then display it upon hover.

Thanks!