Mouse Over / Image Flipper for Product Thumbnails?

[Lina]

HI Richard and thanks for your quick answer!
Exactly. When hovering over the Product Thumbnail normally the second image of the Product hovering over, should appear. What happens now is that all the product images get stacked over each other and the products overlap. Mouse over works, but it looks really bad haha. This is what the shop normally looks like:
Is there any way to fix that?
Thanks for your help!

[Richard]

Dear @Lina

Cool shop ⭐️ I see that the effect is switched off currently?

• Is there any time it would be active to get a better look? 🔍

If the images are stacking but mouseover function working there may be some simple CSS for image placement.

install TP Product Image Flipper for Woocommerce

Woocommerce, Lay Theme updated

Images stacking, but mouseover function working:

Lay Theme's CSS is applying position:absolute to the images, with it removed i get a the correct layout:

https://www.w3schools.com/cssref/pr_class_position.asp

You may wish to seek the aid of a developer to help you with this problem, but hope this sets them in the right direction ✅

---

Best wishes

Richard

[Lina]

Hi Richard! Cool, many thanks already! I will try that out (with help haha) and get back to you :-).

[Richard]

Thanks @Lina ! best of luck ⭐️

[felix_rabe]

This might resolve it with the tp image product flipper plugin, assuming all product images will have the same dimensions, without fiddling with the lay theme css.

 .tp-image-wrapper{
     aspect-ratio: 2/3;
 }

[arminunruh]

the replace image on mouseover feature for product thumbnails is on my todo list

[Lina]

@arminunruh cooool <3 <3

[tasio]

The same problem, I have installed the Image Flip For WooCommerce but it does not work well, I have tried with other plugins and none works correctly :(

How I can solve it?

Very grateful for all your work

:(

[alasdair17]

@tasio hey, sometimes external plugins don't work too well with laytheme but I think Armin said he will be working on an image flipper for laytheme woocommerce in the future.

[tasio]

@alasdair17 Oh thanks !

[arminunruh]

damn mmmh

[kumi.studio]

I'm also trying to do the same, and I feel like I've gotten pretty close, I just can't figure out the last bit: I've managed to get the next image in the gallery to show up and be positioned and sized appropriately, the only remaining issue is that it is showing up underneath the original thumbnail rather than replacing it:

I've modified the following thread to make it work a little better with lay theme as on its own causes similar problems as those shown above:

ORIGINAL THREAD

https://stackoverflow.com/questions/62088615/switch-product-image-on-hover-on-woocommerce-archive-page

MODIFIED PHP SNIPPET

add_action( 'woocommerce_before_shop_loop_item_title', 'add_on_hover_shop_loop_image' ) ;

function add_on_hover_shop_loop_image() {

$image_id = wc_get_product()->get_gallery_image_ids()[1] ;
$img_size = wc_get_image_size( $image_id, 'full' );

if ( $image_id ) {

    echo '<div class="product-thumb-hover">';
	echo wp_get_attachment_image( $image_id, 'full' ) ;
	echo '</div>';

} else { //assuming not all products have galleries set

echo wp_get_attachment_image( wc_get_product()->get_image_id() ) ; 

}

}

MODIFIED CSS

.product-thumb-hover img {
display: none;
}

.lay-product:hover .product-thumb-hover img {
display: block;
}

.woocommerce-LoopProduct-link img {
position: relative;
}

If you would like to view this live you can visit: https://structuremk.com/store/

I hope this helps either to figure out this issue I'm facing or to come up with a better solution

[kumi.studio]

**Edit

I've changed the CSS to the following and it works, it doesn't feel like the most elegant solution so please let me know what you think, but it seems to do the job for now:

.product-thumb-hover img {
display: none;
margin-top: -150%;
}

.lay-product:hover .product-thumb-hover img {
display: block;
}

.lay-product:hover .ph.lay-woocommerce-image img {
display: none;
}

.woocommerce-LoopProduct-link img {
position: relative;
}

[arminunruh]

i think you did a great job, it looks like it works well!

i will release an update today that will include this as a feature

[arminunruh]

and your website looks really great btw!

[kumi.studio]

@arminunruh oh really? brilliant! thanks Armin, loving using the theme

[kumi.studio]

@kumi-studio 1 last question, not sure if this is entirely related, but I couldn't find another post about it on the forum, currently there is no way to use video for either the thumbnails or in the product pages themselves right? would be super to be able to do so

[arminunruh]

oh yea its a great idea. shopify has this feature too. i will write it down!
at the moment i dont know if there is a way to do this mmh