Plugins, WooCommerce Tutorials

How to Install WooCommerce Image Zoom on Your Site

When running an online store, allowing customers to see as much of your product as possible is vital to increasing sales. So it goes without saying that adding image zoom to your WooCommerce store is a must.

However, in a standard WooCommerce install, the image zoom feature is basic and hard to use.

So by the end of this article, you’ll know exactly how to add the best possible image zoom to your WooCommerce store. As a bonus, you’ll also be able to upgrade your entire WooCommerce gallery while you’re at it.

Plus, you’ll be able to get it done in just 2 steps with the product gallery plugin, WooThumbs for WooCommerce.

Start your 14-day free trial of WooThumbs for WooCommerce

Start your free trial right now and instantly add image zoom to your WooCommerce product gallery.

or learn more

woocommerce image zoom

The advantages of adding image zoom to your WooCommerce store speak for themselves. You can:

  • Allow visitors and prospective customers to get a better look at the product before they add it to their cart.
  • Enhance online sales by reducing friction and making the customer’s purchasing decision easier.
  • Make it easier for customers to view clear product information and get a better idea of what they’ll receive. Increasing trust.

What WooThumbs for WooCommerce Can Do

WooThumbs for WooCommerce doesn’t just allow you to use advanced image zoom for your product images. It also lets you customize your entire WooCommerce product gallery with features such as:

  • New layouts. Change the layout of your gallery from where the thumbnails are positioned, to how big it is, icon colors and more.
  • Embedded video. Embed or link to product videos and display them within the gallery itself.
  • Multiple images per variation. If you sell products with variations (such as clothes), WooThumbs for WooCommerce allows you to add multiple images for each variation.

So now we know the additional benefits of using WooThumbs for WooCommerce, lets get it installed on your store with image zoom.

woocommerce video

How to Install WooCommerce Image Zoom

To add image zoom to your WooCommerce store, you’ll need to:

  1. Install the product gallery plugin, WooThumbs for WooCommerce.
  2. Adjust your product image zoom settings.
  3. (Optional) Adjust your product gallery settings.

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

Step 1: Install WooThumbs for WooCommerce

To get started, purchase WooThumbs for WooCommerce from the Iconic store: iconicwp.com/woothumbs

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 licence key.

Now that we have WooThumbs for WooCommerce installed, we can move onto amending your image zoom settings.

Step 2: Adjust your product image zoom settings

Once you have WooThumbs installed on your WordPress site, head over to WooCommerce > WooThumbs > Zoom from the admin panel. From here, you can customise your image zoom settings.

These are split into four categories:

  • General zoom settings
  • Outside and follow zoom settings
  • Outsize zoom settings
  • Follow zoom settings

We’ll go through each of these in turn so you can start using them in your online store.

General zoom settings

WooThumbs general zoom settings

Use these to enable zoom on-hover and the zoom type. Zoom on-hover means that the product image will zoom in when the visitor hovers over it with their mouse. You can also choose between three zoom types – inner, outside, or follow – using the dropdown menu.

Inner zoom preview

Outside and follow zoom settings

WooThumbs outside and follow zoom settings

This adds a zoom box outside of the main product image box that appears when visitors hover over the main product image. You can use these settings to configure the lens width and height.

Outside zoom preview

Outsize zoom settings

WooThumbs outside zoom settings

These settings let you configure where the zoomed image should appear relative to the main product image. You can also configure the lens color and lens opacity of the zoom window.

Follow zoom settings

WooThumbs follow zoom settings

Use this option to select a follow zoom shape. You can choose between a circular or square shape.

Follow zoom preview

Bonus: Fullscreen settings

Some online store owners might want to make the main product image open up in fullscreen mode. With WooThumbs, you can do that from the Fullscreen tab in the plugin settings page. From here, you can choose to enable fullscreen, click anywhere, and image title.

WooThumbs fullscreen settings

Enabling all three options means that visitors can click anywhere on the main product image to trigger fullscreen. The product image title will also appear in the full-screen lightbox view.

(Optional) Step 3: Adjust your product gallery settings

Now that we’ve adjusted the zoom settings using WooThumbs for WooCommerce, next we’ll go through some additional settings you can adjust to fully customize your product gallery.

Display settings

Head over to WooCommerce > WooThumbs > Display from the admin panel. From here, you can change your product gallery display settings.

Display settings

WooThumbs display settings

You can set the gallery width (in percentage) and choose a position for the product images. In addition to this, WooThumbs also lets you change icon colors and decide whether you want icons to appear on-hover. Finally, you can choose to show tooltips on-hover, as well.

Image sizes

WooThumbs image sizes

From the same screen, you can configure the default single image width, crop ratio, thumbnail image width, thumbnail crop ratio, and the size of large images.

Carousel settings

One of the neat features on offer with the WooThumbs plugin is that it lets you change the carousel (slider) settings without having to mess around with HTML, CSS, or JavaScript code. Simply head over to WooCommerce > WooThumbs > Carousel to modify:

WooThumbs carousel settings
  • Mode. Use the dropdown menu to select a transition mode i.e. horizontal, vertical, or fade.
  • Transition speed. You can use this to configure how fast the image should slide or fade.
  • Autoplay. This lets you decide whether the slider should transition automatically or on-click.
  • Slide duration. If you choose to enable autoplay, you can use this setting to set the slide duration for each image.
  • Infinite loop. Enable this option if you want the carousel to loop back to the first product image when the visitor reaches the last image. This delivers a good user experience.

Click the Save Changes button to proceed.

Media settings

These are the settings that are applied if you choose to embed product videos into your product image galleries.

WooThumbs media settings

You can choose to show or hide video controls, loop the video continuously, and enable (or disable) autoplay.

Navigation settings

The next step is to configure the WooThumbs navigation settings. These determine how visitors and prospective customers navigate through the image gallery on the product page.

WooThumbs navigation settings

The general navigation settings let you enable or disable the Prev/Next arrows. We recommend leaving this option enabled.

You can also configure various navigation settings for the thumbnail images that appear directly under the main product image. These include:

  • Enabling thumbnails
  • Choosing a thumbnail type i.e. sliding or stacked
  • Enabling thumbnail controls
  • Whether you want thumbnails to appear above, below, to the right, or to the left of the product image
  • Setting thumbnail width, count, transition speed, and spacing
WooThumbs bullets settings

Finally, the WooThumbs plugin lets you show bullet navigation in addition to the Prev/Next arrows and the thumbnails.

Set up WooCommerce image zoom today

That’s it, you now have image zoom installed on your WooCommerce store. As a bonus, you have a fully customized product image gallery designed to increase sales and improve user experience.

Get these changes up and running quickly with WooThumbs for WooCommerce.

Start your 14-day free trial of WooThumbs for WooCommerce

Start your free trial right now and instantly add image zoom to your WooCommerce product gallery.

or learn more

Maria creates content for the Iconic blog, helping you solve WooCommerce problems.

Share

Leave a Reply

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