How to Create a Product Gallery Slider in WooCommerce

August 16, 2021

woocommerce product gallery slider

Adding a product gallery slider to your product page in WooCommerce is a great way to save space and improve useability. Adding a slider to your product gallery lets your customers easily scroll through product images without feeling overwhelmed.

But there’s a catch! The standard WooCommerce setup doesn’t let you create or add slider controls to your product gallery.

WooCommerce product gallery
Standard WooCommerce product gallery

In other words, the default WooCommerce setup only stacks thumbnail images and doesn’t allow you to slide through the main product image either.

If you have more than just a few product images this can look messy. It can also take up a lot of space on the product page. Space you could be using to sell your product.

The good news - you can add a product gallery slider to your WooCommerce store with the help of the plugin WooThumbs for WooCommerce. Allowing you to turn these stacked thumbnails into a slider instead.

product gallery slider woocommerce
Product gallery slider controls using WooThumbs for WooCommerce

So in this article, we’ll explain how to add a product gallery slider to your WooCommerce store in just a few steps. Plus, we'll get it done in no time with WooThumbs for WooCommerce.

But before that, let’s find out why adding a product gallery slider to your WooCommerce store will benefit you.

In this section, we’ll outline some reasons why adding a product gallery slider to your WooCommerce product page is beneficial. Plus we’ll give you some scenarios where it works particularly well.

A product gallery slider saves space

Your WooCommerce store might have a lot of information about your products. But for your site to be user-friendly you don’t want to create a messy product page with too many images.

One of the reasons a product gallery slider will benefit you is because it can accommodate several image thumbnails without using too much space. Meaning - additional image thumbnails will be hidden, unless the customer clicks the slider arrows.

gallery slider woocommerce

A product gallery slider reduces overwhelm

Visuals are more engaging than text. According to research, 90% of information that sticks to your customers’ brains are visuals. But what if you have too many images or additional variational images to display? Your customers will be overwhelmed by the extra information at first glance.

A WooCommerce product gallery slider helps you tackle this problem. It lets you add as many images as you want, but with a twist. It allows customers to scroll through the product images one by one by using the slider arrows on the main product image in the gallery.

So now we know the main benefits, let’s look at some specific examples of why using a product gallery slider like WooThumbs works so well.

Scenario #1: Enhance user experience for convenience

Sometimes customers who shop online search for minute details of the product. For example, if someone’s interested in buying a sports shoe, they might want to know the sole structure, the knit of the shoelace, heel height, etc. They would want to zoom in into the pictures one at a time for a closer look.

WooThumbs is extremely useful for these situations. It comes with a customizable zoom feature that gives an expanded view of the product image, showcasing complex and tiny details.

Scenario #2: Showcase variable products easily

If you have variable products in your WooCommerce store, you might need to add more than one image per variation. With a standard WooCommerce setup, this isn’t possible.

additional variation images woocommerce

WooThumbs solves this problem by allowing you to add as many additional variation images as you like. These images will then be displayed in the product gallery slider on your product page. Your customers can then simply slide through the gallery to find the version of the product they like.

Scenario #3: Add videos for better understanding

Imagine a situation where a customer wants to buy your product but has no idea how to use it. They’ll likely be confused about whether to buy the product or not.

Videos are even better than images. They deliver a clear message and are far more engaging. In case you sell unique or difficult-to-use products, you can add a video tutorial in your gallery that can make the understanding process easier for customers.

You can’t add a video to your product gallery with the standard WooCommerce install. But the good news is, with WooThumbs you can add high-quality videos to your product gallery. Either upload your own or embed via YouTube or Vimeo - it’s as simple as that.

WooCommerce video gallery

So now we know the benefits, let’s find out what WooThumbs is and how we can add it to WooCommerce.

What is WooThumbs for WooCommerce?

WooThumbs improves the product gallery by allowing you to customize almost every aspect of the product gallery. It also allows customers to slide through images for maximum impact and user-friendly engagement.

