WooCommerce: Show Video Instead of Featured Image

This week’s snippet is a very easy – yet helpful – one. Many ecommerce entrepreneurs prefer to display an interactive video instead of a static, boring, featured image.

So, let’s see how to work this out for a specific product ID!

Show video instead of featured image on the WooCommerce Single Product page
 

/**
 * @snippet       Display Video instead of Featured Image - WooCommerce
 * @how-to        Watch tutorial @ https://businessbloomer.com/?p=19055
 * @sourcecode    https://businessbloomer.com/?p=72700
 * @author        Rodolfo Melogli
 * @testedwith    WooCommerce 3.1.1
 */
 
add_action( 'woocommerce_before_single_product', 'bbloomer_show_video_not_image' );

function bbloomer_show_video_not_image() {

// Do this for product ID = 282 only
if ( is_single( '282' ) ) {

remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 );
remove_action( 'woocommerce_product_thumbnails', 'woocommerce_show_product_thumbnails', 20 );
add_action( 'woocommerce_before_single_product_summary', 'bbloomer_show_product_video', 30 );

}

}

function bbloomer_show_product_video() {
echo '<div class="woocommerce-product-gallery">';

// get video embed HTML from YouTube 
echo '<iframe width="560" height="315" src="https://www.youtube.com/embed/JHN7viKRxbQ?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>';

echo '</div>';
}

Where to add this code?

You can place PHP snippets at the bottom of your child theme functions.php file (before "?>" if you have it). CSS, on the other hand, goes in your child theme style.css file. Make sure you know what you are doing when editing such delicate files - if you need more guidance, please take a look at my free WooCommerce Customization video tutorial.

Does this snippet still work?

Please let me know in the comments if everything worked as expected. I would be happy to revise the snippet if you report otherwise (please provide screenshots). I have tested this code with Storefront theme, the WooCommerce version listed above and a WordPress-friendly hosting on PHP 7.

If you think this code saved you time & money, please join other Business Bloomer supporters and avail of 365 days of WooCommerce benefits. Thank you in advance :)

Need Help with WooCommerce?

Check out these free videos, tutorials and tips!

  • how-to-edit-woocommerce-with-php-snippets
  • woocommerce-hooks-add_action-list-visual
  • woocommerce-customize-single-product-page-PHP
  • woocommerce-customize-shop-page-PHP
  • woocommerce-advanced-customization
  • how-to-edit-woocommerce-cart
  • woocommerce-customize-checkout-page-PHP
  • woocommerce-email-customization
  • woocommerce-conditional-logic

Rodolfo Melogli

Author, WooCommerce expert, WordCamp speaker and Internet marketer, Rodolfo Melogli has worked as a WooCommerce freelancer since 2011. He helps entrepreneurs and developers overcome their WooCommerce nightmares :) Rodolfo is the organiser of WordCamp Dublin, the Dublin WooCommerce Meetup, the Dublin Ecommerce Meetup and the Dublin WordPress Meetup. He enjoys interacting with people, travelling and chasing tennis & soccer balls. Of course, he loves pizza too.

11 thoughts on “WooCommerce: Show Video Instead of Featured Image

  1. Nice tutorial. But it removes the whole photo gallery. Is there any way to integrate the video inside existing gallery?

    1. Hello Aslam, thanks so much for your comment! Yes, this is possible – but unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. Thanks a lot for your understanding! ~R

    2. Hi Aslam,

      Would be indeed a great feature!

  2. Rodolfo,

    Thanks for the video, it is amazing and works perfectly fine!

    I’m embedding an iFrame API instead of the video, which allows me to customize my WooCommerce products using a third party tool that I call through the iFrame. But, how can I improve the style of this embedded iFrame? For example: center it, separate the “Add to basket” text to another line, etc.

    And also, how could I get some parameters from my webpage (like php_session_id) to include them in the iFrame URL?

    I’d appreciate if you could give me some guidance about these two topics.

    Thanks a lot!

    1. Rodrigo, thanks so much for your comment! Yes, this is possible – but unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. Thanks a lot for your understanding! ~R

  3. I tried doing this but unfortunately it didn’t work. I just copied the snippet you provide and replace the product ID and the video url. but the video in the product page doesn’t show up, I just get a blank space where the image was.

    1. Alfonso, thanks for your comment! Weird, it works for me – maybe your theme is customizing the way WooCommerce works.

      Could you try using priority “30” instead of “20”:

      add_action( 'woocommerce_before_single_product_summary', 'bbloomer_show_product_video', 30 );
      
  4. How can I do this in place of a category image on the Storefront Homepage?

    1. CS, thanks so much for your comment! Yes, this is possible – but unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. Thanks a lot for your understanding! ~R

  5. Nice one Rodolfo, although I don’t really like changing an image for an video by programming on a product by product basis (having to change the programming for every new product that needs a vid). The idea of and cms is not having to hardcode content, seperating content control from functionality and presentation.

    The next challenge is to make it generic and get the video-url or -id from the post. Perhaps adding a custom field to the product containing the video url or video number? Then the snippet can just test the custom field and only if a video is entered replace the image. It would make the snippet somewhat more complex, but it would be a more generic solution.

    It would be nice if wordpress itself allows the featured image to be featured media, then this point is changed structuraly and automatically. Perhaps they will get there at some point.

    Thanks, Hans

    1. Hans, thanks for your comment! Positive, the whole snippet can be modified to “get” the value of a custom field, I only published a simple, light-weight solution here ๐Ÿ™‚

Questions? Feedback? Support? Leave your Comment Now!
_____
If you are writing code, please wrap it between: [php]code_here[/php]. Failure to complying with this (as well as going off topic) will result in comment deletion. You should expect a reply in about a week - this is a popular blog but I need to get paid work done first. Please consider joining #BloomerArmada to ask me 1-to-1 WooCommerce questions. Thank you :)
¯¯¯¯¯

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.