Adding media/video to your WooCommerce product gallery

With WooThumbs you can embed media directly into the product gallery to be played inline.

We'll be using YouTube as an example. Firstly, copy the URL of your YouTube video.

Next, open up your media gallery. When you have selected an image, you will see 2 new fields under WooThumbs Media Details; these are URL and Aspect Ratio.

In the URL field, paste the URL from YouTube. This is the main URL of the video; the same one you'd paste into your post/page editor to embed a video.

Then, set your aspect ratio. My images are square, so I have set this to 1:1. A lot of videos these days are 16:9, but it depends entirely on what suits your needs; the flexibility is there for you.

Once you've finished with these 2 fields, just click out of them. There is no save button, the media is automatically updated when you come out of the fields. You will however need to clear the WooThumbs image cache. You can do this by either closing the media library and saving the product, or going to WooCommerce > WooThumbs and click Clear Image Cache.

Once you've done that, the embedded media should be available on your product page.

You can add media to as many images as you like in your product gallery. You can also add media to your additional variation images.

Things to note:

  • The image you add media to will only be used as a thumbnail.
  • The media will still be available in fullscreen mode.
  • When viewing a media slide, the prev/next and fullscreen icons are disabled. This means it works best when you have thumbnail navigation enabled.