In this snippet, 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 of the add/edit product page. In this step we will use a textarea to add the URL’s as a comma separated list of videos to include in the gallery.
/**
* Snippet: Add a video to the WooCommerce product page gallery 2024
* Author: John Cook
* URL: https://wcsuccessacademy.com/?771
* Tested with WooCommerce 8.8.2
* "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 URL\'s',
)
);
}
Step 2: We need to save the custom field to the product.
/**
* Snippet: Add a video to the WooCommerce product page gallery 2024
* Author: John Cook
* URL: https://wcsuccessacademy.com/?771
* Tested with WooCommerce 8.8.2
* "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: 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: Add a video to the WooCommerce product page gallery 2024
* Author: John Cook
* URL: https://wcsuccessacademy.com/?771
* Tested with WooCommerce 8.8.2
* "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 endforeach;
endif;
}
}Step 4: 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. If the gallery doesn’t have controls, getting to the videos will also be impossible. Read our guide on how to add WooCommerce gallery navigation controls. This happens because WooCommerce is detecting the videos as images, without an image, so the thumbnails are missing an src attribute. We can fix that with a little more code. This time we will add jQuery to insert the thumbnails from the source video.
/**
* Snippet: Add a video to the WooCommerce product page gallery 2024
* Author: John Cook
* URL: https://wcsuccessacademy.com/?771
* Tested with WooCommerce 8.8.2
* "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: Finally, style the video player so that it is to the correct aspect ratio. Add the following CSS code to the theme customiser -> Additional CSS
/*
* Snippet: Add a video to the WooCommerce product page gallery 2024
* Author: John Cook
* URL: https://wcsuccessacademy.com/?771
* Tested with WooCommerce 8.8.2
* "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.
There are a few points to note.
- 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.
- When adding video URL’s make sure they are comma separated and don’t hit enter
- 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
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.
Google Scholar ID: https://scholar.google.com.au/citations?user=0KvpwNEAAAAJ&hl=en
ORCID: https://orcid.org/0000-0001-8113-1296
Stay In Touch
