How to add WooCommerce video in your product gallery

How to add WooCommerce video in your product gallery

If you’re looking to add WooCommerce video in your product gallery, this guide is here to help.

We've previously looked at how to create a WooCommerce video gallery with videos appearing on your main shop and product listing pages. But how do you display video in the image gallery on the single product page like this?

Embedded video thumbnails

In this guide, we’ll walk you through how to add a video to your WooCommerce product page gallery in just a few steps. We’ll do this with the product gallery plugin WooThumbs for WooCommerce.

As a bonus, we’ll also reveal the best format for uploading the best possible product video for your online store.

So, let’s get straight to it and add a WooCommerce video to your product gallery.

In this section, we’ll walk you through, step-by-step, how to add video to your WooCommerce product gallery.

But first, we’ll need to explore our options by asking: "How do I embed a video in the image gallery of a WooCommerce product?"

What plugin allows adding video to a WooCommerce product gallery?

By default, WooCommerce doesn’t allow you to have video in the product gallery (only product images). So to do this, we’ll need the help of a plugin.

How to select the best WooCommerce product video plugin (features to look out for)

When it comes to picking a plugin that allows you to have WooCommerce video in your product gallery, there are a few things to look out for.

Video source support

Because adding product video is the main thing you’re looking for, you’ll want to make sure the plugin you chose has as many options as possible.

For example, you’ll want to make sure you can add the following video types/sources:

  • Self-hosted video. The plugin should allow you to upload video files directly to the WordPress media library and then add them to your product gallery.
  • Embedded video. Let’s say you want to host your video elsewhere (Vimeo videos, Dailymotion, YouTube video). If this is the case, you should be able to copy the video URL and add it to the gallery without fuss.

Video controls and customization

As well as giving you freedom over the type of video you add, you should also be able to control how the video player looks and performs.

This means the plugin settings should allow you to customize fullscreen options, the video thumbnail, if the video should loop or autoplay, and if customers should see the controls at all.

So, with all this in mind, what’s the best WooCommerce product video plugin for the job?

The best WooCommerce product video plugin: WooThumbs for WooCommerce

Video controls

In this case, we recommend the product page gallery plugin WooThumbs for WooCommerce.

Features

With WooThumbs, you’ll be able to add video to your WooCommerce product gallery in just a few minutes. You’ll have the choice of uploading your own or embedding an existing video you’ve uploaded to YouTube, Vimeo, Dailymotion, Screencast, and more.

You can add multiple videos to your WooCommerce product page with WooThumbs, so you’re not just limited to one per product.

As a bonus, you can also add sound files from SoundCloud, Spotify, and ReverbNation.

WooThumbs also gives you complete control over your video player’s settings. Allowing you to show or hide specific controls, play video on a loop, and set your video thumbnail.

As a bonus, WooThumbs works hard to ensure your product gallery isn’t slowed down by adding video. To counteract this, you can use the Lazyload setting to reduce page load time.

While WooThumbs specializes in adding videos to your product gallery, it doesn’t stop there.

WooThumbs for WooCommerce product image gallery features

As a product gallery plugin, WooThumbs is designed to completely overhaul and improve the default product page gallery.

It does this by:

  • Giving you options for the design and display of your product gallery with templates. Including the traditional carousel layout, or a modern stacked image gallery layout.
  • Allowing you to completely customize each element of your product gallery, from your thumbnail position and size, featured image sizes, zoom options, transitions, and so much more.
  • Giving you the ability to add multiple product images for each of your product variations. As well as assigning images to attributes so images load based on the attribute the customer has selected.

So now we know why WooThumbs is a great option for adding WooCommerce video in your product gallery, let’s get to adding it.

Can I add video to WooCommerce product gallery?

In this WooCommerce tutorial section, we’ll walk you through how to add a WooCommerce video in your product gallery using WooThumbs for WooCommerce.

Step 1: Install WooThumbs for WooCommerce

The first thing we’ll need to do is get WooThumbs and add it to your WordPress website.

