How to Add a Second Product Image to WooCommerce Shop Pages – 2026

Adding a second product image to your WooCommerce shop, search, category, and archive pages can greatly enhance the visual appeal of your store. This feature allows your customers to see another view of the product when they hover over the product image, providing a more interactive and engaging shopping experience. In this guide, we’ll show you how to implement this functionality with a smooth transition effect.

Why Add a Second Product Image?

Adding a second image on hover can:

• Increase Engagement: By showing an additional image, you can capture your customers’ attention more effectively.
• Improve User Experience: Customers can quickly get more visual information about a product without having to click through to the product page.
• Boost Sales: A more dynamic and informative browsing experience can lead to higher conversion rates.

Step 1: Add the Second Image to Your Products

First, ensure that each of your products has a secondary image set up. You can do this by uploading the second image to the product gallery in the product edit screen.

1. Navigate to Products in your WordPress dashboard.
2. Edit a product.
3. Scroll down to the Product Gallery section.
4. Add a second image to the gallery.

Step 2: Add Custom CSS for the Image Transition

Next, we’ll add some custom CSS to handle the transition between the first and second images. This CSS code will be added to your theme’s stylesheet or the Additional CSS section in the Customizer.

1. Navigate to Appearance > Customize > Additional CSS.
2. Add the following CSS code:

/*
 * Snippet: How to Add a Second Product Image to WooCommerce Shop Pages – 2026
 * Author: John Cook 
 * URL: https://wcsuccessacademy.com/?p=1357
 * Tested with WooCommerce 10.7.0
 * "CSS for second product image transition on hover"
 */
ul.products li.product {
    position: relative;
    overflow: hidden;
}

ul.products li.product .attachment-woocommerce_thumbnail {
    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 .attachment-woocommerce_thumbnail {
    opacity: 0;
}

ul.products li.product:hover .secondary-image {
    opacity: 1;
}

Step 3: Modify the WooCommerce Loop to Include the Secondary Image

Now, we need to modify the WooCommerce loop to include the secondary image. This requires adding some custom PHP code to your theme’s functions.php file. If you don’t have a child theme, you can use our free child theme generator.

1. Open your child theme’s functions.php file.
2. Add the following code:

/*
 * Snippet: How to Add a Second Product Image to WooCommerce Shop Pages – 2026
 * Author: John Cook 
 * URL: https://wcsuccessacademy.com/?p=1357
 * Tested with WooCommerce 10.7.0
 * "Add secondary product image to WooCommerce loop"
 */
add_action('woocommerce_before_shop_loop_item_title', 'wcsuccess_display_secondary_product_image', 10);

function wcsuccess_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];
        $secondary_image_src = wp_get_attachment_image_src($secondary_image_id, 'woocommerce_thumbnail')[0];
        echo '<img src="' . esc_url($secondary_image_src) . '" class="secondary-image" alt="Secondary product image" />';
    }
}

Conclusion

By following these steps, you can easily add a second product image to your WooCommerce shop, search, category, and archive pages, enhancing the shopping experience for your customers. This simple yet effective customization can help showcase your products better and potentially boost your sales.

For more customisation tips and tools, don’t forget to check out our free WordPress child theme generator.

John Cook

I have been working with WordPress and WooCommerce since 2012 and have developed a deep knowledge of the content management system. Since 2012, I have developed several plugins and designed dozens of websites utilising different frameworks, CMS’s and programming languages. I am proficient in PHP, Python, Java, C, C++, R and JavaScript with limited experience in Go, Kotlin and Swift.

Educationally, I have a Master’s degree in cyber security a Bachelor’s (Hons, First Class) in Applied Research and a Graduate Certificate in Data Science.  I’m currently undertaking PhD studies investigating IoT cybersecurity. I recently graduated with First Class Honours and Masters of Information Technology, receiving the Executive Dean’s Award for studies undertaken in the 2021 and 2022 academic years. I have worked in the information technology industry for the past 11 years primarily as a software/web developer specific to design, optimisation, network management and security. My research interests are in the areas of Internet of Things (IoT), 5G and Beyond Networks, information security for wireless networks and software development.

See also  WooCommerce Product Add-Ons Without a Plugin - 2026