I know immediately that advocating for a carousel or slider of any kind in the title of this blog post may have already stirred some people up. And with good reason! Image carousels or sliders take a lot of heat for being ineffective.

For the most part, I agree with that viewpoint — this ConversionXL article has some great points about why they’re not effective, nor are they easy for visitors to use.

However, for product pages, a carousel that changes on gesture can be a great tool to let users easily browse product images, especially on mobile. Rather than clicking individual thumbnails or images to open a full-screen view, then closing that view, then picking a new image to start again, mobile viewers can simply swipe between product images quickly when you use an effective carousel.

An on-gesture carousel for product images improves your customer experience and helps them quickly scroll through available images for a product, so we’ll look at creating a WooCommerce product carousel today.

However, if you’ll already be improving your WooCommerce product image display, why stop there? Along with putting images into an on-gesture carousel, you can make some other WooCommerce product image enhancements with WooThumbs.

WooThumbs Review: WooCommerce Product Carousels

WooThumbs ($18) is a really useful little plugin to improve your WooCommerce product image display. WooThumbs gives you a few tools to make product photos easier to navigate and more contextual for customers. With WooThumbs installed, you can:

  • display product images in an on-gesture carousel that works well on desktop and mobile for easy navigation (while you can make the carousel scroll automatically, I would avoid this)
  • allow customers to “cloud zoom” or hover to zoom on product images to view greater detail
  • open images in a full-screen view to get a better look
  • add variation-specific images so that, when a variation is selected, customers only see the relevant images for that variation
  • add product videos that will open full-screen so customers don’t have to leave your site to view videos to see products in action

If you want to check out a live demo of the plugin you can get a feel for how it modifies and upgrades the default product image display. You can even use the “customize” icon to the left to see what settings are available.

WooThumbs Review: Setup & Configuration

Once you have the plugin installed, you can begin with basic configuration under WooCommerce > WooThumbs. Since WooThumbs uses the Redux Framework for its settings, you’ll need to install the Redux Framework plugin as well to get to this page and activate the enhanced product images.

I wasn’t a fan of installing another plugin to use WooThumbs, but I got in touch with the plugin author, and he’s already in progress on removing this settings framework, and thus the need for the additional plugin, which is nice to hear.

Once you’ve got both plugins up and running, the WooThumbs settings page will let you adjust everything from how the main image and thumbnails are displayed to the width of the slider on the page.

I’d recommend having a look at a product page while you adjust configuration so you can see what each setting does after you’ve saved it.

WooThumbs Review: settings

General Settings

(That top notice is only displayed because I’m using a development shop, you most likely will not see it.)

While you’re viewing the settings page, you can go through each tab to configure settings on what transitions your product images use, what color the icons for navigation are, what kind of image zoom is used, and others.

WooThumbs Review: display settings

Configure settings

I went through and adjusted some settings, then refreshed my sample product page after saving, to get an idea of how I wanted my WooCommerce product carousel, carousel navigation, and thumbnails to look and transition from one image to another. For example, you may want to adjust the zoom appearance or tweak other display settings for your product images.

WooThumbs Review: Product Videos

Once you’ve configured the general plugin settings, you can have a look at some of the product-specific settings, located under Product Data > WooThumbs. Here you can disable WooThumbs for a particular product, or add a product video (via entering the URL to your video).

WooThumbs Review: add product video

Add a Product Video

If you add a URL for a product video, this will add a video icon to the WooThumbs display.

WooThumbs Review: video display

Video Icon

When clicked, it will open a full-screen video lightbox for the customer to view your product video without ever leaving your site (very handy if you want to upload your videos to services like YouTube or Wistia).

WooThumbs Review: Variation Images

For variable products, you’ll also have a very cool new setting: add additional images per variation. This makes it easier for your customers to see variation-specific images for your product.


WooThumbs Review: default variation settings

Default Variation Images



WooThumbs Review: add variation images

Additional Variation images


For example, the default WooCommerce variations will adjust the main product image when a variation is selected, but that’s it. All other thumbnails / product images are shown, regardless of which variation they relate to.

WooThumbs Review: default variation images

Default Variation Display

With WooThumbs, you can make your variation images much more specific. When the product initially loads, all product images will still be shown. However, when a variation is selected, the main variation image will be shown in the large image preview, and the images you’ve marked as additional images will be shown as thumbnails, letting the customer scroll through these images.

WooThumbs Review: updated variation display

Updated Variation Display

This way, when a specific variation is selected, the customer can view all of the images specific to that variation only, giving them better context for the different versions of your product.

There’s also a bulk tool to assign these additional images to your product variations. If you go to WooCommerce > WooThumbs Bulk, you can add additional images for several product variations at once. Enter a comma-separated list of image IDs (you can see these in your media folder) for the variation to apply all images to that variation at one time.

WooThumbs Review: bulk variation images

Bulk variation images

This is definitely a neat feature to make sure customers get confirmation on what different variations of your product will look like, as the images are filtered based on which variation is selected, rather than throwing all images at the customer at once.

