How to add a video to a WooCommerce product page

Out of the box, a WooCommerce product has images and a description, and that is all. The product gallery — the big picture and the thumbnails under it — accepts images only. There is no video field on the product edit screen, and a video uploaded to the gallery simply is not offered.

So every way of getting a video onto a product page comes down to one of two places: inside the description, which WooCommerce supports as it stands, or beside the gallery, which needs your theme, a plugin or a few lines of code. The gallery is where a shopper is looking when they decide; the description is usually a tab further down the page.

Whatever you choose below, the same file works best:

• MP4 with H.264 video. Every browser plays it. A .mov straight off a phone often will not play in Chrome or Firefox.
• Short, and made to loop. Five to fifteen seconds is enough to show the product move. Nobody on a product page watches a two-minute film.
• Silent is fine. Browsers only start a video by themselves when it is muted, so a video that plays on arrival has to work without sound anyway. In HTML that is autoplay muted loop playsinline — without playsinline, an iPhone opens it full screen.
• Small. Aim for a few megabytes. A product page is mostly opened on a phone, often on mobile data.
• The shape of the gallery. If your product images are square, a square video sits in the gallery without bars. Upright (9:16) suits a phone screen and social posts; wide (16:9) suits a description.

Your own file or YouTube? A YouTube or Vimeo link costs you nothing to host, but it brings the player's branding and suggested videos, it will not loop silently in a gallery the way a plain file does, and a YouTube embed sets its cookies unless you use its privacy-enhanced mode. An MP4 in your Media Library behaves like a picture: it plays, loops and stays yours. For a short product clip, the file is usually the better choice.

This works in any theme, with nothing installed.

1. Open the product in Products → All Products.
2. In the description editor, press Add Media, upload or pick your MP4, and insert it. WordPress puts a [video] shortcode in the text, which plays the file with its own player.
3. For YouTube or Vimeo, paste the video's address on a line of its own in the Visual tab. WordPress turns it into the player when the page is shown.
4. Update the product and check the page.

The catch is where it lands: in most themes the description is the Description tab under the product, below the price and the button, so many shoppers never scroll to it. The short description, beside the price, is higher up but cramped for a video. For the video to do its work, it belongs by the gallery.

Check your theme first. Several commercial WooCommerce themes — Flatsome and Woodmart among them — have their own product video setting, usually a field for a video address on the product screen, and show the video in or beside the gallery. Your theme's documentation will say if it has one, and it is the least work when it does.

If it does not, a product video plugin adds the field for you. When you choose one, check three things: that it shows a self-hosted MP4 and not only YouTube, that it can play muted and loop in the gallery rather than opening a pop-up, and that it keeps working with your theme's gallery on a phone.

If you or a developer look after a child theme, a few lines put the video exactly where you want it, with nothing else installed. WooCommerce fires woocommerce_product_thumbnails inside the gallery, after the thumbnails, and woocommerce_before_single_product_summary above the gallery and the summary. This prints a video under the thumbnails for any product that has one:

add_action( 'woocommerce_product_thumbnails', function () {
	$url = get_post_meta( get_the_ID(), 'product_video_url', true );
	if ( ! $url ) {
		return;
	}
	printf(
		'<video src="%s" autoplay muted loop playsinline preload="metadata"></video>',
		esc_url( $url )
	);
}, 30 );

Give each product a custom field called product_video_url with the address of its MP4 (open Screen Options on the product screen and tick Custom Fields to see the box). Add this to the child theme's functions.php, not the parent theme's, or the next theme update removes it. The priority of 30 puts it after the thumbnails, which WooCommerce prints at 20.

For most stores, this is the real problem. Filming every product is a studio day and an editor's week, and a store with two hundred products does not have either.

Heisy is a WordPress plugin that makes the video from the product photo you already have. You pick a product in your admin, choose a shape — 9:16, 1:1 or 16:9 — and a few minutes later a finished 4-to-14-second video is in your Media Library. No footage, no editor, no file to move around.

It then does the part this guide is about, too:

• Automatically: Heisy → Settings → Store → Where it shows puts every product's video above the gallery and summary, or under the gallery thumbnails, on WooCommerce's standard product page. Each product can choose differently in its Heisy video box.
• As a block: the Heisy product video block, for block themes and the block editor.
• As a shortcode: [heisy_video] anywhere shortcodes run, with autoplay, loop, controls and product options.
• In your templates: heisy_video() and heisy_video_url(), which print nothing for a product without a video.

The video plays muted and loops by default, as described above. Plans start at $29 a month; see pricing, or how it works for the whole plugin.

• An MP4 (H.264), a few seconds long, a few megabytes in size.
• The same shape as your gallery images, or upright for a phone.
• Muted, looping and playsinline if it plays by itself.
• Beside the gallery rather than down in the description tab, if your theme or a plugin allows it.
• Checked on a phone, on the live product page, after your cache is cleared.