woocommerce product image hover

WooCommerce Tutorials

How to Flip or Change a Product Image on Hover in WooCommerce

If you’re looking to add a product image hover effect to your WooCommerce store’s category page, in other words, flip or change a product image on hover. Then this article is for you.

By allowing customers to change a product image on hover, you’ll be able to:

  • Save customers’ clicks by allowing them to preview products right from the category page.
  • Show off additional variation images.
  • Keep them on your site longer by making the browsing experience enjoyable.
Image Swap for WooCommerce

However, if you have a default WooCommerce store without any additional plugins installed, you likely won’t have this option. A basic setup doesn’t allow you to show multiple product images on your shop page or let customers flip through the images easily.

So, by the end of this article, you’ll know exactly how to easily add product image hover effects to your category/shop page in WooCommerce. All so you can reduce clicks and increase sales.

Start your 14-day free trial of Image Swap for WooCommerce

Start your free trial right now and instantly add product image hover effects to your WooCommerce store.

or learn more

But first, let’s talk about the benefits of product image hover effects for WooCommerce.

Why add product image hover effects to the category page in WooCommerce?

We’ve all heard the saying that a picture is worth a thousand words. That saying couldn’t be any more accurate with your WooCommerce store. So, here’s why adding product image hover effects have a massive impact on your customers’ experience:

  1. Your photos are the first thing a shopper sees. If the images are attractive, easy to see, and even better, easy to flip through by hovering or clicking. This won’t just save your customers time, it will also help them make a more informed decision.
  1. Now you’ve captured their attention, you’ll want to keep it. By adding image hover effects to your store, you’ll make it easy for customers to see all your product options quickly. A little mouse hover lets them see more information about the product like zooming in to get a closer look, flipping to see other color options, and much more. 
  1. You’ll also be able to help your customers make a buying decision quickly because they’ve got all the details right in front of them. Without needing to click through to the product page, they can see the different product options and add the products to their cart right then and there.

The easier it is for shoppers to view their product options, the higher the possibility of a sale. 

Since most ecommerce stores haven’t caught on to this exciting option, your store is more likely to be remembered.

After all, the Baymard Institute says that 70% of ecommerce sites are missing this feature. So this unique and helpful way to highlight product details can help turn that browser into a buyer. 

How to flip a product image on hover in WooCommerce

We’ve outlined why you should be using a product image hover effect in your WooCommerce store, but how do you get it working?

Well, for this, you’ll need a plugin, and of course, we recommend Image Swap for WooCommerce.

zoom effect image swap for woocommerce
Zoom effect using Image Swap for WooCommerce

What is Image Swap for WooCommerce?

Image Swap for WooCommerce allows you to add click and hover effects to your product images on the shop and category pages.

This easy to use plugin has 9 effects you can choose from depending on what you’re after:

  • Fade on Hover, which fades out the first product image and replaces it with the next.
  • Slide, which shows a slider that customers can click through.
  • Bullets, which is similar to slide but shows bullet points instead of arrows.
  • Thumbnails, which show your additional product images below the main one – these are clickable.
  • Zoom, which zooms in to show the detail of your product images.
  • Picture in Picture, which shows the next image as a small thumbnail in the corner of the main product image.
  • Modal Gallery, which when clicked, shows an enlarged view of your product image/s in a modal popup.
  • Enlarge, which shows a mild ‘enlarge’ effect of the whole image on hover.
  • Flip, which flips the first image to show the second.

To see all of these in action, you can check out the demo.

image hover effect WooCommerce
Image Swap for WooCommerce Thumbnails effect

No matter which effect you choose, you’ll save your customers time by allowing them to see product details directly on the WooCommerce product category page.

So, now we’ve looked at Image swap for WooCommerce, let’s get your image flip and hover effect working for you! 

How to add Image Swap for WooCommerce to your store

To add a product image hover effect to the category page in WooCommerce, you’ll need to:

  1. Install the image swap plugin, Image Swap for WooCommerce.
  2. Select and customize your image swap effects.

That’s it. Below we’ll outline these steps in detail so you can start making more sales for your WooCommerce store.

Step 1: Install Image Swap for WooCommerce

To get started, purchase Image Swap for WooCommerce from the Iconic store: iconicwp.com/image-swap-for-woocommerce 

Or start your 14-day free trial here:

Start your 14-day free trial of Image Swap for WooCommerce

Start your free trial right now and instantly add product image hover effects to your WooCommerce store.

or learn more

Then follow these steps:

  1. Go to Plugins > Add New > Upload Plugin.
  2. Choose the zip file you downloaded, upload, and then click Activate.
  3. Once activated, you’ll need to enter your license key.

Now that we have Image Swap for WooCommerce installed, we can select and customize the image swap effects.

Step 2: Select your image swap effects

After you’ve logged into your WordPress admin area, select WooCommerce > Image Swap from the sidebar.

  1. Next, click the General tab at the top. 
  2. From here you can select the effect you want to use from the Display Settings > Effect dropdown.
woocommerce product image hover
  1. Once you’re happy with your selection, click the blue Save Changes button at the bottom of the page. 

As mentioned above, Image Swap for WooCommerce includes 9 different pre-built hover, flip, and side effects. So we recommend trying each option out to see which you like.

Step 3: Customize your image swap effect

  1. If you’re not already there, log in to your WordPress admin area. Then from the sidebar, go to WooCommerce > Image Swap
  2. Then, click the Effect Settings tab at the top.
  3. Find the section that relates to the effect you chose in the Effect tab.
image swap customize
  1. You’ll see many different options depending on which you choose. You’ll be able to customize everything from how many images there are, transition effects, timing, and more. 
  2. Once you’re happy with your changes, scroll to the bottom of the page and click the blue Save Changes button.

That’s it! You now have product image hover effects live on your WooCommerce store! 

Start using a WooCommerce product image flipper today

With Image Swap for WooCommerce up and running, you’ll be able to add different hover effect options to each of your products, resulting in a better customer experience and more sales.

Make these changes quickly and easily with Image Swap for WooCommerce.

Start your 14-day free trial of Image Swap for WooCommerce

Start your free trial right now and instantly add product image hover effects to your WooCommerce store.

or learn more

Avatar

Gina is our in-house content creator and partnership manager. She’s passionate about working with plugin companies with copywriting/storytelling, content creation & marketing.

She can typically be found tending to her vegetable garden, writing, and travelling to mainland Europe.

0 Responses

Leave a Reply

Your email address will not be published. Required fields are marked *