How to Create an Advanced Image Gallery in WooCommerce

- written by

When it comes to the display product images on a WooCommerce store, we all know how important it is to give customers the best experience as they browse your offerings..

WooCommerce comes with some basic, built-in display capabilities. But with the plugin, WooThumbs for WooCommerce, you can now add multiple variation images, embed video and customize the look of your images. With this plugin you also get a nice design of the zoom, thumbnail layouts and carousel effects.

Online Store Product Images Using WooThumbs for WooCommerce

Let’s start by looking at the settings this plugin offers to give you more control over your product images.

Display Settings

There are two parts to this. First, the Display Settings that give you control over the image gallery in your single product view:

Display settings

And then the image sizes for the single product page:

display settings image sizes

And you can fine-tune the carousel settings for the product pages:

carousel settings

Navigation Settings

You will start by toggling the previous/next arrows on or off:

Navigation general settings

Next you can control the thumbnails and how they are displayed. Not only can you choose the location, but you can also have them stacked, sliding or not showing at all:

Navigation thumbnail settings

And you have the option of using bullet navigation instead:

navigation bullets toggle

Zoom Settings

The plugin comes with some great built-in zoom features for your product images, starting with the zoom type:

Zoom general settings

You can choose your width and height:

zoom outside and follow settings

You can choose your specific settings for the outside zoom option:

zoom outside settings

And the shape for the zoom follow settings:

zoom follow settings

Fullscreen Settings

You also have the option to toggle on the fullscreen image and allow customers to click anywhere on the image to open it—and also add the image time:

fullscreen settings

Responsive Settings

As we all know, many people access online shops via mobile, so having more control over the images is important. With these settings, you can set the breakpoint of the images for better display on mobile:

responsive settings

WooThumbs on the Front End

Let’s take a look at what this does for your image gallery/thumbs. Below is what it would look like using the Storefront theme without this plugin:

default thumbnail on product page

And if we roll over the image, we get one option for a zoom:

default zoom

Now if we change some of the settings using this plugin, we get something that looks like this. You will see that it shows the arrows for both navigation in the thumbs and in the larger image:

gallery with plugin activated

We can do an inner zoom:

zoom higher magnifcation

Or an outside zoom:

outside zoom

These are just some examples of all the ways you can change the view of your thumbs and galleries on your product pages.

Creating Multiple Images for Variations

Another great option you have is to add a gallery of images to specific variations, something  you cannot do with WooCommerce images by default, which would give you only one image per variation.

When this plugin is activated, you now have the option to add additional images and create a gallery for variations.

additional images for variation

You have probably seen it on Amazon: a video as part of the product gallery. With WooThumbs you can do this easily.

First, you will want to get the URL from YouTube or another service you use, like Vimeo. Then just open up your media gallery and select an image you want to use for the thumbnail of the video. You will find the WooThumbs Media Details, where you can paste in the URL and set your aspect ratio:

add video to gallery in media library

Once you have those in, there is no need to save. Just click out of the image and it will be added automatically.

Now you will find the video ready to view in your gallery:

video added to gallery

Settings Per Product

All that I have showed you so far is for all products globally. But you can also turn off the gallery for any specific product. You can put in a video URL that will open in the fullscreen gallery as well.

And if you are using the gallery for a variation, you have two more options. The first, Maintain Site Index, keeps the slide index maintained if you change out images. The second, the Maintain Gallery, allows the parent product to be applied to product variations in addition to the ones you may have added.

woothumbs per product settings

Bulk Edit Variation Images

You can add additional images to a variation in bulk, which saves you a bit of time:

bulk edit variation images

So if you are looking to get more control over the thumbs and galleries on the WooCommerce product pages and bring more attractive and useful images of products to the customers, I recommend that you check out the WooThumbs For WooCommerce Plugin.

Only the posts on the builder blog here may include affiliate links. If you click on them and make a purchase, I'll get a commission, at no cost to you.