When it comes to the display product images on your WooCommerce store, we all know how important it is to give your 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.
There are two parts to this. First, the Display Settings that give you control over the image gallery in your single product view:
And then the image sizes for the single product page:
And you can fine-tune the carousel settings for the product pages:
You will start by toggling the previous/next arrows on or off:
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:
And you have the option of using bullet navigation instead:
The plugin comes with some great built-in zoom features for your product images, starting with the zoom type:
You can choose your width and height:
You can choose your specific settings for the outside zoom option:
And the shape for the zoom follow 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:
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:
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:
And if we roll over the image, we get one option for a 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:
We can do an inner zoom:
Or an 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.
Adding Video to Your Product Gallery
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:
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:
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.
Bulk Edit Variation Images
You can add additional images to a variation in bulk, which saves you a bit of time:
So if you are looking to get more control over the thumbs and galleries on your WooCommerce product pages and bring more attractive and useful images of your products to your customers, I recommend that you check out the WooThumbs For WooCommerce Plugin.
Don't have the time to keep up with my content on a daily basis?
Sign up for our weekly digest that covers my past weeks podcasts, tutorials and the news from the WooCommerce community.
I write this myself and it is delivered to your inbox every Saturday morning.