In this tutorial, you’ll learn how to add a video to the WooCommerce product page gallery. This will support oEmbed videos from services such as YouTube and Vimeo. While our other guide will allow you to replace the product image gallery with a YouTube video, the following snippets will allow you to add videos to the existing gallery. This will provide you with an opportunity to display product images as well as a video demonstration.
Step 1: Add a Custom Field to the Product Data Section
In this step, we will use a textarea to add the URLs as a comma-separated list of videos to include in the gallery.
/*
* Snippet: How to Add a Video to the WooCommerce Product Page Gallery Without a Plugin – 2026
* Author: John Cook
* URL: https://wcsuccessacademy.com/?p=771
* Tested with WooCommerce 10.7.0
* "Add field to product data in add/edit product"
*/
add_action( 'woocommerce_product_options_pricing', 'wcsuccess_video_product_field' );
function wcsuccess_video_product_field() {
woocommerce_wp_textarea_input(
array(
'id' => 'video_url',
'value' => get_post_meta( get_the_ID(), 'video_url', true ),
'label' => 'Video URL',
'desc_tip' => true,
'description' => 'A comma-separated list of video URLs',
)
);
}
Step 2: Save the Custom Field to the Product
Next, we need to save the custom field to the product.
/*
* Snippet: How to Add a Video to the WooCommerce Product Page Gallery Without a Plugin – 2026
* Author: John Cook
* URL: https://wcsuccessacademy.com/?p=771
* Tested with WooCommerce 10.7.0
* "Save the video to the product"
*/
add_action('woocommerce_process_product_meta', 'wcsuccess_product_video_save');
function wcsuccess_product_video_save($post_id) {
$video_list = $_POST['video_url'];
if (!empty($video_list)) {
update_post_meta($post_id, 'video_url', esc_attr($video_list));
}
}
Step 3: Display Videos in the Product Gallery
Now that the data has been saved, we need to display the videos in the product gallery. All videos will appear at the end of any images in the gallery.
/*
* Snippet: How to Add a Video to the WooCommerce Product Page Gallery Without a Plugin – 2026
* Author: John Cook
* URL: https://wcsuccessacademy.com/?p=771
* Tested with WooCommerce 10.7.0
* "Add the videos to the gallery"
*/
add_action( 'woocommerce_product_thumbnails', 'wc_success_add_gallery_videos', 100, 0 );
function wc_success_add_gallery_videos() {
$product = wc_get_product(get_the_ID());
$video_list = $product->get_meta('video_url');
if(isset($video_list) && !empty($video_list)) {
$video_array = explode(",", $video_list);
if($video_array) {
foreach ($video_array as $video_embed) { ?>
<div class="woocommerce-product-gallery__image">
<?php echo '<div class="ResponsivevideoWrapper">' . wp_oembed_get($video_embed) . '</div>'; ?>
</div>
<?php }
}
}
}
Step 4: Add Thumbnails for Videos in the Gallery
With these code snippets added, you will be able to see the videos at the end of the gallery. However, they may appear out of proportion, and the thumbnails will be missing below the gallery. We can fix that with a little more code. This time we will add jQuery to insert the thumbnails from the source video.
/*
* Snippet: How to Add a Video to the WooCommerce Product Page Gallery Without a Plugin – 2026
* Author: John Cook
* URL: https://wcsuccessacademy.com/?p=771
* Tested with WooCommerce 10.7.0
* "Add the thumbnails to the gallery"
*/
add_action('wp_footer', 'wc_success_video_thumbnails');
function wc_success_video_thumbnails() {
$video_url_list = get_post_meta(get_the_ID(), 'video_url', true);
if(isset($video_url_list) && !empty($video_url_list)) {
?>
<script>
(function($) {
$(function() {
let videoList = "<?php echo $video_url_list; ?>";
let videoArray = videoList.split(',');
$(".flex-control-thumbs img").ready(function() {
let i = 0;
$('.flex-control-thumbs img').each(function () {
if (this.src.length == 0) {
if(videoArray[i].includes("youtube")) {
videoArray[i] = videoArray[i].replace("https://www.youtube.com/watch?v=", "https://img.youtube.com/vi/");
$(this).attr('src', videoArray[i]+'/3.jpg');
i++;
} else if (videoArray[i].includes("vimeo")) {
videoArray[i] = videoArray[i].replace("https://vimeo.com/", "https://vumbnail.com/");
$(this).attr('src', videoArray[i]+'_small.jpg');
i++;
} else {
$(this).attr('src', 'https://img.youtube.com/vi/default_img/3.jpg');
i++;
}
}
});
});
});
})(jQuery);
</script>
<?php
}
}
Step 5: Style the Video Player
Finally, style the video player so that it has the correct aspect ratio. Add the following CSS code to the theme customizer -> Additional CSS.
/*
* Snippet: How to Add a Video to the WooCommerce Product Page Gallery Without a Plugin – 2026
* Author: John Cook
* URL: https://wcsuccessacademy.com/?p=771
* Tested with WooCommerce 10.7.0
* "CSS for responsive video"
*/
.ResponsivevideoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
float:left;
width: 100%;
}
.ResponsivevideoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Place these code snippets in your theme functions.php file and the CSS in the theme customiser under additional css.
Important Notes
- Featured Image: If your product doesn’t contain a featured image, the videos will not appear. It is recommended to add a featured image to the product.
- Video URLs: Ensure the video URLs are comma-separated and do not hit enter.
- Default Thumbnail: At this line in Step 4,
$(this).attr('src', 'https://img.youtube.com/vi/default_img/3.jpg');, you can add the URL to a default thumbnail if the video provider that’s being embedded doesn’t have a thumbnail. The code provides provisions for YouTube and Vimeo.
Conclusion
By following these steps, you can add videos to your WooCommerce product page gallery, enhancing your product listings with rich multimedia content. This guide helps you provide a more engaging shopping experience without relying on additional plugins, ensuring a smoother and faster site performance.
I have been working with WordPress and WooCommerce since 2012 and have developed a deep knowledge of the content management system. Since 2012, I have developed several plugins and designed dozens of websites utilising different frameworks, CMS’s and programming languages. I am proficient in PHP, Python, Java, C, C++, R and JavaScript with limited experience in Go, Kotlin and Swift.
Educationally, I have a Master’s degree in cyber security a Bachelor’s (Hons, First Class) in Applied Research and a Graduate Certificate in Data Science. I’m currently undertaking PhD studies investigating IoT cybersecurity. I recently graduated with First Class Honours and Masters of Information Technology, receiving the Executive Dean’s Award for studies undertaken in the 2021 and 2022 academic years. I have worked in the information technology industry for the past 11 years primarily as a software/web developer specific to design, optimisation, network management and security. My research interests are in the areas of Internet of Things (IoT), 5G and Beyond Networks, information security for wireless networks and software development.
Stay In Touch
Works beautifully. Thank you so much for your codes!
Glad I could help
I’ve been looking for this the past days and I’m glad to find your post. Thank you! Great work!
You’re very welcome