Interested in a better way to showcase your products on WooCommerce? Then you might be interested in today's review...
I’m going to be checking out the WooThumbs plugin from Iconic. It’s a plugin that helps you improve your product display with a few major enhancements to the default WooCommerce image showcase.
It sets you up with some slick product carousels and an awesome method of zooming in on your products, which is especially great for anyone selling design-focused products.
And if you’re selling products with multiple variations, you’ll definitely be interested in how WooThumbs lets you handle multiple image variations (more on that below!).
WooThumbs is also developed by a reputable company with a proven track record (they've been around since 2011). Iconic is an elite author at Code Canyon with more than 7,000 sales and a 4.5 star rating. In addition to WooThumbs, they also sell a number of other WooCommerce plugins and blog about WooCommerce.
So, if you’re a WooCommerce seller, or interested in becoming one, I invite you to join me as I dig into WooThumbs from Iconic.
Setting up WooThumbs
The folks at Iconic were kind enough to set me up with a test site, so I didn’t have to install the plugin myself.
Other than that, I’m starting at step one, though.
First, I’ll go to the general settings tab and set up the basics:
Ok, that’s a lot of settings. I always see this as a double-edged sword - nice to have lots of options, but sometimes time-consuming to go through everything.
I’ll start with the Display Settings.
Here are the highlights of what you can configure:
- How images transition in the carousel (horizontally, vertically, or fade)
- How fast images transition
- Whether the carousel autoplays or not
- Whether the carousel plays in an infinite loop or not
Moving on to the next tab, Slider Dimensions, you can set the size and placement of your image slider:
In Navigation Settings, you can choose whether you want to display navigation arrows and change settings for thumbnail controls:
In Zoom Settings, you can enable or disable zoom:
You can also choose how zoom functions. While this setting might seem innocuous, it actually affects your zoom quite a bit.
- Inner zoom will zoom in on the whole image as the user mouses over.
- Outer zoom will show the zoom adjacent to the image, but not affect the original image.
- Follow will create a magnifying glass effect where the user’s mouse is.
Depending on your zoom selection, you can also set up a few more options on this page.
That’s it for most of the settings - there are a few tabs left where you can set fullscreen options, responsive settings, and custom CSS, but I don't think they're especially vital to the main functions of the plugin.
Now, let’s take a look at how the plugin affects the frontend.
Because I enabled prev/next buttons in the navigation settings, users will see these slick buttons on each image:
Rather than having to click the thumbnail to navigate, they can just click the button to move to the next image.
If you enable autoplay, the images will automatically cycle through at your specified speed. I personally don’t really like when images autoplay, but if you’re a fan, the functionality definitely works smoothly in my testing.
I like that everything looks very professional right out-of-the-box. The prev/next buttons are well-designed and the transitions are smooth.
Also, for mobile/tablet users, they can easily move through your product images via hand gesture, which is nice for mobile usability.
Now let's take a look at how zoom works. I’ll show you the three different zoom options I mentioned above. As long as you have it enabled, all three options are automatically activated when a user hovers their mouse over the product image.
Here’s what the product page looks like when I’m not hovering over the image, i.e. no zoom effect is being applied:
Here’s what an inner zoom looks like to one of your customers:
Notice how it zooms in on the full image and everything happens inside the original zoom box.
Contrast that with an outer zoom:
A box appears on the original image, and then the zoomed portion inside that box appears outside the original image. You can customize the location and size of this zoom box.
Finally, here’s what a follow zoom looks like:
You can make the zoom circular or square. To be honest, though, I don’t really like this effect. Neither the circle nor the square looks particularly good to me. I don’t think it’s an issue of implementation - I just don’t like the effect no matter how well it’s implemented.
WooThumbs includes a nice feature if you have products with multiple variations, e.g. different colored t-shirts for the same designs.
WooThumbs lets you add additional images per variation, so that when a user clicks on a variation, they can scroll through multiple images that are relevant for that variation. On the product page, you can add additional images by going to Product Data → Variations → Add additional images:
Other cool things
WooThumbs has a few other noteworthy features.
First, if you ever don’t want WooThumbs enabled for just a single product page, you can easily disable it on an individual basis in the product details.
Just go to Product Data → WooThumbs and you can enable or disable WooThumbs for that specific product:
Another cool feature in this menu is the ability to add a video.
All you need to do is enter the raw link to your video. Then, on the product page, users will see a new Play icon:
If they click the icon, the video will automatically expand without requiring users to leave the page. This is a nice feature, though in playing around with things, I did notice that the play icon wasn’t clickable when using the “Follow” zoom feature. The functionality worked fine with the inner and out zoom options.
Finally, WooThumbs is fully compatible with some of the other plugins that Iconic offers. The test site they gave me already had Iconic’s Quickview plugin installed. The zoom feature of WooThumbs works great with this plugin - I think you should definitely consider installing both.
WooThumbs is reasonably priced at $18.00 for the regular license. The extended license will cost you $90.00. Because WooThumbs is sold via Code Canyon, you can expect the standard Code Canyon licenses to apply to the regular and extended versions.
I used to be heavily involved in the graphic t-shirt industry. Because of the focus on t-shirt designs, product zooms like this were often a necessity. That’s why I like WooThumbs. I think if you’re selling anything design-focused, you definitely need a zoom feature like this. WooThumbs implements it well, with good design and smooth functionality.
The only glitch I encountered in using the product was the video play button and follow zoom mode (which is probably a rare scenario). Everything else worked smoothly without any issues. The transitions on carousels look great, and I didn’t encounter any bugs with the zoom feature itself.
If you’re looking to upgrade your WooCommerce product imagery with carousels and/or zooms, you should definitely give WooThumbs a look.