Looking for a WooCommerce video gallery plugin to help you work with or sell videos at your store? There are several reasons why your store can benefit from a video gallery layout:
- Selling videos with WooCommerce - you can offer a preview or promo video that visitors can watch before they purchase the full video.
- Using promo/example videos to promote other products - similarly, you can use this plugin to add video previews for physical products. This convinces shoppers to buy and boosts your conversion rate.
You can use the same WooCommerce video gallery plugin for both of these use cases. It will help you create a grid/table of your products, where a visitor can watch a video preview for each product and add the product to their cart right from the same gallery.
Or if you prefer, you can add the video previews in a quick view lightbox for each product:
In this guide, I'll tell you what you need to create a video gallery for your WooCommerce products like the examples above. Then, I'll give you a quick step-by-step guide on how to set them up.
Types of video you can sell with WooCommerce
You can use WooCommerce to sell absolutely any type of video. This includes:
- All video genres - fiction, nonfiction, films, movies, educational video.
- Any type of video - animations, commentary, drone footage, behind-the-scenes event coverage, how-to video tutorials, interviews, presentations, promotional product videos, stock footage, motion graphics and presets, After Effects project files, Apple Motion or Cinema 4D templates, Flash elements files, video overlays and textured, Premiere Pro templates, social media video templates, video effects and transitions.
- All video file types - MP4, WEBM, AVI, QuickTime, WAV, and many more.
Whatever sort of video you want to sell online, keep reading to discover the best way to do it.
How to create a WooCommerce video gallery
Why WooCommerce Product Table makes a great video gallery plugin
WooCommerce Product Table lets you display all or some of your WooCommerce products as a flexible grid/table. You can control exactly what information displays in your table including add to cart buttons and - you guessed it - product videos.
The advantage of a table view is that your customers can watch videos for multiple products on one page - there's no need for them to keep going to the individual product page. You can do this by either adding embedded video players directly to the product table, or to a quick view lightbox for each product.
Similarly, your shoppers will also be able to select variations and add products to their carts right from the video gallery - again, no multiple tabs or page reloads required.
Whether you're selling videos with WooCommerce or just want to use video to promote other types of product, it's a more convenient approach for your visitors.
Below, we'll show you how to get this WooCommerce video gallery plugin all set up - with or without quick view. Either way, you'll need the WooCommerce Product Table plugin installed and activated at your WooCommerce store.
Step 1: Add video to WooCommerce products
To get started, you need to add an embedded preview video to the individual products that you want to display with WooCommerce Product Table.
This process is the same whether you're selling videos with WooCommerce or just adding video to a regular product.
You do have some choices for where and how you add the video, though.
First off - how.
The easiest way is to just embed a video player from YouTube or Vimeo. If you don't want YouTube branding, you can pay for one of Vimeo's unbranded plans, or a service like Swarmify. This can seamlessly import and serve YouTube video but with an unbranded player.
Finally, you can always use the self-hosted WordPress video player shortcode, though there are some good reasons not to.
Now, the where.
If you're not already using the Product short description field, that's the easiest spot to add your video. In fact, that's what we'll do for this example. All you need to do is embed your video in the text editor using normal WordPress oEmbed functionality. This is incredibly easy - simply paste the URL of your video from YouTube, Vimeo or similar.
But if you're already using the short description field for something else, you can also create a custom field to embed your videos using a free plugin such as Advanced Custom Fields. (Note: You can only use custom fields if you're adding video players directly to the product table. If you want to add videos players to a quick view lightbox, then you must use the short description.)
Finally, add videos to all the products you want to display with the WooCommerce video gallery plugin.
Step 2: Create a product table for your WooCommerce video gallery
Once you've added video to the relevant products, you need to configure WooCommerce Product Table to work as a video gallery plugin.
Go to WooCommerce → Settings → Products → Product tables.
While you should look at all the plugin's settings to see what interests you, if you want to create a WooCommerce video gallery, we definitely recommend that you configure these settings as a minimum:
- Columns - make sure to include the summary or the custom field that you added to hold your video. And if you're planning to add quick view to your video gallery, then you should also add a quick-view column. Learn more about columns.
- Add to cart column - configure how you want your add to cart button to function, including variations.
- Lazy load - if you have lots of products with videos, you might want to enable lazy loading for performance reasons.
- Shortcodes - make sure to check this box so that your embedded video players load properly.
This page sets the plugin's defaults. You can also always override those defaults, or add additional options, by directly using shortcode parameters.
Step 3: Choose which products to display
Now, you just need to choose which products to display in the WooCommerce video gallery. Skip this step if you simply wish to list all your products on the same page.
You can list WooCommerce products by their:
- Post ID
For example, if you have a category called "video" then you can target it like so:
But if you only added video to a few WooCommerce products, you could also directly target them by post ID, tag, or lots of other conditions.
Step 4: Add shortcode to page where you want to display WooCommerce video gallery
To display your WooCommerce video gallery, you just need to add the
[product_table] shortcode to the post or page where you want it to appear:
Add videos to a WooCommerce quick view lightbox
So far, you've learned how to create a WooCommerce video gallery with embedded video players in the main product list. You can use the widths option in WooCommerce Product Table to choose how much space the video player column takes up. However, videos inevitably require a fair amount of vertical space. If you want to list products in a more compact way, then it might be better to show the videos in a quick view lightbox for each product:
Using WooCommerce quick view is better than just adding video players to the single product page. That's because you don't want to take customers to a separate page for each product - that slows things down and takes them away from the main product list. By watching sample videos and adding to the cart from a quick view lightbox, the customer remains on the same page. This stops them from getting lost and encourages them to add multiple products to the cart.
Here's how to set it up:
- WooCommerce Quick View Pro.
- Go to WooCommerce → Settings → Products → Quick view, enter your license key and choose your quick view settings. Make sure you enable the short description, as this is where you've added the video players. You can choose whether or not to show other sections such as the product images or add to cart buttons.
- Add quick-view to the list of columns on the Product Table settings page (WooCommerce → Settings → Products → Product tables).
And that's it!
How to Create a WooCommerce Video Store
Above, you learned how to create a customizable WooCommerce video gallery. However, what if you're specifically looking to sell videos on WooCommerce?
In that case, the same basic steps apply for creating the video gallery, but you'll want to go about creating your WooCommerce products a little differently.
That is, in the example above you learned how to display videos in a gallery as part of a product. Now, you're going to learn how to make the video the product itself.
Here's the basic process:
- Upload the video file somewhere accessible
- Mark products as Virtual and Downloadable
- Add video file to WooCommerce product
Let's go through it in detail…
Step 1. Upload video file somewhere accessible
To get started, you'll need to upload the video file itself to a place where visitors will be able to download it.
For a small file, you can just upload it straight to your server via your WordPress Media Library.
However, if you have larger files, or if you're planning to have a ton of downloads, a better option is to use a dedicated storage service like Amazon S3 or DigitalOcean Spaces. These services are affordable, reliable, and lower the burden on your site's server.
Step 2: Create a virtual, downloadable product
Next, create a new WooCommerce video product (Products → Add New).
Fill out all the information like normal. Only now, make sure to check the boxes for Virtual and Downloadable:
Step 3: Add download link
Once you check those two boxes, you should see a new Downloadable files section in the General tab of your WooCommerce video product.
Click the Add File button and insert the download link from Step 1:
Once you're finished, Publish your product as you normally would.
When someone purchases the product, they'll get a unique link to download the video file.
If you want to create a WooCommerce video product gallery, you can follow all the same steps from above.
Can I embed video playlists?
If you want to show more than one video per product, then you can embed entire video playlists into the WooCommerce video gallery. You can easily do this using the video playlist shortcode that comes with WordPress itself.
Use the following instructions to add a video playlist to any of the fields you're displaying in the product table:
- Click the 'Add Media' button.
- Choose the 'Create Video Playlist' button on the left.
- Upload and select the videos you wish to include in the playlist.
- Click the 'Create a new video playlist' button on the bottom right.
- On the next screen, add any captions for each video and change the settings as required.
Creating video playlists in Gutenberg
At the time of writing, the above instructions only work if you're using the classic WordPress editor and not Gutenberg. Hopefully Gutenberg will add a video playlist button in future. In the meantime, you can create video playlists by adding the following shortcode to a Gutenberg 'Shortcode' block:
[playlist type="video" ids="12345,23456,34567,45678"]
Replace the ID's with the actual ID of each video you wish to include in the playlist. You can find these by going to the 'Media' section of the WordPress admin, clicking on a video, and looking at the URL at the top of your browser tab. For example, if the URL ends /wp-admin/upload.php?item=12345 then you need to add the ID
12345 to the shortcode.
What about piracy?
With the example above, even people who didn't purchase a video would still technically be able to download it if someone shared the link with them.
Now, digital piracy is something you're never going to stop, so a lot of store owners will just live with that and focus on finding more paying customers.
But if you are concerned and want to at least make it harder for people to share the download links, you can use the Download limit and Download expiry options to limit access:
Just be aware that these restrictions might frustrate some legitimate customers who want to download a file multiple times or in the future.
Add videos to the gallery on the single product page
So far, we've learned how to display videos on your product list pages. This includes your main shop pages, categories, and any other page where you list products.
It's also a good idea to add video to the product gallery on the single product page. That way, customers can watch the product videos wherever the product appears in your store. You can do this by using the WooThumbs plugin alongside WooCommerce Product Table. We have a separate tutorial about how to do that.
Go build your WooCommerce video gallery!
And that's it - you just added a user-friendly WooCommerce video gallery to your store. Not only can visitors browse videos for multiple products without leaving the page they're on. They can also add products right to their carts for a smooth, friction-free checkout process.
Now go build something great at your store!
Have any other questions about how to build a WooCommerce video gallery with WooCommerce Product Table and Quick View? Leave us a comment!