Show the Second Product Image on Hover
In shop listings, swaps the product image for the first gallery image when the shopper hovers over it, giving a quick second look.
Opens WPIDE on
Code
add_action( 'woocommerce_before_shop_loop_item_title', function () {
global $product;
if ( ! $product instanceof WC_Product ) {
return;
}
$gallery = $product->get_gallery_image_ids();
if ( empty( $gallery ) ) {
return;
}
echo wp_get_attachment_image( (int) $gallery[0], 'woocommerce_thumbnail', false, array( 'class' => 'wpide-hover-image', 'loading' => 'lazy', 'alt' => '' ) );
}, 11 );
add_action( 'wp_head', function () {
echo '<style>.woocommerce ul.products li.product a{position:relative;display:block;}.woocommerce ul.products li.product .wpide-hover-image{position:absolute;top:0;left:0;width:100%;height:auto;opacity:0;transition:opacity .3s;}.woocommerce ul.products li.product:hover .wpide-hover-image{opacity:1;}@media (hover:none){.woocommerce ul.products li.product .wpide-hover-image{display:none;}}</style>' . "\n";
} );Notes
Products without gallery images keep their single image.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.