Three ways to do it
WooCommerce has a product image and a product gallery, but no field for a video. To show one on the product page you have three options:
- Embed a YouTube or Vimeo link with a plugin. Quick, but the shopper sees the service's player, its logo and its suggestions, and the page loads the service's scripts. See product video without YouTube for the trade-offs.
- Use a self-hosted video plugin. The file sits in your own uploads folder and plays in your own player, as a real gallery slide. This guide uses this way.
- Override the gallery template in a child theme. Possible, but then the video formats, the poster, the thumbnails, swipe and the lightbox are all yours to build and keep working after WooCommerce updates.
Before you start
- WordPress 6.6 or newer, WooCommerce 9.6 or newer, PHP 7.4 or newer.
- A short clip of the product: 10 to 30 seconds is plenty. Any common format works: MP4, MOV, AVI, MKV, HEVC or WebM.
- FFmpeg on the server, if you want the plugin to convert the clip for you. No FFmpeg? You can attach MP4 and WebM files you already have, or convert in the browser with Pro.
Step by step
1. Install the plugin
In WordPress go to Plugins → Add New, search for Magic Product Video, click Install Now and then Activate. A Magic PVW item appears in the admin menu.
2. Upload the clip
Open Magic PVW → Media and upload the clip from your computer or phone. The video library is separate from the WordPress media grid, so product clips do not get lost among images.
3. Let it convert
The plugin turns the clip into two files and a poster:
- MP4 (H.264), which plays in every browser,
- WebM, an open format the browser can pick instead,
- a poster frame taken from the first second, shown before the video plays. You can pick another frame later.
Conversion runs with FFmpeg on your server in a background queue, so you can close the tab while it works. An 8-second 1080p clip takes a few seconds. On hosting without FFmpeg, convert in the browser with Pro or upload ready files.
4. Attach it to the product
Open the product in Products → Edit. In the Magic Video box, pick the clip from the library and update the product. The same clip can go on several products.
5. Choose how it plays
In Magic PVW → Settings choose whether the video is the first or the last gallery slide. In Magic PVW → Player set autoplay, sound, loop, controls, how the video fills the frame and the background behind it.
The result
The video is a real slide of the WooCommerce gallery. It works with the thumbnails, swipe on phones and the lightbox, in block and classic themes.
Tips for a product video that helps sell
- Keep it short. 10 to 30 seconds: the product in use, its size in a hand or on a person, the detail a photo cannot show.
- Plan for no sound. Phones only autoplay muted video, and most shoppers never turn sound on. Show, do not tell.
- Match the gallery shape. If your product photos are square or 3:4, shoot or crop the clip the same way so the gallery does not jump between slides.
- Make the first second count. It becomes the poster, the frame shoppers see before anything plays.
- 720p or 1080p is enough. The gallery is rarely wider than 1000 pixels; 4K only makes the file heavier.
Questions
Does the video slow down the product page?
The poster is an ordinary image. The video file is requested when the slide is shown or played, and the converted files are much smaller than a phone recording.
Can I show more than one video, or a video per variation?
Magic Product Video shows one video per product. A video per variation is not supported yet.
My theme replaces the WooCommerce gallery. Will it work?
The video goes into the standard WooCommerce gallery. If your theme builds its own, take the file URLs with mpvw_get_product_video_data( $product_id ) and print them in your template. See the PHP API.