Replace the Woocommerce gallery images with a YouTube video embed

In this tutorial, I’m going to show you how to replace the Woocommerce gallery images with a youtube video embed. You know the old saying that a picture tells a thousand words, well imagine what a video can do for you!

This snippet will be incredibly helpful for anyone who has informational videos or video demonstrations, such as video ads, to show their potential shoppers. This code snippet also works with most common video embeds such as Vimeo, Daily Motion, Facebook and more. Ideal products to use this with are movie titles, such as DVD and BluRay movies and TV series, video games and the latest toy releases. The possibilities are endless.

Before I continue I must make sure that you understand that this snippet will remove the entire image gallery from the product. All that will remain will be a video. OK, let’s start.

First thing is you’ll have to go to your product and create a custom field. The custom fields are normally located under the product description and product data fields. If it’s not there head to the top of the screen and click on the screen options on the top right of the screen. Make sure the custom fields box is checked.

Click on “Enter new” and in the box that had “select” in it enter the following:

product_video_embed

In the field to the right simply enter the URL to the video from YouTube (or any other popular video site).

Click “add custom field”

That step is done

Copy the following code and enter it into the bottom of your theme functions file or functions plugin. Use care doing this is a misplaced piece of code can break your site. It’s best to have a backup of the file and access to the site through FTP or CPanel ready in case you make a minor mistake.

/**
* snippet Display product video instead of images
* how-to Read at https://wcsuccessacademy.com/?p=27
* source code https://wcsuccessacademy.com/?p=27
* author John Cook
* tested with WooCommerce 3.3.3
*/
function woocommerce_show_product_images() {
  // Get video from youtube or other site and display
  if ( $wc_success_academy_video = get_post_meta( get_the_ID(), 'product_video_embed', true ) ) {
    // Sanitize video URL
    $wc_success_academy_video = esc_url( $wc_success_academy_video);
    // Display video
    echo  '<div class="ResponsivevideoWrapper">' . wp_oembed_get( $wc_success_academy_video) . '</div>';
    
  } else {
    // No video so get thumbnail instead
    wc_get_template( 'single-product/product-image.php' );
  }
}

Once the code has been placed the video will be showing where the gallery was. But it doesn’t look right. This is because the videos aren’t really responsive. To solve that enter the following into your custom CSS file and the video will be resized perfectly for the gallery.

/**
* snippet Make embeded videos responsive
* how-to Read at https://wcsuccessacademy.com/?p=27
* source code https://wcsuccessacademy.com/?p=27
* author John Cook
* tested with WooCommerce 3.3.3
*/
.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%;
}

This is what the product should look like

Where do you place the code?

Into your Theme functions file or functions plugin. It’s best to copy your existing theme functions file before making changes and to use a child theme.

Did this work for you?

Let us know in the comments below if this worked for you.

John Cook

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