How to Customize the Product Gallery Thumbnails

Once you’ve installed WooThumbs on your site, you’ll be able to customize how your product gallery looks and behaves. In this guide, we’re going to focus specifically on the thumbnails.

With WooThumbs, you’ll be able to change how they look, where they’re positioned, their size, how fast they move, and more. We’ll go through each of these below.

To get to all of your thumbnail position and design settings, take the following steps:

  1. From your WordPress dashboard, go to WooCommerce > WooThumbs and click the Navigation tab at the top.
  2. You’ll need to make sure Enable Thumbnails? is set to Yes if you want them to display.
  3. If you want to enable the previous and next arrows on your thumbnails, make sure to set the dropdown next to Enable Prev/Next Arrows? to Yes.
  4. Once done, you can customize how these thumbnails look and behave with the following settings.

Sliding or stacked thumbnails

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

Sliding thumbnails will display all of your thumbnails in a single row/column (depending on thumbnail position). If you display 4 thumbnails at a time but the product has 6 images, you’ll be able to scroll to the other thumbnails using a slider.

WooThumbs slider
Sliding thumbnails using WooThumbs for WooCommerce

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

WooThumbs stacked
Stacked thumbnails using WooThumbs for WooCommerce

So if you want to save space on your product page, the sliding thumbnails option might be best. If you want all of your thumbnails visible immediately, go with stacked.

To pick between these two settings, take the following steps:

  1. From your WordPress dashboard, go to WooCommerce > WooThumbs and click the Navigation tab at the top.
navigation tab WooThumbs
  1. Scroll down to the Thumbnails Settings section and next to Thumbnails Type, change the dropdown to either Sliding thumbnails or Stacked thumbnails.
pick thumbnail type
  1. You’ll then be able to change how many thumbnails appear below your main image by changing the number in the Thumbnail Count section.
how many thumbnails woocommerce
  1. If you’re using Sliding Thumbnails you can also choose if you want to enable or disable the prev/next controls by changing the Enable Thumbnail Controls? dropdown to Yes or No.
enable thumbnail controls

Change the position of the thumbnails

Not every store suits thumbnails below the main image. Fortunately, with WooThumbs you can easily move the thumbnails to any side of the main image.

Thumbnails left woocommerce
Thumbnails positioned left using WooThumbs for WooCommerce

To do this, take the following steps:

  1. From your WordPress dashboard, go to WooCommerce > WooThumbs and click the Navigation tab at the top.
  2. Scroll down to the Thumbnails Settings section and next to Thumbnails Position, change the dropdown to Above, Below, Left, or Right, depending on which suits you.
thumbnail position
  1. If you choose the left or right position, you can also change the width of the thumbnails by changing the number in the Width (%) setting. The default is 20%, which means the thumbnails will occupy 20% of the total space available, and the main image will account for 80% of the space.
thumbnail width

How to hide the product gallery thumbnails

If you don’t want the product gallery thumbnails to appear on your product pages, take the following steps:

  1. From your WordPress dashboard, go to WooCommerce > WooThumbs and click the Navigation tab at the top.
navigation tab woothumbs
  1. Scroll down to the Thumbnails Settings section and next to Enable Thumbnails?, change the dropdown to No.
hide thumbnails woocommerce
  1. Then scroll down to the bottom of the page and click the blue Save Changes button.
  2. Once done, your product image thumbnails will no longer be visible on your store.
hide thumbnail WooCommerce

Other settings

In addition to the settings above, you can also change the transition speed of your thumbnails, their spacing, and whether to enable the bullet navigation.

All of these can be found on the Navigation tab by going to: WooCommerce > WooThumbs and clicking the Navigation tab at the top.

WooThumbs for WooCommerce

Enable zoom, sliders, video, fullscreen, multiple images per variation, and customisable layout options for your product imagery.

Was this helpful?

Please let us know if this article was useful. It is the best way to ensure our documentation is as helpful as possible.