How to Display YouTube Shorts on a WooCommerce Product Page

Integrating YouTube Shorts into your WooCommerce product pages is an excellent way to engage your customers and provide them with quick, visually appealing content.

Whether you’re showcasing a product in action, sharing customer testimonials, or highlighting features, embedding YouTube Shorts can make your pages more dynamic and help increase conversions.

In this guide, I’ll walk you through the step-by-step process of displaying YouTube Shorts on your WooCommerce product pages.

Don’t worry if you’re new to this—it’s simpler than you think!

Table of Contents

Step 1: Get the YouTube Shorts URL

First, find the YouTube Short video you want to display on your product page.

Open YouTube: Go to YouTube and search for your Short video.
Copy the URL: Once you’ve found the video, click on it. Copy the URL from the browser’s address bar.
The URL will look something like this: https://youtube.com/shorts/xyz12345

Step 2: Add the YouTube Embed Code

To embed a YouTube Short, you’ll need its embed code. Unfortunately, YouTube doesn’t provide a direct embed code for Shorts like regular videos, but you can create one manually.

Convert the URL to Embed Format: Replace /shorts/ in the URL with /embed/.

For example:

Original URL: https://youtube.com/shorts/xyz12345  
Embed URL: https://youtube.com/embed/xyz12345

Prepare the Embed Code: Use the modified URL in an iframe code like this:

<iframe 
    width="560" 
    height="315" 
    src="https://youtube.com/embed/xyz12345" 
    frameborder="0" 
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
    allowfullscreen>
</iframe>

This iframe code will allow the video to play on your product page.

Step 3: Add the Embed Code to Your WooCommerce Product Page

Option 1: Use the WordPress Block Editor (Gutenberg)

If you’re using the Gutenberg editor, follow these steps:

Edit Your Product: Go to your WordPress dashboard and navigate to Products > All Products. Click Edit on the product you want to update.
Add a Custom HTML Block: In the Gutenberg editor, click the + button to add a new block. Search for “Custom HTML” and select it.
Paste the Embed Code: Copy the iframe code you created earlier and paste it into the Custom HTML block.
Preview and Update: Click Preview to see how it looks on your product page. If everything looks good, click Update to save the changes.

Option 2: Use the Classic Editor

If you’re using the Classic Editor:

Edit Your Product: Go to Products > All Products and click Edit on the desired product.
Switch to Text Mode: In the editor, switch to the Text tab (next to the Visual tab).
Paste the Embed Code: Place the iframe code where you want the video to appear. For example, you can paste it at the end of your product description or between paragraphs.
Save Changes: Click Update to save your changes.

Step 4: Add YouTube Shorts Using a Plugin (Optional)

If you’re not comfortable editing HTML or want more control, you can use a plugin to embed YouTube Shorts. Plugins make the process even easier and often provide additional customization options.

Recommended Plugins:

Embed Plus for YouTube: This plugin allows you to embed YouTube videos, playlists, and Shorts effortlessly.
WP YouTube Lyte: A lightweight plugin that embeds responsive YouTube videos.

Steps to Use a Plugin:

Install the Plugin: Go to your WordPress dashboard and navigate to Plugins > Add New. Search for the plugin (e.g., “Embed Plus for YouTube”) and click Install Now. After installation, click Activate.
Configure Settings: Go to the plugin settings and ensure YouTube Shorts embedding is enabled.
Embed the Short: In your product page editor, use the plugin’s shortcode or block to add the video. Follow the plugin instructions for exact steps.

Step 5: Style and Test Your Embed

Once you’ve embedded the YouTube Short, make sure it looks good and functions well on your product page.

Check Responsiveness: Your video should adapt to different screen sizes, especially for mobile users.

Use the following CSS if needed:

iframe { max-width: 100%; height: auto; }

Add this code to your Appearance > Customize > Additional CSS section in WordPress.

Test the Page: Open your product page on both desktop and mobile devices to ensure the video plays smoothly.

Why Use YouTube Shorts on Your Product Page?

Quick and Engaging: Shorts are designed to grab attention in seconds.
Showcase Your Product: Demonstrate how your product works or highlight key features.
Boost Conversions: Videos can help customers make informed purchasing decisions.

By following these steps, you can easily display YouTube Shorts on your WooCommerce product pages and make your store more interactive. Try it out and see how it transforms your customer experience

About The Author

Mohammad Miraj

I’m Mohammad Miraj, a tech enthusiast with a passion for Ecommerce. For the past 4 years, I’ve been elbow-deep in eCommerce physical and digital products like WooCommerce plugins helping entrepreneurs and Ecommerce business owners navigate the exciting (and sometimes tricky) world of online sales.

At Ecomnetic.com, I share my knowledge in easy-to-understand chunks, because who needs complex jargon when you can be winning online? When I’m not glued to the screen, you’ll find me jamming to music, spending time with family and friends, or just soaking up life in the great outdoors.

See author's posts