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="images">
<div class="ResponsivevideoWrapper">'
. wp_oembed_get( $wc_success_academy_video) .'</div>
</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;
}
.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.

Written by John Cook
I've been using WordPress for over 6 years and Woocommerce for over 4 years. In that time I have explored the depths of customizations and helped many online retailers grow and expand their business using the Woocommerce selling platform. My aim here is to help enable Woo users around the globe get even more out of their e-commerce platform of choice.