Pro Product Video

The Product Video module allows you to add featured videos and/or video galleries to your WooCommerce products.

You can embed online videos from video hosting sites, such as YouTube, Vimeo, or Dailymotion, or upload video files from your own computer to self-host them from your own domain.

In this tutorial, we’ll first see how the Product Video module appears on the frontend of a WooCommerce store, then we’ll go through how to configure and activate the module.

Example: A Product Video Gallery on a Single Product Page

In the screenshot below, you can see an example of a product video gallery added by Merchant Pro to a WooCommerce product page:

In the module’s settings (see below), you can select whether you want to display the video gallery before or after the image gallery for each product.

Example: Three Featured Product Videos on a Shop Page

The featured product video appears on your Shop and other catalog pages (e.g., product category pages) and in your product widgets (e.g., Related products). However, it doesn’t appear on the single product page, which will still show the featured product image (you can add videos to single product pages as video galleries — see above).

In the screenshot below, you can see an example of three featured product videos on a Shop page:

Make Sure You Have Added Featured Images to All of Your Products

To make sure that WooCommerce works without issues, you need to add a featured product image to each of your products, even when you also add a featured video to a product with the current module. This is because WooCommerce will still use the featured product image on your Cart and Checkout pages and in the mini cart.

In the screenshot below, you can see where you can upload a featured product image on a product admin page:

1. Open the Product Video Module

To access the global settings of the module, open your Merchant modules page by clicking the Modules submenu in the Merchant menu in the left sidebar of your WordPress admin area.

Find the Improve Experience section, then click the Product Video module:

2. Configure the Global Settings

On the module’s admin page, you can set up the global settings of your product videos.

Find the Settings section and configure the following settings (you can override these settings for individual products from the product admin pages):

• Autoplay – Here, you can choose whether you want to start the videos automatically or not.
• Aspect ratio – Here, you can define the default width/height proportion of the videos (available options: 16:9, 9:16, 4:3, 3:2, 1:1, auto).

Once the settings are configured, click the Save button in the top-right corner of the page.

3. Enable the Product Video Module

To activate the module, click the Enable button at the top of the module’s page:

4. Add Product Videos

Once the module is enabled, Merchant Pro will add some new options to your WooCommerce product admin pages where you can add a featured video and/or a video gallery to your individual products.

To access the individual settings, open a product admin page from the Products > All Products menu or click the View All Products button on the module’s settings page.

On the product admin page, scroll down to the Merchant Product Options section and click the Product Video tab.

How to Add a Featured Video

To add a featured video to a product, toggle on the Enable Featured Video option. As mentioned above, the featured video will only appear on your catalog pages (e.g., Shop page, product category pages, etc.), but the single product page will still show the featured product image.

Insert the full URL of the video (starting with the https:// protocol) into the Featured Video URL field.

To add a video from your own computer, first, you need to upload it to your WordPress Media Library (available from the Media > Library menu), then copy-paste the video’s URL into the Featured Video URL field.

Use the Autoplay option if you want to change your global autoplay setting for this featured video.

How to Add a Video Gallery

To add a video gallery to this single product page, toggle on the Enable Video Gallery option.

Click the Add Video Link button to add videos from YouTube or another video hosting platform. If you want to upload videos from your local machine, click the Upload Videos button.

You can use the Position option to change the location of the video gallery on this single product page (available options: Before Image Gallery, After Image Gallery).

If you want to use a custom aspect ratio for videos added to the product, click the Aspect Ratio option:

Once you’ve configured all the individual settings, scroll back to the top of the product admin page and preview the changes by clicking the Preview Changes button.

If everything looks as expected, click the Update button to make the changes live.

5. Use the Shortcode (for Developers)

You can also use the module as a shortcode, which makes it possible to fine-tune its location on your single product pages.

To do so, open the module’s settings page from the Merchant > Modules menu in the left sidebar of your WordPress admin area, scroll down to the Use shortcode section, and toggle the Use shortcode option on.

The shortcode you need to use is [merchant_module_product_video]:

Once the shortcode is turned on, click the Save button at the top of the page.

Note that when the shortcode is activated, the module disappears from its default location on the single product pages, as now its location is controlled by the shortcode instead of the module’s settings.

6. Export or Import the Module Settings

You can export and import the module’s settings by scrolling down to the Backup & Restore option on the module’s admin page.

To export your settings, click the Download button in the Backup Module Settings section, which will download them as a JSON file.

To import your previous settings, click the Browse button in the Restore Module Settings section, which will let you select a previously downloaded JSON file from your computer. Then, click the Restore button to import those settings: