Home Tutorials How to Change a WooCommerce Product Image on Hover

How to Change a WooCommerce Product Image on Hover


Including a refined hover impact to your product pictures is likely one of the greatest issues you are able to do in your WooCommerce website.

It can make your retailer extra interactive, enhance your dwell time, make a good impression on your guests, and assist convert them into prospects.

On this tutorial, I’ll present how one can add a picture swap impact to your merchandise in your WooCommerce retailer.

What’s an Image Hover Impact?

A picture hover impact is an animation that triggers when the cursor hovers over a picture.

It might contain results reminiscent of enlarging, shrinking, rotating, flipping, or swapping a picture; altering its colours; or including call-to-action buttons to it.

Product swapping enabled using Botiga

A well-chosen picture hover impact, reminiscent of a fashionable product picture swap animation, has many benefits. For instance, it:

  • makes a nice first impression
  • builds belief
  • instantly attracts consideration to the merchandise
  • lets guests know that the photographs are clickable
  • helps prospects make quicker shopping for selections
  • improves dwell instances and search engine rankings
  • can substitute product movies
  • …and extra

Now, let’s see how one can add a picture swap impact to your WooCommerce merchandise.

1. Discover a Appropriate WooCommerce Theme

The best manner to add a hover impact to your product pictures is to set up a WooCommerce theme that gives this function out of the field.

On this tutorial, I’ll use our Botiga theme that enables you to make superior customizations to your WooCommerce retailer with out writing a single line of code. Nonetheless, you should use another WooCommerce theme that features this performance.

Botiga WooCommerce theme, free starter site

2. Set up the Botiga Theme

First, obtain the free Botiga theme from our web site.

Then, open your WordPress dashboard, and go to Look > Themes > Add New > Add Theme.

Add the theme, and hit the Set up Now and Activate buttons to set up and activate the theme on your web site. 

Upload the Botiga theme in WordPress

3. Set up the Botiga Professional Plugin

Botiga Professional is a premium plugin that expands the free theme with superior options and further starter websites. So as to add a hover impact to your WooCommerce product pictures, you want each the theme and the plugin.

After buying the license, obtain Botiga Professional out of your aThemes account, then go to Plugins > Add New > Add Plugin.

Add the plugin, and hit the Set up Now button. 

Uploading the Botiga Pro plugin in wordpress

Subsequent, activate your license by going to Plugins > Botiga Professional License and getting into your license key. You may get your key out of your aThemes account.

Achieved? Let’s transfer on to the following step. 

4. Import a Starter Web site

Botiga starter websites (or demos) are ready-made WooCommerce shops with pattern merchandise you could import with a few clicks. As soon as Botiga is activated on your website, you’ll see a banner in your Theme Dashboard prompting you to take a look at the starter websites.

You possibly can entry the starter website library by clicking both the Starter Websites button within the banner or the Look > Starter Websites menu within the left sidebar.

The library at present consists of 5 starter websites: Magnificence, Attire, Furnishings, Jewellery, and Single Product.

Earlier than selecting one, you possibly can click on the Preview Demo button to examine what your website would appear to be. Subsequent, hit the Import button of your most well-liked starter website, and watch for the import course of to full.

Importing a Botiga starter site

Now, it’s time to add the hover impact to your WooCommerce product pictures. Right here’s what you want to do:

Go to Look > Customise to open the Customizer.

Accessing the Customizer in WordPress

Within the Customizer, go to the WooCommerce > Product Catalog menu, and broaden the Product card possibility.

That is the place you possibly can apply the picture hover impact.

Accessing the product card option in Botiga Pro

6. Allow the Product Image Swap Impact

As soon as the Product card tab is expanded, it is best to see a Product Image Swap possibility.

Toggle it on, then hit the Publish button to save your adjustments.

Product image swap option in Botiga Pro

Now every time the cursor hovers over a product picture on an archive web page, will probably be swapped with one other picture from the product web page. This implies you’ll want to have a minimum of two pictures for every product.

Open certainly one of your archive pages, e.g. your Store or class pages, and examine how the picture swapping works on your website.

For example, right here’s what the Store web page regarded like on my demo website earlier than:

Product images when image swapping is not enabled

And, right here’s the way it works after enabling the Product Image Swap function:

Product swapping enabled using Botiga

7. Add Your Personal Merchandise

By now, you may have a practical WooCommerce website, and you’ve got added a hover impact to your product pictures.

Nonetheless, the starter website you imported from Botiga has dummy merchandise. So, let’s rapidly see how to populate your retailer with your individual merchandise in WooCommerce.

You possibly can add your merchandise from the Merchandise > Add New menu in your WordPress admin space.

On the Add new product web page, there’s an editor the place you possibly can enter the small print of your product, such because the title and outline.

Adding title and description to a new product in WooCommerce

As soon as they’re stuffed in, scroll down to the Product knowledge part, select a product kind, and populate all of the related fields, reminiscent of stock, transport, linked merchandise, and others.

For extra particulars on the product knowledge choices, you possibly can take a look at this WooCommerce documentation web page.

Setting product data in WooCommerce

Subsequent, in the proper sidebar, you’ll see two choices:

  • Product picture – that is the featured picture on the product web page
  • Product gallery – this consists of all the opposite product pictures

As I discussed above, you’ll want to add a minimum of two pictures (one because the Product picture and one into the Product gallery) to make Botiga’s Product Image Swap function work.

Adding product images to a WooCommerce store

You too can add Product classes and Product tags from the sidebar.

Preview the product web page by clicking the Preview button, and if you end up prepared, hit the Publish button.

Conclusion

Including a product picture hover impact to your WooCommerce website is a smart way to make it interactive and fascinating.

Whereas there are a lot of methods to implement hover results, I like to recommend utilizing refined animations reminiscent of picture swapping because it’s not too distracting and presents a higher person navigation expertise — particularly in a WooCommerce retailer.

Botiga Professional will make it easier to simply add a hover swap impact to your product pictures on your WooCommerce website — all you want to do is entry the WordPress Customizer to allow the impact and add a minimum of two pictures to every of your merchandise.

I hope you discovered this tutorial useful. When you’ve got any questions, go away us a remark beneath.