Home Tutorials How to Add Video to a Product Gallery in WooCommerce

How to Add Video to a Product Gallery in WooCommerce


In search of methods to add video to a product gallery in your WooCommerce web site?

Including product movies to your WooCommerce retailer is a nice concept. Movies can be utilized to shortly convey key details about a product to potential clients to encourage them to make a shopping for determination.

Whereas WooCommerce doesn’t provide a built-in methodology to add video to your product galleries, there are methods to do it.

On this tutorial, I’ll present you how one can embed movies in your WooCommerce web site.

Why Add Product Movies to Your WooCommerce Retailer 

Movies are a in style type of content material as a result of they’re straightforward to devour. This is the reason social media platforms at this time are riddled with movies and YouTube is the second most visited web site on the web.

Within the eCommerce discipline, a video can spotlight the advantages of a product and present tangible methods in which it can enhance a buyer’s life. Seeing a product in motion is compelling and can make it easier to attain extra clients and drive extra gross sales.

Your guests can even be spending extra time in your retailer watching the video. As Google trusts web sites with greater dwell occasions, including movies to your product pages may help increase your retailer’s search engine rankings. 

The place to Add Movies in a WooCommerce Retailer 

There are two areas in your WooCommerce retailer the place you may add movies to improve consumer engagement. Guests usually wander about these pages on the lookout for the merchandise they want. They’re the:

  1. single product pages
  2. store catalog & archive pages

Within the following sections, I’ll present you the way to add movies to each of those areas. 

Whereas WooCommerce doesn’t embrace this characteristic, our Botiga theme permits you to add video and audio to your product pages.

Botiga has each a free and a premium model. You will want Botiga Professional to use the product video characteristic (see the comparability of the free vs professional variations). 

1. Set up the Free Botiga Theme

First, you want to set up the free Botiga theme — Botiga Professional comes as a plugin and provides premium options to the theme.

In your WordPress admin space, go to Look >Themes and click on the Add New button. Kind ‘Botiga’ into the search bar, then set up and activate the theme.

Install the free Botiga theme

2. Obtain and Set up the Botiga Professional Plugin

Now, you want to set up the Botiga Professional plugin. After buying and downloading it to your native laptop, go to Plugins > Add New in your WordPress admin space.

On the Add Plugins web page, click on the Add Plugin button. Add the botiga-pro.zip file, then set up and activate the plugin.

Upload the Botiga Pro WooCommerce plugin

3. Import a Starter Web site

If you have already got merchandise uploaded to your WooCommerce retailer, you may skip this step. Nevertheless, if you happen to’re simply getting began, you may import one in every of Botiga Professional’s starter websites, that are pre-built eCommerce shops with demo merchandise.

Beneath, I’ll import the Single Product demo, however you may select any of the opposite starter websites too.

In your WordPress admin space, go to Look > Theme Dashboard, and click on the Starter Websites button. This can set up and activate our demo importer plugin (you’ll find it on the Plugins web page as aThemes Starter Websites).

Import Botiga Pro starter sites

As soon as the demo importer plugin is activated, you’ll be mechanically redirected to the Starter Websites admin web page.

Right here, discover the starter web site you need to import and click on the Import button, which can run the import course of and add the demo content material to your retailer.

Import the Single Product demo

4. Discover Your Botiga Product Choices

Now, go to Merchandise > All Merchandise, and Edit the product to which you need to add the video(s). 

On my demo web site, I’ll edit the product known as Bluetooth Earphone

Edit products in the WooCommerce interface

When you’re on the Edit Product web page, scroll down till you attain the Botiga Product Choices widget.

Botiga Product Options widget

Within the Featured Video tab, toggle the Allow Video Gallery choice, and enter the URL of the video you need to add to your product. If you need you may add a number of movies to every product.

Botiga helps YouTube, Vimeo, and Dailymotion embeds. You can even add your individual self-hosted movies utilizing the Add Movies choice.

So as to add self-hosted movies to your product gallery, first you want to add the video to your WooCommerce web site in the Media > Add New menu. As soon as the video is uploaded, open it, and copy-paste the URL of the video.

Add video to your Botiga product gallery

6. Set the Facet Ratio for Your Movies

You should utilize the Facet Ratio choice to set the scale of your movies.

In case you’re undecided what side ratio to select, you need to use the auto choice to let the theme determine it.

Set aspect ratio for Botiga

As soon as all the pieces is about up, scroll again to the highest of the web page, and click on the Replace button.

On my demo web site, I set the side ratio to 16:9, and right here’s how a self-hosted video seems in my product gallery:

Self-hosted video on the product page

As you may see above, the video is mechanically added as the primary merchandise in the gallery. 

7. Add Movies to Your Store Catalog & Archive Pages

As well as to the movies proven in your product galleries, you can too add a featured video to every of your merchandise. Featured movies will present up in your store catalog and archive pages.

You’ll be able to add the featured video in the Botiga Product Choices > Featured Video widget on the backside of every product web page.

Toggle the Allow Featured Video choice, and enter the URL of the video you need to present for that product on the catalog and archive pages.

You’ll be able to both self-host the featured video in your web site or embed it from a third-party platform similar to YouTube, Vimeo, or Dailymotion.

If you need, you may set the video to Autoplay, however observe that autoplay causes usability points for some customers.

Replace the featured image with video

Click on the Replace button, and go to the frontend of your store.

You’ll discover that the featured picture of your product has been changed by the video you’ve got simply uploaded.

Self-hosted video on the shop archive page

That’s all, people. You now understand how to add product movies to your WooCommerce retailer.

Conclusion

With the movies in place, you’re seemingly to see a spike in conversions in a few weeks. I like to recommend including movies to each your single product and store archive pages as these are the most well-liked pages in any WooCommerce retailer. 

That mentioned, including video content material tends to lavatory down net pages, so your web site is probably going to turn into heavier than earlier than. Ensure you examine your web site velocity and use this information to cut back web page load occasions. 

In case you have any questions on how to add movies to the product galleries in your WooCommerce web site, tell us in the feedback under.