Image Hover Change

Looking at the code, the product photos are displayed as a background image of div elements. There’s a way to swap the URL of those background images (like div.product-1:hover { background-image: url('../b.jpg'); }), but the CSS rule needs to be written for each image. You will also need to add a unique class to each div.

Or, one of these plugins could do the job for you.

WooCommerce Additional Variation Images (https://www.ads-software.com/plugins/woo-variation-gallery/)

TP Product Image Flipper for Woocommerce (https://www.ads-software.com/plugins/tp-product-image-flipper-for-woocommerce/)

Hello. Thank you for your response.

So adding a CSS is out of the question, since I am using a loop grid. However I tested the second plugin and it does not working on my end at least. The shop page still shows no image on hover. The first plugin unfortunely seems to only work on the product page itself, not the archive.

The hover effect is accomplished with CSS, but information on what image to show on hover has to exist somewhere else. And that information has to somehow relate to the existing thumbnail images so we know which image to display in place of which existing image.

Often the easiest way to do this is to have two images in HTML, both taking up the same position. Initially the upper layer one is hidden, but on hover it is made visible. You’d need to alter the HTML that’s output by the loop grid. Unfortunately, I’m not sure how to accomplish this with the loop grid.

I know that altering the archive template to generate HTML with PHP instead of the loop grid would work. Or use a custom shortcode instead of the loop grid block. Or you could develop your own bespoke loop grid block.

Yet another possibility is to use JavaScript to display another image on hover. The relation of hover image to static image would have to be defined in an JS array structure of some sort. This is where each div having a unique ID or class would be very useful. The JS array structure could be constructed using PHP as the archive grid is being output. But once again, I’m not sure how to do this with the loop grid. I’d want to rely on either a custom template or shortcode.

In short, the loop grid is probably contrary to you desired goal.

Thank you, I ended up using the product archive with a plugin that allows me to change the image.