How to Add a Video to Your WooCommerce Product Gallery

Looking to add one or more videos to your WooCommerce product gallery? It can’t be done without a little help from a plugin or code. We’re here to make it easy!

Product videos can help you sell more effectively, particularly for items that need extra explanation or a demo. They’re a key part of many online stores.

Once you’ve finished reading this article, you’ll know exactly how to add a video to your WooCommerce product gallery. Better yet, you’ll be able to do it with multiple methods that work seamlessly with your existing product images.

Why displaying product videos boosts WooCommerce conversion rates

According to the latest Wyzowl report, 87% of consumers say video convinced them to purchase a product. This powerful impact stems from several factors:

• Videos provide complete product understanding by demonstrating features in action rather than just describing them. They accurately show scale and dimensions, which is particularly helpful for physical products. This reduces pre-purchase uncertainty and builds customer trust.
• Product videos deliver information efficiently, condensing complex features into quick visual demonstrations. A 30-second video can explain more than several paragraphs of text, highlighting key selling points through dynamic presentation.
• Videos also offer SEO benefits by improving search visibility and providing opportunities for rich snippets in search results.
• Product videos increase engagement metrics on your store – extending page session times and decreasing bounce rates, which signals to search engines that your content is valuable to visitors.

Can you add videos to WooCommerce products?

By default, WooCommerce restricts product galleries to images only, supporting formats like PNG, JPG, WEBP, and GIF. Product videos cannot be directly added to the gallery.

So if you want to upload your own product video or embed one from YouTube or Vimeo, you’ll need a plugin. In this blog post, we’ll discuss 2 plugins:

1. Featured Videos for WooCommerce. This is our preferred choice as it’s very lightweight and does what it says on the tin. This is a paid plugin, though.
2. Product Video Gallery for Woocommerce. This is a free plugin that works well, but isn’t as lightweight as we would like it to be for such a feature.

Alternatively, we’ll also quickly cover how to do this using custom code. Please note this requires technical knowledge as it’s complicated to do correctly. We’ll get you on your way but this will require additional effort from your side.

Let’s dive in!

How to add a video to WooCommerce product gallery (with a plugin)?

As mentioned, we’ll use the Featured Videos for WooCommerce plugin as it’s the most lightweight choice out there.

Step 1: Install Featured Videos for WooCommerce

To get started, purchase the Features Videos plugin from Puri: puri.io/plugin/featured-videos-woocommerce/. To install the plugin, follow these steps:

1. Go to Plugins → Add New → Upload Plugin.
2. Select the zip file you downloaded, upload it, and then click Activate.
3. Once activated, you’ll need to enter your license key to get started. Click Activate License:
   

Step 2:  Add your video to the product gallery

Edit the product you’d like to add a video to and find the Featured Video box, usually in the lower right of the screen:

• You can define the source of the video:
  • Select self-hosted if you want to upload the video to your own WordPress website (through the media library). This is only recommended for small videos as they tend to take up less space.
  • Select External if you want to upload the video through YouTube, Vimeo, ….
• Upload and select your video.
• Choose the poster: a still image that appears before the video plays.
• Choose the thumbnail: the small image underneath the gallery.
• You can also decide to auto play the video so it starts playing immediately when it’s loaded.
• You can loop the video so it plays in an endless loop.

That’s all you have to do to add a video to your product page! Don’t forget to save or update the product to save your work.

Here is our opinion on using the Featured Video for WooCommerce plugin:

Product Video Gallery for WooCommerce

If you prefer a free plugin with more settings (just note that might slow down your page a bit more than lightweight plugins), take a look at this plugin: Product Video Gallery for WooCommerce.

It provides a simple solution that embeds YouTube videos in your product gallery alongside images. 

The free version allows one video per product, while the premium version supports multiple videos from various sources, including Vimeo and self-hosted MP4 files. The free version is available on WordPress.org, and the premium version starts at $25 for one site and up to $99 for 10 sites.

