How to Implement Product Hover Effect in WordPress (WooCommerce): Show First Image Normally, Second Image on Hover

In WooCommerce shop pages, category pages, and other product archive/list views, the default behavior is to display only the product’s featured (main) image. To achieve the effect where the second product image (usually the first image in the product gallery) appears on mouse hover, here are the most common methods, ranked from easiest to more advanced:

1. Easiest Recommendation: Use a Free Plugin (No Coding Required)

• Plugin Name: Secondary Product Image for WooCommerce (Free plugin on WordPress.org, still actively maintained as of 2025)
• Why it’s recommended:
  • Specifically designed for this feature: automatically uses the first additional image in the product gallery as the second image.
  • Smooth fade-in/fade-out transition on hover.
  • Performance-optimized: the second image loads only on hover.
  • Works out of the box with minimal configuration.
• Steps:
  1. Go to Dashboard > Plugins > Add New > Search for “Secondary Product Image for WooCommerce” > Install and activate.
  2. When editing a product: set the main image as the Featured Image, and upload the second image to the “Product gallery”.
  3. Save and test the hover effect on the shop page.
• Other similar free/paid plugins:
  • Magni Image Flip for WooCommerce (free, with various flip animations).
  • WowStore Product Image Flipper (paid, more advanced effects).

2. Check if Your Theme Has Built-in Support

• Many WooCommerce themes (e.g., Flatsome, Astra Pro, Botiga Pro, GeneratePress Premium) include a native “secondary image on hover” option.
• How to check:
  • Go to Dashboard > Appearance > Customize > WooCommerce section, look for “Product Catalog” or “Image Hover” settings.
  • Enable the “Secondary Image on Hover” or “Image Swap” toggle (requires products to have gallery images).

3. Custom Code Implementation (For Users with a Child Theme)

If you prefer not to use plugins, add code to your child theme’s functions.php for a fade transition effect.

Steps:

1. In the product editor, upload at least one additional image to the “Product gallery” (the first gallery image becomes the second hover image).
2. Add this code to your child theme’s functions.php:

PHP

// Add secondary image to product loop
add_action('woocommerce_before_shop_loop_item_title', 'display_secondary_product_image', 10);
function display_secondary_product_image() {
    global $product;
    $attachment_ids = $product->get_gallery_image_ids();
    if ($attachment_ids && isset($attachment_ids[0])) {
        $secondary_image_id = $attachment_ids[0];
        echo '<img src="' . wp_get_attachment_image_url($secondary_image_id, 'woocommerce_thumbnail') . '" class="secondary-image" alt="' . get_the_title() . '">';
    }
}

3. Add this CSS (Dashboard > Appearance > Customize > Additional CSS):

CSS

ul.products li.product {
    position: relative;
    overflow: hidden;
}
ul.products li.product .woocommerce-loop-product__link img:not(.secondary-image) {
    transition: opacity 0.5s ease-in-out;
}
ul.products li.product .secondary-image {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}
ul.products li.product:hover .woocommerce-loop-product__link img:not(.secondary-image) {
    opacity: 0;
}
ul.products li.product:hover .secondary-image {
    opacity: 1;
}

• This creates a fade-out of the main image and fade-in of the second image. Adjust class names if your theme uses different ones (inspect with browser dev tools).