How to display embedded audio, video and other multimedia content in the product table
Our WooCommerce Product Table plugin is very popular for displaying embedded audio and video files, along with other multimedia content such as media playlists or image galleries. For example, you might want to include an MP3 music player or embedded YouTube/Vimeo videos directly in the product table, so that people can watch and listen without having to visit the individual product page.
WooCommerce Product Table fully supports multimedia embeds. You can see this in action on our multimedia demo page.
This article will tell you how to add embedded media files to your product tables.
1. Choose where to add your embedded audio/video/multimedia files
First, you need to decide which column of the product table to display your embedded audio or media players. You can add them to any text-based column in the table, such as the main product description, a 'Shortcode' or 'Paragraph' Gutenberg block, the product short description, or a text or WYSIWYG custom field.
2. Add your audio or video embeds
Next, you need to add the embedded audio or video file for each product that you wish to display in the table. Go to edit the product and add an embedded audio or video file (or other type of multimedia content) to the appropriate place.
Some tips:
- If you wish to host the audio/video in your WordPress Media Library, then you can click the 'Add Media' button and upload it directly. WordPress will automatically embed it as a fully functional media player using the built-in Audio or Video shortcodes, or the Playlist shortcode if you are creating a playlist. This is a good way to display audio files, but we recommend using a third party hosting service (e.g. YouTube or Vimeo) for video due to the larger file sizes and the need for cross-compatibility on all devices.
- If your multimedia files are hosted externally then you can use any of the embeds that are supported in WordPress.
- You might also be able to use multimedia shortcodes provided by another plugin, although you will need to check the WooCommerce Product Table compatibility list to see if they will work correctly in the table. The tutorials listed at the end of this article also mention some compatible third party plugins, for example if you want to add more eye-catching audio players to replace the default music player.
3. Enable the 'Shortcodes' option
Install the WooCommerce Product Table plugin, go to the plugin settings page, and enable the 'Shortcodes' option. This tells the plugin to display the embedded multimedia content correctly, instead of as plain text.
4. Create and view the table
Create a product table. Make sure you include the column containing your audio/video embeds.
View the table and make sure the embedded media players are working correctly.
Related tutorials
You may also be interested in our Quick Tutorial: Create a WooCommerce Audio Store in Under an Hour.
We also have articles on how to add extra fields to your WooCommerce products, which you can use to store the embedded audio and media players:
- Easy Post Types and Fields: An Easy Way to Create WordPress Custom Post Types, Custom Fields & Taxonomies
- WooCommerce Custom Fields: How to Create & Display