Want to make your WooCommerce online store more interactive and appealing? 💻 The image swap effect on product hover is a stylish and simple solution that enhances user experience and sets your site apart from competitors! 😎 In this article, we’ll walk through how to implement this feature using code.

Why Add an Image Swap Effect? 🤔

• Improved UX: Customers see more product details without extra clicks.
• Increased Engagement: Interactive elements capture attention.
• SEO Benefits: Unique functionality and better UX can reduce bounce rates, positively impacting search engine rankings.
• Competitive Edge: This effect makes your store memorable! ✨

What Do You Need to Get Started? 📋

1. WooCommerce: Ensure the plugin is installed and active.
2. Image Gallery: Each product must have at least two images — a main image and one in the gallery.
3. Access to Theme Editing: Via functions.php or a plugin like Code Snippets.
4. Basic CSS and PHP Knowledge: Don’t worry, we’ll explain everything step-by-step! 😊

Step-by-Step Guide to Adding the Image Swap Effect 🛠️

🧩 Step 1: Ensure the Product Has a Gallery

For the effect to work, each product must have:

• Main Image (uploaded in the product settings).
• Image Gallery (add at least one additional image in the “Gallery” section in the admin panel).

If a product has only one image, the effect won’t work since a second image is needed for the swap. Check this in the WooCommerce admin panel! 🔍

🧑‍💻 Step 2: Add PHP Code to Display the Second Image

This code adds the second image from the gallery to the HTML markup of the catalog page but keeps it hidden until the mouse hovers over it.

Add the following code to your theme’s functions.php file or use a plugin like Code Snippets for convenience:

add_action( 'woocommerce_before_shop_loop_item_title', 'add_second_product_thumbnail', 11 );

function add_second_product_thumbnail() {
    global $product;

    $attachment_ids = $product->get_gallery_image_ids();

    if ( isset( $attachment_ids[0] ) ) {
        $secondary_image = wp_get_attachment_image_src( $attachment_ids[0], 'woocommerce_thumbnail' );
        if ( $secondary_image ) {
            echo '<img class="secondary-image" src="' . esc_url( $secondary_image[0] ) . '" style="display: none;" />';
        }
    }
}

What does this code do?

• Uses the woocommerce_before_shop_loop_item_title hook to insert the second image into the markup.
• Checks if there’s an image in the gallery and, if so, adds it with the secondary-image class and hides it using display: none.

🎨 Step 3: Add CSS for the Hover Effect

Now, style the images so that the main image disappears and the second one appears with a smooth transition on hover. Add the following CSS code to your theme’s style.css file or the “Additional CSS” section in the theme settings:

.woocommerce ul.products li.product {
    position: relative;
}

.woocommerce ul.products li.product .secondary-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transition: opacity 0.3s ease;
    opacity: 0;
    z-index: 1;
}

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

.woocommerce ul.products li.product:hover .woocommerce-loop-product__link img {
    opacity: 0;
}

What does this CSS do?

• .woocommerce ul.products li.product: Sets positioning for the product container.
• .secondary-image: Hides the second image by default and applies a smooth transition (transition).
• On hover (:hover), the second image becomes visible, and the main image is hidden.

✅ Result

Now, when a user hovers over a product card in the catalog:

1. The main image smoothly fades out.
2. The second image from the gallery appears with an animation. ✨

The effect works on all catalog pages, including WooCommerce Products widgets, as long as they use the standard template and the woocommerce_before_shop_loop_item_title hook.

💡 Helpful Tips

• Theme Adaptation: If your theme uses non-standard classes, check them using the browser’s code inspector and adjust the CSS selectors (e.g., .woocommerce-loop-product__link img).
• Image Optimization: Ensure images are optimized for the web (size up to 300 KB, WebP or JPEG format) to keep page loading fast. This is crucial for SEO! ⚡
• Testing: Test the effect on different devices. Hover effects don’t work on mobile devices, so consider adding touch support (e.g., via JavaScript).
• Backup: Before editing functions.php, create a backup of your site. 🛡️