How to Improve the Woocommerce Product Gallery (Step-By-Step Tutorial)

Pictures really do paint a thousand words when it comes to eCommerce. For the majority of online consumers, purchasing decisions are based on product photography, not the persuasive sales copy that you’ve spent hours perfecting. Therefore, you need to ensure your WooCommerce store has the best possible photos and videos to ensure maximum conversions. The problem? The standard WooCommerce product gallery doesn’t show off your products in the best possible way.

Metorik Woocommerce Reports

Fortunately, it’s a problem that’s easily fixed. This step-by-step guide will walk you through how to dramatically improve your WooCommerce product gallery, regardless of which WooCommerce theme you’ve chosen to install.

The best part? It’s an easy three-step process with the help of the WooThumbs for WooCommerce plugin.

Why improve the standard WooCommerce product gallery?

While the standard WooCommerce product gallery is functional enough, by upgrading your product photography with the help of a plugin, you can dramatically increase your sales.

As highlighted above, almost all online consumers judge a product on its photography. But the out-of-the-box WooCommerce gallery is pretty basic. It affords you the luxury of displaying multiple images below the featured product photo, but that’s pretty much it.

High-converting eCommerce product galleries have multiple images per product variation, embedded product videos, and smooth zooming to allow the customer to get up close and personal with your products. That’s without mentioning effects such as automatic transitions or sliders for your photos.

Regrettably, the standard WooCommerce product gallery doesn’t offer any of these features. So now we’ve outlined the benefits of upgrading your WooCommerce product gallery, how can the WooThumbs for WooCommerce plugin help?

How WooThumbs for WooCommerce works

By adding WooThumbs to your WooCommerce store, you can enjoy a wide range of benefits that will ultimately increase sales for your WooCommerce store.

The plugin allows you to:

  • Choose between a horizontal slider, vertical slider, or fade effect.
  • Position the thumbnails above, to the side, or below the main product image.
  • Adjust thumbnail spacing, icon colors, transition speeds, and much more.
  • Add additional variation images.
  • Embed video content into your gallery from YouTube, Vimeo, and other platforms.
  • Smooth image zoom with customizable display modes.
  • Implement a fullscreen, fully-responsive image gallery, including mobile pinch-and-zoom.
  • Choose how many thumbnails to display at a time.

How to create a better product gallery with WooThumbs

If you’re ready to create your awesome WooCommerce product gallery, then the first step you need to take is installing and activating the WooThumbs for WooCommerce plugin. For more details, check out our step-by-step guide on how to install a WordPress plugin.

Customize your product image gallery

While functional, the standard WooCommerce product gallery isn’t geared up to doing your products justice. By customizing your product gallery, you can better match it to your overall WooCommerce theme. Including altering the image sizes on your listing, and adjusting the layout to increase conversions.

1. Once installed, navigate to WooCommerce > WooThumbs.

2. Once within the WooThumbs Dashboard, head to Display Settings.

3. Within this menu you can change the following:

    • Gallery Width
      By default, this is set to 48% as that is the most common width of the image section in WooCommerce themes. However, you may want to increase that to as much as 100% to better match your specific theme needs or personal preferences.
    • Position
      Float the image gallery to the left, right, or not at all.
    • Icon Colors
      The color of the icons that may be present over the image, for example, the previous/next icons.
    • Show Icons on Hover?
      When enabled, icons will only be visible when the image is hovered over.
    • Show Icon Tooltips?
      When icons are hovered over, a tooltip will be displayed.

woothumbs woocommerce product gallery

4. You can then navigate to Image Sizes to change your image sizes, crop ratios, thumbnail sizes, and add large image sizes.

5. There are a further five customization options available to users that are reached from the same dashboard. They are as follows:

    • Carousel Settings
    • Navigation Settings (adding arrows to your WooCommerce product gallery)
    • Zoom Settings
    • Fullscreen Settings (creating a product gallery lightbox)
    • Responsive Settings

Add additional variation images

With the standard product gallery merely offering one photo, it can be very difficult for WooCommerce store owners to convert customers to buy worthy variants of a product listing. Thankfully, the WooThumbs plugin has the ability to add additional images to your product variations.

  1. Navigate to a variable product.
  2. Click the Variations tab.
  3. Expand one of the variations.
  4. Click the link labeled Add Additional Images. The media gallery will pop up.
  5. Select one or more additional images, and then click Add to Variation.
  6. You will now see the additional images listed in your variation tab. It’s important to note that you should still add a default “featured” image to your variation.
  7. Once you’ve completed this process for all variations, either Update your product or click the Save Changes button.

How to add a video to your WooCommerce product gallery

Video has been proven to be one of the highest converting media formats, with 73% of online shoppers more likely to purchase a product after watching a video. Without the option to add one in the standard WooCommerce product gallery, you’re going to need to use the WooThumbs plugin to do it.

There are three options for sourcing your video within WooThumbs: oEmbed-based media, embedded HTML, and self-hosted videos. For videos hosted on oEmbed sites such as YouTube and Vimeo, simply take the following steps (we’re using YouTube as an example).

  1. Copy the URL of your YouTube video.
  2. Next, open up your media gallery.
  3. Select the image you wish to associate the video with.
  4. You will then see two fields underneath the WooThumbs Media Details: these are URL and Aspect Ratio.

  1. In the URL field, paste the URL from YouTube. This is the main URL of the video; the same one you’d paste into your post/page editor to embed a video.
  2. If you have an embedded HTML link to your video, repeat the process but paste that direct link in the Media URL box instead.

Once you have completed the process, the media is automatically updated once you click out of the media gallery. There’s no need to save. You can then view the video on your product page.

Album image of woocommerce product gallery

Final thoughts on improving your WooCommerce product gallery

That’s it! You’ve just learned how to completely customize your WooCommerce product gallery, add additional images to your product variations, and embed those all-important product videos. 

By taking advantage of these product gallery improvements, you can totally transform the look and feel of your products, helping you to increase conversions within your WooCommerce store without breaking a sweat! 

All you need is a little help from the WooThumbs for WooCommerce plugin to transform your WooCommerce performance within seconds. 

Get WooThumbs

Team WPLift

Team WPLift

A team of WordPress experts that love to test out new WordPress related software, WordPress plugins and WordPress themes.

Related Articles

Coupons

THE #1 WORDPRESS THEME BUILDER

Create Your Own

Building beautiful WordPress websites has never been easier. Explore the visual drag & drop Theme Builder that does it all, and works on any theme. Coding skills needed: none.