How to add a product video to the product gallery with custom code?

If you prefer not to use a plugin, you can also build this using custom PHP code. We help you get on your way:

Step 1: Adding a “video URL” setting in the product admin

Add the following code to your functions.php. This will create a field when you’re adding a new WooCommerce product where you can paste a video URL for a file in your library:

// Add a custom field for the video URL in WooCommerce product settings
function sw_add_video_url_custom_field() {
    woocommerce_wp_text_input(array(
        'id'          => '_product_video_url',
        'label'       => __('Product Video URL', 'woocommerce'),
        'placeholder' => 'Enter MP4 video URL here',
        'desc_tip'    => true,
        'description' => __('Paste an MP4 file URL from your media library.', 'woocommerce'),
        'type'        => 'url',
    ));
}

add_action('woocommerce_product_options_general_product_data', 'sw_add_video_url_custom_field');

// Save the custom field value
function sw_save_video_url_custom_field($post_id) {
    $video_url = !empty($_POST['_product_video_url']) ? esc_url_raw($_POST['_product_video_url']) : '';
    update_post_meta($post_id, '_product_video_url', $video_url);
}

add_action('woocommerce_process_product_meta', 'sw_save_video_url_custom_field');Code language: PHP (php)

Note that you can only add a URL ending in .mp4. You can’t use external services like Youtube or Vimeo.

Step 2: Display the video on the product page

Add this to functions.php to display the video in the gallery on the product page:

function sw_add_video_to_product_gallery($html, $attachment_id) {
    static $video_added = false;

    // Only add once
    if ($video_added) return $html;

    $product_id = wp_get_post_parent_id($attachment_id);
    if (!$product_id) return $html;
	
    $video_url = get_post_meta($product_id, '_product_video_url', true);
    if ( ! empty( $video_url ) && strpos($video_url, '.mp4') !== false) {
        $video_html = '<div class="woocommerce-product-gallery__image video-thumbnail">';
        $video_html .= '<video width="100%" height="100%" controls>';
        $video_html .= '<source src="' . esc_url($video_url) . '" type="video/mp4">';
        $video_html .= '</video>';
        $video_html .= '</div>';

        $video_added = true;
        return $video_html . $html;
    }

    return $html;
}
add_filter('woocommerce_single_product_image_thumbnail_html', 'sw_add_video_to_product_gallery', 10, 2);Code language: PHP (php)

Best practices for displaying video on WooCommerce product pages

Follow these guidelines to ensure your product videos enhance rather than detract from the shopping experience:

• Use MP4 or WebM formats for maximum browser compatibility. MP4 works across all modern browsers, while WebM offers better compression.
• Compress videos properly, aiming for 3-5MB file sizes. Tools like HandBrake can reduce file size by 70% with minimal quality loss.
• Position videos prominently, ideally above the product description, where they’ll be seen immediately.
• Create custom thumbnails that clearly show what the video contains. Don’t rely on random frame grabs that might be blurry or uninformative.
• Integrate with the product gallery when possible so customers can browse all visual content in one place.
• Ensure responsive design by testing how videos display on mobile, tablet, and desktop devices.
• Avoid autoplay and implement lazy loading. Videos should only load when in the viewport and play when the customer clicks, improving page speed and preventing bandwidth waste.
• Include clear playback controls so customers can pause, rewind, or adjust volume easily.
• Test loading speed across different connection types and devices to ensure videos don’t slow down your store.
• Consider external hosting through YouTube or Vimeo for better performance, especially for large video files or high-traffic sites.
• Add proper video SEO markup using VideoObject by schema.org to help search engines understand your content.

Add a video to your WooCommerce product gallery today

This guide showed you the benefits of using videos in your WooCommerce product gallery. We also walked you through the process of adding videos to your product pages with a WooCommerce product video plugin or custom code if you prefer to go that route.