Adding a subtle hover effect to your product images is one of the best things you can do for your WooCommerce site.
It will make your store more interactive, improve your dwell time, make a good impression on your visitors, and help convert them into customers.
In this tutorial, I’ll show how you can add an image swap effect to your products in your WooCommerce store.
What is an Image Hover Effect?
An image hover effect is an animation that triggers when the cursor hovers over an image.
It may involve effects such as enlarging, shrinking, rotating, flipping, or swapping an image; changing its colors; or adding call-to-action buttons to it.
A well-chosen image hover effect, such as a stylish product image swap animation, has many advantages. For example, it:
- makes a great first impression
- builds trust
- immediately draws attention to the products
- lets visitors know that the images are clickable
- helps customers make faster buying decisions
- improves dwell times and search engine rankings
- can replace product videos
- …and more
Now, let’s see how you can add an image swap effect to your WooCommerce products.
1. Find a Suitable WooCommerce Theme
The easiest way to add a hover effect to your product images is to install a WooCommerce theme that provides this feature out of the box.
In this tutorial, I’ll use our Botiga theme that allows you to make advanced customizations to your WooCommerce store without writing a single line of code. However, you can use any other WooCommerce theme that includes this functionality.
2. Install the Botiga Theme
First, download the free Botiga theme from our website.
Then, open your WordPress dashboard, and go to Appearance > Themes > Add New > Upload Theme.
Upload the theme, and hit the Install Now and Activate buttons to install and activate the theme on your website.
3. Install the Botiga Pro Plugin
Botiga Pro is a premium plugin that expands the free theme with advanced features and extra starter sites. To add a hover effect to your WooCommerce product images, you need both the theme and the plugin.
After purchasing the license, download Botiga Pro from your aThemes account, then go to Plugins > Add New > Upload Plugin.
Upload the plugin, and hit the Install Now button.
Next, activate your license by going to Plugins > Botiga Pro License and entering your license key. You can get your key from your aThemes account.
Done? Let’s move on to the next step.
4. Import a Starter Site
Botiga starter sites (or demos) are ready-made WooCommerce stores with sample products that you can import with a few clicks. Once Botiga is activated on your site, you’ll see a banner in your Theme Dashboard prompting you to check out the starter sites.
You can access the starter site library by clicking either the Starter Sites button in the banner or the Appearance > Starter Sites menu in the left sidebar.
The library currently consists of nine starter sites: Beauty, Apparel, Furniture, Jewelry, Single Product, Multi Vendor, Wine, Plants, and Shoes.
Before choosing one, you can click the Preview Demo button to check what your site would look like. Next, hit the Import button of your preferred starter site, and wait for the import process to complete.
5. Open the Product Catalog Menu in the Customizer
Now, it’s time to add the hover effect to your WooCommerce product images. Here’s what you need to do:
Go to Appearance > Customize to open the Customizer.
In the Customizer, go to the WooCommerce > Product Catalog menu, and expand the Product card option.
This is where you can apply the image hover effect.
6. Enable the Product Image Swap Effect
Once the Product card tab is expanded, you should see a Product Image Swap option.
Toggle it on, then hit the Publish button to save your changes.
Now whenever the cursor hovers over a product image on an archive page, it will be swapped with another image from the product page. This means you’ll need to have at least two images for each product.
Open one of your archive pages, e.g. your Shop or category pages, and check how the image swapping works on your site.
For instance, here’s what the Shop page looked like on my demo site before:
And, here’s how it works after enabling the Product Image Swap feature:
7. Add Your Own Products
By now, you have a functional WooCommerce site, and you have added a hover effect to your product images.
However, the starter site you imported from Botiga has dummy products. So, let’s quickly see how to populate your store with your own products in WooCommerce.
You can upload your products from the Products > Add New menu in your WordPress admin area.
On the Add new product page, there’s an editor where you can enter the details of your product, such as the title and description.
Once they’re filled in, scroll down to the Product data section, choose a product type, and populate all the relevant fields, such as inventory, shipping, linked products, and others.
For more details on the product data options, you can check out this WooCommerce documentation page.
Next, in the right sidebar, you’ll see two options:
- Product image – this is the featured image on the product page
- Product gallery – this includes all the other product images
As I mentioned above, you’ll need to upload at least two images (one as the Product image and one into the Product gallery) to make Botiga’s Product Image Swap feature work.
You can also add Product categories and Product tags from the sidebar.
Preview the product page by clicking the Preview button, and when you are ready, hit the Publish button.
Conclusion
Adding a product image hover effect to your WooCommerce site is a great way to make it interactive and engaging.
While there are many ways to implement hover effects, I recommend using subtle animations such as image swapping as it’s not too distracting and offers a better user navigation experience — especially in a WooCommerce store.
Botiga Pro will help you easily add a hover swap effect to your product images on your WooCommerce site — all you need to do is access the WordPress Customizer to enable the effect and add at least two images to each of your products.
I hope you found this tutorial helpful. If you have any questions, leave us a comment below.