Here are some of the key features of WooThumbs for WooCommerce:

  • Customize the image gallery layout to suit your specific products and themes.
  • Enable sliding thumbnails for browsing convenience.
  • Multiple zoom options to showcase the details.
  • Add unlimited additional images to your product variations.
  • Ultra-fast loading times with advanced caching to enhance user experience.
  • Display only relevant product images for the selected variation.
  • Embed video directly into the product gallery for maximum impact and host them on multiple platforms.
woocommerce top slider

So now we know what WooThumbs for WooCommerce is, let’s get it installed and add the product gallery slider while we’re there.

For this tutorial, we’re presuming you have a WooCommerce site with products already set up. You’ll also need to purchase the WooThumbs for WooCommerce plugin, which you can find here.

Step #1: Install WooThumbs for WooCommerce

Once you’ve purchased WooThumbs for WooCommerce from the Iconic store, take the following 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 license key.

With WooThumbs for WooCommerce installed, we can move on to adding a product image slider to your product gallery.

Step #2: Enable previous and next arrows

To allow the previous and next arrows to appear on the main product image, you need to enable it. For that, you need to do the following.

  1. From your WordPress dashboard, go to WooCommerce → WooThumbs and click the Navigation tab at the top.
  2. Go to General Navigation Settings and next to Enable Prev/Next Arrows?, change the dropdown to Yes.
  3. Then scroll down to the bottom of the page and click the blue Save Changes button.
enable prev next

Once done, the previous and next arrows on the main product image will be enabled.

Step #3: Add your sliding thumbnails

The Thumbnails Type setting in WooThumbs allows you to choose between sliding or stacked thumbnails.

Sliding thumbnails will display all of your thumbnails in a single row/column. If you display 4 thumbnails at a time but the product has 6, you’ll be able to scroll to the other thumbnails using the built-in slider.

Stacked thumbnails will display all thumbnails at once and stack them in rows.

So if you want to save space on your product page, the sliding thumbnails option is best.

To enable sliding thumbnails, take the following steps:

  1. From your WordPress dashboard, go to WooCommerce → WooThumbs and click the Navigation tab at the top.
thumbnail settings
  1. Scroll down to the Thumbnails Settings section and next to Enable Thumbnails?, change the dropdown to Yes.
  2. Next to Thumbnails Type, change the dropdown to Sliding thumbnails.
  3. You’ll then be able to change how many thumbnails appear below your main image by changing the number in the Thumbnail Count section.
  4. You can also choose if you want to enable or disable the prev/next controls by changing the
  5. Enable Thumbnail Controls? dropdown to Yes or No.
  6. Then scroll down to the bottom of the page and click the blue Save Changes button.

Once done, your product gallery slider will be enabled.

product gallery slider woocommerce

Step 4 (optional): Change the gallery slider transition effect

WooThumbs for WooCommerce allows you to change the effect shown to customers when they scroll through your new product image gallery.

With just a few changes to the plugin settings, you can choose between the horizontal slide, vertical slide, and fade.

To change the transition effect, take the following steps:

  1. From your WordPress dashboard, go to WooCommerce → WooThumbs → Carousel.
carousel settings
  1. In the Carousel Settings section, you’ll see a dropdown next to Mode. Use this to pick your preferred transition.
  2. Next, you can set the Transition Speed. This is the speed at which the gallery changes from one image to another.
  3. You can set the images to automatically slide/fade after the page loads by enabling the Autoplay option.
  4. Finally, you can enable or disable Infinite Loop. This means when you get to the end of your images it will go back to the start when you click the next icon.
  5. Once you’re happy with all your settings, scroll to the bottom of the page and click the blue Save Changes button.

Once done, you’ll have successfully customized your product gallery slider in WooCommerce.

That’s it! In this article, we’ve explained how to improve your WooCommerce product page by adding a product gallery slider. By making this change, you’ll be able to save space, reduce overwhelm, and improve your customer’s experience in no time at all.

All of this and more can be done with the easy-to-use plugin, WooThumbs for WooCommerce.

Please share your thoughts...

Your email address will not be published.