How to customise your product gallery thumbnails
One of the most flexible parts of WooThumbs is the thumbnails. This guide will help you customise them on your WooCommerce store.
- Firstly, login to your WordPress admin area and navigate to WooCommerce > WooThumbs > Navigation.
- From here, you will see the Thumbnail Settings section.
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.
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 might be best. If you want all of your thumbnails visible immediately, go with stacked.
Both of these layouts are affected by the Thumbnails Count setting. By changing this you can choose how many thumbnails appear in a row or column (depending on thumbnail position).
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.
Select your position under the Thumbnails Position setting. This is Left for example:
If you choose the left or right position, then you can also change the width of the thumbnails. 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.
You can change this value by modifying the Width (%) setting.
The other settings you might want to look at are the ability to disable the thumbnails completely, transition speed for sliding thumbnails, and thumbnail spacing.
All of these settings are located in the same settings section.