Looking for ways to add video to a product gallery on your WooCommerce site?
Adding product videos to your WooCommerce store is a great idea. Videos can be used to quickly convey key information about a product to potential customers to encourage them to make a buying decision.
While WooCommerce doesn’t offer a built-in method to add video to your product galleries, there are ways to do it.
In this tutorial, I’ll show you how you can embed videos on your WooCommerce site.
Why Add Product Videos to Your WooCommerce Store
Videos are a popular form of content because they’re easy to consume. This is why social media platforms today are riddled with videos and YouTube is the second most visited website on the internet.
In the eCommerce field, a video can highlight the benefits of a product and show tangible ways in which it will improve a customer’s life. Seeing a product in action is compelling and will help you reach more customers and drive more sales.
Your visitors will also be spending more time in your store watching the video. As Google trusts websites with higher dwell times, adding videos to your product pages can help boost your store’s search engine rankings.
Where to Add Videos in a WooCommerce Store
There are two locations in your WooCommerce store where you can add videos to increase user engagement. Visitors typically wander about these pages looking for the products they need. They are the:
- single product pages
- shop catalog & archive pages
In the following sections, I’ll show you how to add videos to both of these locations.
While WooCommerce doesn’t include this feature, our Botiga theme allows you to add video and audio to your product pages.
Botiga has both a free and a premium version. You will need Botiga Pro to use the product video feature (see the comparison of the free vs pro versions).
1. Install the Free Botiga Theme
First, you need to install the free Botiga theme — Botiga Pro comes as a plugin and adds premium features to the theme.
In your WordPress admin area, go to Appearance >Themes and click the Add New button. Type ‘Botiga’ into the search bar, then install and activate the theme.
2. Download and Install the Botiga Pro Plugin
Now, you need to install the Botiga Pro plugin. After purchasing and downloading it to your local computer, go to Plugins > Add New in your WordPress admin area.
On the Add Plugins page, click the Upload Plugin button. Upload the botiga-pro.zip file, then install and activate the plugin.
3. Import a Starter Site
If you already have products uploaded to your WooCommerce store, you can skip this step. However, if you’re just getting started, you can import one of Botiga Pro’s starter sites, which are pre-built eCommerce stores with demo products.
Below, I’ll import the Single Product demo, but you can choose any of the other starter sites too.
In your WordPress admin area, go to Appearance > Theme Dashboard, and click the Starter Sites button. This will install and activate our demo importer plugin (you can find it on the Plugins page as aThemes Starter Sites).
Once the demo importer plugin is activated, you’ll be automatically redirected to the Starter Sites admin page.
Here, find the starter site you want to import and click the Import button, which will run the import process and add the demo content to your store.
4. Find Your Botiga Product Options
Now, go to Products > All Products, and Edit the product to which you want to add the video(s).
On my demo site, I’ll edit the product called Bluetooth Earphone.
Once you’re on the Edit Product page, scroll down until you reach the Botiga Product Options widget.
5. Add Videos to the Product Gallery
In the Featured Video tab, toggle the Enable Video Gallery option, and enter the URL of the video you want to add to your product. If you want you can add multiple videos to each product.
Botiga supports YouTube, Vimeo, and Dailymotion embeds. You can also upload your own self-hosted videos using the Upload Videos option.
To add self-hosted videos to your product gallery, first you need to upload the video to your WooCommerce site in the Media > Add New menu. Once the video is uploaded, open it, and copy-paste the URL of the video.
6. Set the Aspect Ratio for Your Videos
You can use the Aspect Ratio option to set the dimensions of your videos.
If you’re not sure what aspect ratio to choose, you can use the auto option to let the theme decide it.
Once everything is set up, scroll back to the top of the page, and click the Update button.
On my demo site, I set the aspect ratio to 16:9, and here’s how a self-hosted video appears in my product gallery:
As you can see above, the video is automatically added as the first item in the gallery.
7. Add Videos to Your Shop Catalog & Archive Pages
In addition to the videos shown in your product galleries, you can also add a featured video to each of your products. Featured videos will show up on your shop catalog and archive pages.
You can add the featured video in the Botiga Product Options > Featured Video widget at the bottom of each product page.
Toggle the Enable Featured Video option, and enter the URL of the video you want to show for that product on the catalog and archive pages.
You can either self-host the featured video on your site or embed it from a third-party platform such as YouTube, Vimeo, or Dailymotion.
If you want, you can set the video to Autoplay, but note that autoplay causes usability issues for some users.
Click the Update button, and visit the frontend of your shop.
You will notice that the featured image of your product has been replaced by the video you have just uploaded.
That’s all, folks. You now know how to add product videos to your WooCommerce store.
Conclusion
With the videos in place, you are likely to see a spike in conversions in a few weeks. I recommend adding videos to both your single product and shop archive pages as these are the most popular pages in any WooCommerce store.
That said, adding video content tends to bog down web pages, so your site is likely to become heavier than before. Make sure you check your site speed and use this guide to reduce page load times.
If you have any questions about how to add videos to the product galleries on your WooCommerce site, let us know in the comments below.