WooThumbs Review: Customer View

Typically when your customers view your product pages with enhanced product images using WooThumbs, they’ll see something like this:

WooThumbs Review:  general display

Basic WooThumbs Display

The image section looks pretty similar to the way it normally does, but you can use an image slider to show all images, the customer can hover to zoom in, and can also click to see an image in full screen. If you want to check out what it looks like when used, the demo site for the plugin has some examples.

However, the place WooThumbs shines (for me anyway) is in the mobile-view of your store. In a typical WooCommerce store, your customers will see all product images on mobile. However, to view a different image than the main one in more detail, they must click on the thumbnail and see the image opened in a lightbox, then click on the arrow to move through images — no swiping or scrolling support.

Here’s what this looks like in action: (click this image to see a gif of the default WooCommerce product image display with unsuccessful swipe attempts 🙂 )

WooThumbs review: mobile woocommerce product carousel

WooCommerce Product on Mobile

Not really great, and not really the way mobile viewers want to experience your site.

With WooThumbs active, customers can instead swipe left and right to easily browse full size images, and clicking a product thumbnail makes it the main image rather than opening a lightbox. (Click this image to see a gif of the WooThumbs-enhanced product image display.)

WooThumbs Review: mobile browsing

WooThumbs Product on Mobile

You don’t lose the full-image lightbox if customers want to click the full view, but it makes for a much better mobile browsing experience to swipe through product images and to not force the lightbox to see greater detail unless needed.

WooThumbs Review: Theme Compatibility

I tested WooThumbs in several WooCommerce themes, and it worked well in each one I tested. Most of the themes didn’t require tweaks, but it looks like you could possibly run into one or two small issues that are fixed easily.

First, you may see the sale badge hidden depending on how it’s displayed in your theme.

WooThumbs Review: typical customer view

WooThumbs in Twenty Sixteen

It’s pretty easy to move “on sale” badges back in front of the product images with a bit of CSS in your theme’s stylesheet or custom CSS plugin:

.woocommerce .onsale {
    z-index: 10000;
}

The only other thing I saw was that you may run into issues with the slider being too wide, which can push your content lower on the screen.

WooThumbs Review: storefront theme

This can be adjusted easily to a smaller width under the “Slider Dimensions” settings, which fixed the issue for me.

WooThumbs Review: width settings

These were the only display hiccups I saw across the 6 themes I have installed in my development shop, but they’re simple enough to patch up, and the plugin is advertised as compatible with pretty much any WooCommerce theme.

WooThumbs Review: Other Comments

While WooThumbs gives your product images some nice upgrades and context for variations, there are a couple things I’d love to see improved.

First, there are lots of settings. While this isn’t a bad thing, when you can’t see what the settings are doing and have to keep refreshing a product page to see them, it can take some time to configure.

Several settings would benefit from using the WordPress Customizer — many settings directly modify the frontend appearance, and thus seeing how they change a sample product page in real time would make setup far quicker and prevent flipping back and forth between settings and a frontend product page.

Next, settings that don’t modify appearance could leverage the WooCommerce settings API to add them in a settings tab. This would also give the added benefit of removing the need for the Redux Framework plugin completely, which is apparently a change that’s already in progress for the plugin.

I would also love to see some bulk actions for WooThumbs product settings. For example, a bulk action to disable WooThumbs for the product would be helpful if you want to disable the enhanced product images for an entire product category. Likewise, you may want to re-use a video URL for a category, and setting these in bulk is very helpful.

WooThumbs Review: Upgraded Product Images

Overall, WooThumbs is an easy-to-use plugin that enhances your WooCommerce product images. Images are easier to navigate using a mobile-friendly image slider, as customers can use the expected swipes to navigate images, and click on thumbnails to make them the main product image. Swiping to scroll through images is also much easier than using the tiny “arrow” tap target in the image lightbox.

Images can also be viewed in full screen (mobile and desktop), and can be inspected closer with a “hover to zoom” feature. The enhanced image section blends into most themes, and can be adjusted easily for each theme.

Adding variation images is a nice bonus to give product images more context, as they can be tied to a specific variation. Product videos are also handy to give your customers more visual representations of your products without sending them off to YouTube or another site, keeping them where the purchasing happens.

At $18, WooThumbs delivers great value to upgrade your WooCommerce product images, provide a much better mobile image browsing experience, and add video or variation image support.


Note: This post was sponsored by WooThumbs, as the product was provided for us to review. The opinions in this article are solely those of the author without bias, and are based on experiences using the product. For more information, please see our editorial policy.
Articles you may also like:

Posted by Beka Rice

Beka Rice manages the direction of Sell with WP content and writes or edits most of our articles to share her interests in eCommerce. Or she just writes as an excuse to spend more time jamming out to anything from The Clash to Lady Gaga. Who knows.

One Comment

  1. […] Create Effective WooCommerce Product Carousels with WooThumbs […]

    Reply

Leave a reply

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