Change a product image on hover with Bricks + WooCommerce

How to Swap an Image on Hover with WooCommerce and Bricks

Intro

Recently I was asked to replicate a popular Shopify effect on Haze Road, where the product image changes on hover. After a bit of research, I decided to dive in and see if I could get it working myself. The result? A pretty simple solution that’s also dynamic and easy to replicate. If you’re using WooCommerce and Bricks, this guide will show you how to add this slick effect to your website.

What You Need

• Bricks Builder
• Advanced Custom Fields (ACF)

Optional:

• WooCommerce (if you’re working with products)
• WP Codebox (to manage your custom JavaScript)

Setting Up the Structure

To demonstrate this, I’ll create a simple product grid, but you can adapt it to any image on your site.

1. Use a Query Loop
   • This is only necessary if you want the setup to be dynamic. I’m working with products, so I’ll set up a query loop to display them.
2. Wrap the Image
   • Make sure each image is inside a wrapper. If it’s not, put it inside a <div> and give it a class like .media-wrapper or .image-wrapper (I recommend using BEM for clarity, e.g., .product__image-wrapper). Trust me, it will make life easier in the future.
3. Add an Attribute
   • Add an attribute to your image called data-hover-image, and leave the value blank for now. We will populate this when we get to the ACF field.

Styling the Image

• Object Fit: Set the image to object-fit: cover.
• Aspect Ratio: Define an aspect ratio for your image. For a square, use 1 / 1.

Creating the ACF Field

If you want the hover effect to be dynamic, ACF makes this super simple.

1. Create a New Field Set
   • I like to name these based on the post type. In my case, I named it “Product Fields.”
2. Add an Image Field
   • Create an image field called “Product Hover Image” (replace “Product” with your custom post type if needed).
   • Make sure the slug reads product_hover_image (or modify it for your custom post type).
   • Set the conditions, so this field only appears for relevant post types (e.g., Products).

Adding the Hover Image Attribute

Now go back to the empty attribute (data-hover-image) you added earlier.

• Using Bricks’ dynamic data feature, add your ACF field with :url at the end. For example: {acf_product_hover_image:url}.
• If you’re not making this dynamic, simply add the URL of the image you want to display on hover for each individual image.

Adding the JavaScript

You can add this JavaScript either via WP Codebox or directly in your child theme. Here, I’ll show you the old-school way.

1. Create a Child Theme (if you don’t already have one)
2. Create Asset Folders
   • Create a folder called assets, and inside it, create a folder named scripts.
3. Create a JavaScript File
   • Create a file called swapImageOnHover.js in the scripts folder, and add the following code:

window.onload = function () {
  let images = document.querySelectorAll("img[data-hover-image]");
  images.forEach((image) => {
    if (image.dataset.hoverImage === "") return;
    const oldSrc = image.getAttribute("srcset");

    image.addEventListener("mouseover", () => {
      image.srcset = image.dataset.hoverImage;
    });
    image.addEventListener("mouseout", () => {
      image.srcset = oldSrc;
    });
  });
};

4. Enqueue the Script
   • Add this script to your functions.php file, using the following code to ensure it’s loaded in the footer:

function enqueue_swap_image_script() {
    wp_enqueue_script(
        'swap-image-on-hover',
        get_stylesheet_directory_uri() . '/assets/scripts/swapImageOnHover.js',
        array(),
        null,
        true // Load in the footer
    );
}
add_action('wp_enqueue_scripts', 'enqueue_swap_image_script');

This way, it will be loaded in the footer to avoid blocking page load.

Lastly, you’ll need to add the hover image into your product. Head over to your products and find the newly created field and select an image that you want to appear on hover. If no image is selected, then the product image will display as normal

Final Thoughts

There are lots of ways you could take this further:

• Add a fade in/out animation to smooth the transition between images. 
• Use the WooCommerce gallery instead of creating a separate ACF field.

This setup is particularly easy in Bricks thanks to its ability to add attributes so effortlessly. If you’re using another theme, it should still be possible as long as you can add custom attributes. Even in themes like Divi, you could achieve this effect, though it might require some custom queries or a plugin like Loops & Logic.

Let me know if this guide helped you out, or if you have any questions about getting it working on your site!