# 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.

- Type: PHP
- Runs: Run everywhere
- Category: [WooCommerce](https://wpide.com/library/category/woocommerce/)
- Requires: WooCommerce
- Tags: woocommerce, shop, images, hover
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/woo-image-swap-hover/

## Code

```php
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 use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Show the Second Product Image on Hover" in its snippet library and add it in one click; or create a new PHP snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/