To do this, take the following steps:

  1. To get started, purchase the WooThumbs for WooCommerce WordPress plugin from the Iconic store.
  2. Then, from your WordPress admin dashboard, go to Plugins → Add New → Upload Plugin.
  3. Choose the zip file you downloaded, upload it, and then click Activate.

Step 2: Add WooCommerce video in product gallery

Now we have WooThumbs installed, it’s time to add our product videos. We’ll focus on uploading your own video in this tutorial, but if embedding an existing one, the steps are very similar.

  1. From your WordPress dashboard, go to Products → All Products and click on the product you want to add new video to.
  2. Scroll down the page until you get to the Product gallery section and click the Add product gallery images link.

At this stage, you will need to upload an image to your product gallery, which will act as the thumbnail for your video. This will show in the thumbnails below the featured video image and as a preview. When clicked, the embedded or uploaded image will play.

Add product gallery images
  1. Upload your image to the Media Library and on the right, underneath WOOTHUMBS MEDIA DETAILS, you’ll see a button called Attach MP4.
    Attach MP4
  2. Click this button and upload your self-hosted video to the media library.
  3. Once happy, click the Attach MP4 button and your self-hosted video will be added to your WooCommerce product gallery.

Note: If you’re embedding a video from an outside source (say YouTube), instead of attaching your MP4, you’ll simply copy and paste the video link into the Media URL section.

Now we have video in our product gallery. It’s time to customize how our improved gallery looks and feels.

How to customize WooCommerce product gallery?

We have our video ready, but while we’re here, let’s make the most of our WooCommerce product gallery with WooThumbs’ settings.

How to customize your video gallery settings?

The first thing we’ll focus on is our video player settings. To customize these, take the following steps:

  1. From your WordPress dashboard, go to WooCommerce → WooThumbs and click on the Video link at the top of the page.
  2. This page is where you’ll be able to customize what video controls customers can see or have access to (if any), if you want your videos on loop, and lazyloading.

By default, WooThumbs for WooCommerce upgrades your video controls to ones that are sleek and modern, so when it comes to design, WooThumbs has you covered.

But if you do want more control over this, WooThumbs gives you some options.

How to customize your WooCommerce product gallery settings?

  1. Click on the Display tab in your WooThumbs settings and you’ll see a whole host of options for the user experience of your product gallery.
    Display tab
  2. Here, you can change the layout style, its width, position, and more.
  3. Included here are also the colors and options for your video control and general gallery control buttons and navigation (previous and next). Customize these as much or as little as you like.
    Video controls

    UI settings
  4. WooThumbs also has options for fullscreen or lightbox popups, autoplay functionality, zoom settings, transition effects, and so much more.

Essentially, WooThumbs gives you a huge amount of control over your WooCommerce product gallery’s look, feel, and features.

What is the best video format to use for WooCommerce product videos?

When it comes to choosing the best video format for WooCommerce product videos, there are a few things to bear in mind.

The best format for self-hosted videos

If you’re uploading directly to your own WordPress website and adding to your product gallery using WooThumbs, the best format is MP4.

MP4 offers a good balance between video quality and file size. It’s also widely supported across all browsers. It’s worth keeping in mind though, that to ensure a product page that loads fast, you’ll want to keep your product videos short.

The best format for embedded videos

If you’re embedding video content from a different platform like Vimeo or YouTube, the format entirely depends on the platform you’re uploading to in the first place.

Embedded video offloads the video hosting bandwidth to the external platform. In general, this keeps your site loading faster while still allowing for high-quality video.

As a bonus, video on platforms like YouTube can drive traffic back to your site through improved SEO and search engine visibility.

So there we have it, a simple and easy way to add WooCommerce video in your product gallery without slowing down your site.

If you’re looking to add product video to your WooCommerce store, a plugin is the way to go. With WooThumbs for WooCommerce in hand, you’ll not only be able to add product videos to your ecommerce store, but you’ll improve your customers’ user experience at the same time.

Please share your thoughts...

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