Plugins, WooCommerce Tutorials

Guide to WooCommerce Image Zoom and the Best Plugins to Use

If you’re running an e-commerce site on WordPress, you might consider adding WooCommerce image zoom to your products. Giving prospective customers the option to zoom into product images can be hugely beneficial for your business.

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

With this in mind, in this article, we’ll explain how you can add WooCommerce image zoom to your e-commerce store using the WooThumbs plugin.

WooThumbs for WooCommerce

The WooThumbs for WooCommerce plugin lets you customize your WooCommerce product gallery with neat features like:

  • New layouts. With WooThumbs for WooCommerce, you can create customizable display modes that are great for showing customers all product details in an effective way.
  • Embedded video. Embedding a product video is a great way to improve conversions on your online store.
  • Multiple images per variation. If you sell products with variations (such as clothes), you can use WooThumbs for WooCommerce to add sliding thumbnails to your product image gallery and reduce clutter.

In addition to this, it’s worth mentioning that WooThumbs for WooCommerce is compatible with the WPML plugin and ready for translation out of the box.

Get WooThumbs for WooCommerce

Create a perfect WooCommerce image zoom, and much more with WooThumbs.

Get Started
Get WooThumbs for WooCommerce thumbnail

Setting up and using WooCommerce Image Zoom on a WordPress site

In this section, we’ll walk you through a step-by-step tutorial to show you how you can set up WooThumbs for WooCommerce on your WordPress site. For this tutorial, we’ll assume you already have a WordPress website with WooCommerce and WooThumbs installed to it.

Display settings

Once you have WooThumbs installed to your WordPress site, head over to WooCommerce > WooThumbs > Display from the admin panel. From here, you can configure the plugin’s display settings and image sizes globally.

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.

Zoom settings

From the WooThumbs settings page, you can click on the Zoom tab to configure the plugin’s zoom settings. These are split into four categories – general zoom settings, outside and follow zoom settings, outsize zoom settings, and follow zoom settings.

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

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.

Best WooCommerce image zoom plugins

Here are some of the best WooCommerce image zoom plugins:

  • WooThumbs for WooCommerce is a powerful image gallery plugin for WooCommerce that lets you fully customize your product image gallery and improve conversions with embedded video. The plugin license will cost you $79 per year.
  • YITH WooCommerce Zoom Magnifier is a free WordPress plugin that lets customers view a zoomed-in product image on mouseover. You can add a slider and customize slider behavior.
  • WP Image Zoom is a free, bare-bones WooCommerce image zoom plugin that offers four zooming types (magnifiers) and animation easing effects.

Set up WooCommerce image zoom today

If you’re serious about delivering a good user experience to online shoppers, we recommend using the WooThumbs for WooCommerce product image zoom plugin on your e-commerce store. It’s fully customizable and mobile-responsive. Plus, it lets you embed videos into your product image galleries to improve conversions.

Get WooThumbs for WooCommerce

Create a perfect WooCommerce image zoom, and much more with WooThumbs.

Get Started
Get WooThumbs for WooCommerce thumbnail

Ready to supercharge your online store and boost conversions? Get WooThumbs for WooCommerce today!

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 *