Lay Theme Forum

@felix_rabe Thank you! :)

That's great, thanks Armin!

I'm still experiencing problems with this feature - Currently, I'm working on 2 different sites and both have the same situation:

• If I only add the image to the variable product section & NOT to the product gallery, it works as it is supposed to, however, the image which is being loaded when making the selection is very low quality
  example here: https://kumi.studio/product/last-objects-embroidered-cap/

• if I also add the variation images to the product gallery, the images show up in high quality, but then are not shown at the top of all images when you make a selection
  example here: https://structuremk.com/product/eco-leather-scrunchie/

would be great to solve this

@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 really? brilliant! thanks Armin, loving using the theme

**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;
}

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

@arminunruh Hey Armin, thanks for the reply, I've got an old mac so I stopped updating the os which only allows me to get up to version 103.0.5060.134 on Google Chrome.

Wasn't aware of lvh, but yea a fallback would be great.

the website I'm working on can be found here:

https://structuremk.com/

since the new update, browser height rows are not visible, I've found the bug shown in the screenshot here (there is a rogue 'l' in the unit measurements:

for now I've worked around it by adding the custom css:
._100vh, .fullpage-wrapper {
min-height: 100vh;
}

Also, not sure if this is related, but I also noticed that custom row heights are being given a minimum of 275.938px, so I've had to also add custom css to overwrite this, it seems like it shouldn't be there.