woocommerce product gallery

Tips, WooCommerce Tutorials

How to Customize the WooCommerce Product Gallery

The standard WooCommerce product gallery is pretty basic. It allows you to add multiple images which are displayed below the main product image, but that’s about it.

woocommerce product gallery

Most of the time this simply isn’t enough for most store owners. So, if you’re looking to customize your WooCommerce product gallery and increase sales while you do it, this guide will help.

By the end of this article, you’ll know exactly how to customize your WooCommerce product gallery. The best part? You’ll be able to do it in 2 steps with the WooCommerce gallery plugin, WooThumbs for WooCommerce

Start your 14-day free trial of WooThumbs for WooCommerce

Start your free trial right now and instantly customize your WooCommerce product gallery.

or learn more

How WooThumbs for WooCommerce works

WooThumbs for WooCommerce allows you to completely customize your product image gallery to suit you and your online store. As part of this customization, it also enables you to:

  • Choose between a horizontal slider, vertical slider, or fade effect for your product gallery.
  • Adjust thumbnail spacing, icon colors, transition speeds, and more.
  • Embed video content into your gallery from YouTube and Vimeo. Or upload directly to WooCommerce.
  • Add multiple variation images for each product variation you have.
  • Show off your product to the fullest with smooth image zoom and customizable display modes.

When a customer visits a single product page, they’ll be able to scroll through all your product images and videos in an easy-to-use gallery. They’ll also be able to select the variation they want to view and scroll through multiple image variations for that product. 

WooCommerce variations

So, to customize your WooCommerce product gallery, all you need to do is follow the next few steps.

How to customise the WooCommerce product gallery with WooThumbs

To customize your WooCommerce product gallery, you’ll need to:

  1. Install the WooCommerce gallery plugin, WooThumbs for WooCommerce.
  2. Customise the gallery layout, style and preferences using the plugin.

That’s it. Below we’ll outline these steps in detail so you can start making more sales for your online store.

Step 1: Install WooThumbs for WooCommerce

To get started, start your free trial of WooThumbs for WooCommerce from the Iconic store: iconicwp.com/woothumbs

Then follow these 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 licence key.

Now that we have WooThumbs installed, we can move on to customizing your gallery.

Step 2: Customize the gallery layout

Customizing the style settings of your WooCommerce product gallery is likely at the top of your priority list. So, here’s how to adjust the settings to get the most out of your new gallery:

  1. Go to WooCommerce > WooThumbs in your WordPress dashboard.
  2. Select the Display tab at the top of the page.

The display settings determine how the overall gallery appears on the single product page. These settings include how much space the gallery takes up, its position on the page, styling, and icon settings.

Also included here are all the image settings, allowing you to set image sizes, cropping, and more.

WooThumbs settings
  1. Next, click the Carousel tab.

WooThumbs for WooCommerce automatically adds a carousel or slider to your WooCommerce product gallery. The settings on this page allow you to customize the transition style, speed, and duration of this.

WooCommerce gallery settings
  1. The next tab (Media), allows you to amend the settings for your embedded video. This includes autoplay, looping and controls.
  2. The Navigation tab controls the settings for the gallery slider element of the gallery. Here you can enable and change the settings for your thumbnails and customise how these look.
  3. The next two tabs (Zoom and Fullscreen) allow you to edit how the zoom function works for your product images and if users can view your images in fullscreen.
WooCommerce image zoom
  1. Lastly, the Responsive tab gives you greater control over what your product gallery looks like on mobile and how it functions.
  2. Once happy, click Save Changes at the bottom of your screen and your WooCommerce product gallery will be customized to suit you.
woocommerce product gallery

The following steps are optional but contain some great product gallery customizations you can do in just a few minutes.

Step 3 (optional): Add additional variation images

If you have multiple images for each of your product variations, you may be frustrated to find the standard WooCommerce product gallery only lets you upload one.

With WooThumbs for WooCommerce, you can add as many variation images as you like.

