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.

See also  How to Extend WooCommerce REST API - 2024

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 8.8.2
*/
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 8.8.2
*/
.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.

See also  How to Automatically Add a Free Gift to Cart in WooCommerce - 2024

Did this work for you?

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

0 0 votes
Article Rating

Stay In Touch

Was this post helpful? Why not show your support and buy me a coffee?

Subscribe
Notify of
guest
4 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Bonita
Bonita
February 3, 2024 9:26 am

Hello John. Good tutorial ?

Can this replace the product featured image? I’d be very glad if it can.

Alexander Bar
April 10, 2024 3:05 am

Hi John,

Thank you for your wonderful WordPress tutorials! I’m looking at your tutorial on embedding Youtube and Vimeo videos into a product gallery. My usecase is slightly different. I need help embedding mp4 videos that have been uploaded to the WordPress Media Library. Can you help?

4
0
Would love your thoughts, please comment.x
()
x
Scroll to Top
×