WooCommerce hover over image changes to first gallery image - Support

Tagged: woocommerce, WooCommerce flip image on hover

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

Author

Posts
March 2, 2025 at 2:48 pm #1478388
SHR Design
Participant
Hi

I am trying to figure out the correct code snippet to use for changing the main single product image on hover to the first gallery image.
Example this page: https://labhuset.no/product/fiocchetti-plasmafryser-30-40c/

I found this earlier thread: https://kriesi.at/support/topic/change-single-product-image-on-hover-with-gallery-first-image/
But found the code shared there unclear. It would be great with an update with a workable code.

Enfold has been used to customize all the single product pages in WooCommerce.
I am working on figuring out how to change images on hover (for the first gallery image) of the main product in the Single product page

2.
It would also be helpful to at the same time have the correct code to change images on hover in the shop page AND the archive page. Having the thumbnails seen change to the first gallery image.

Thank you!
- This topic was modified 23 hours, 46 minutes ago by SHR Design. Reason: A mistake in adding the word flip. It has been adjusted
March 2, 2025 at 5:26 pm #1478393
Mike
Moderator
Hey Silje,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:
```
.single-product .avia-image-overlay-wrap:hover {
transform: rotateY(180deg);
}
```
before hover:

on hover:

Best regards,
Mike
March 2, 2025 at 8:58 pm #1478410

SHR Design
Participant

Hey Mike

I appologize. I did not mean flip. I meant to change the single product main image for the first gallery image on hover.

So for the single product image. On hover change the main product image for the first gallery image.
+ To do so also for the thumbnails on the Shop and Archive pages.

Thanks.
Author

Posts

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

You must be logged in to reply to this topic.