To add additional variation images in your WooCommerce store, do the following:

  1. Go to Products > All Products.
  2. Edit the variable product you want to add additional variation images to.
  3. Scroll down to the Product Data section of the page.
  4. Select the Variations tab.
  5. Click the expand arrow on the variation you want to add additional images to.
WooCommerce variable product
  1. Click the Add Additional Images button underneath your existing image and the media gallery will open.
  2. Select the variation images you want to add and once done, click the Add to variation button.
WooCommerce variation images
  1. You’ll now see the additional variation images in the Variations tab.
additional variation images
  1. Once you’ve customised all your variations, hit Save Changes in the Product Data section of the page and then scroll up to the Publish section of the page and click Update.

Step 4 (optional): Include embedded video

Another feature of WooThumbs for WooCommerce is the added ability to included embedded video in your WooCommerce product gallery. This is especially useful for showing off products to the fullest and increasing sales.

To add your video, do the following:

If you’re using a video from Vimeo or YouTube:

  1. Copy the URL of the video you want to show in your product gallery (either from Vimeo or YouTube).
  2. Go to Products > All Products.
  3. Select the product you want to add the video to.
  4. Navigate down to the ‘Product gallery’ module on the product page.
WooCommerce description
  1. Click the ‘Add product gallery images’ link.

Here you’ll need to upload a thumbnail image of the video you want to show, or you can use an existing image in your media gallery. This will act as a preview image in your WooCommerce product gallery. When a user then clicks the preview image, they’ll be shown the full video.

  1. Upload your image.
  2. In the URL field of your uploaded image, paste the URL from YouTube or Vimeo.
WooCommerce product video
  1. Then, set your aspect ratio. Most gallery images are square, so usually, 1:1 works well. 
  2. There’s no save button here because WordPress automatically saves media, so exit the media library and go back to your product page.
  3. Save or Update your product.

When you visit the page of the product you’ve been editing, you’ll see the video you’ve just uploaded displayed in the WooCommerce product gallery.

Video image gallery WooCommerce

Customize the WooCommerce product gallery on the shop or category page

An upgraded product page gallery does a lot of heavy lifting when it comes to boosting sales for your WooCommerce store. But what if you also want to improve the product images on the shop and category pages?

You might not have room for a full-blown product gallery on these pages, but you sure can add some impressive effects.

image swap thumbnails
Image Swap for WooCommerce Thumbnails effect

With a plugin like Image Swap for WooCommerce, you can add hover and click effects to your product images which can result in the following:

  • Fade on Hover, which fades out the first product image and replaces it with the next.
  • Slide, which shows a slider that customers can click through.
  • Bullets, which is similar to slide but shows bullet points instead of arrows.
  • Thumbnails, which shows your additional product images below the main one – these are clickable.
  • Zoom, which zooms in to show the detail of your product images.
  • Picture in Picture, which shows the next image as a small thumbnail in the corner of the main product image.
  • Modal Gallery, which when clicked, shows an enlarged view of your product image/s in a modal popup.
  • Enlarge, which shows a mild ‘enlarge’ effect of the whole image on hover.
  • Flip, which flips the first image to show the second.

To see all of these in action, you can check out the demo.

Start your 14-day free trial of Image Swap for WooCommerce

Start your free trial right now and instantly add product image effects to your WooCommerce store.

or learn more

Get customising your WooCommere product gallery

That’s it, your WooCommerce store now has a completely customized product gallery. With this up and running, you’ll be able to showcase your products better, provide customers with more visual information and boost sales while you’re at it.

Make these changes quickly and easily with WooThumbs for WooCommerce.

Start your 14-day free trial of WooThumbs for WooCommerce

Start your free trial right now and instantly customize your WooCommerce product gallery.

or learn more

Avatar

Gina is our in-house content creator and partnership manager. She’s passionate about working with plugin companies with copywriting/storytelling, content creation & marketing.

She can typically be found tending to her vegetable garden, writing, and travelling to mainland Europe.

0 Responses

Leave a Reply

Your email address will not be published. Required fields are marked *