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.
Setting up and using WooCommerce Image Zoom on a WordPress
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.
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.
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.
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.
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.
These are the settings that are applied if you choose to embed product videos into your product image galleries.
You can choose to show or hide video controls,
loop the video continuously, and enable (or disable) autoplay.
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.
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:
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
Finally, the WooThumbs plugin lets you show bullet navigation in addition to the Prev/Next arrows and the thumbnails.
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
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.
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.
Outsize 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:
Use this option to select a follow zoom shape. You can choose between a circular or square shape.
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.
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
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
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.