This week’s snippet is a very easy – yet helpful – one. Many ecommerce entrepreneurs prefer to display a YouTube video instead of a static, boring, featured image and product gallery.
Of course, not all products are created equal. So, let’s see how to make this work for a specific product ID only. Enjoy!
Show video instead of featured image and product gallery on the WooCommerce Single Product page
PHP Snippet: Display Video instead of Product Images – WooCommerce Single Product Page
/**
* @snippet Video Instead of Images @ Single Product
* @how-to Get CustomizeWoo.com FREE
* @author Rodolfo Melogli
* @compatible WooCommerce 4.0
* @community https://businessbloomer.com/club/
*/
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', 20 );
}
}
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&showinfo=0" frameborder="0" allowfullscreen></iframe>';
echo '</div>';
}
This code still works, unless you report otherwise. To exclude conflicts, temporarily switch to the Storefront theme, disable all plugins except WooCommerce, and test the snippet again: WooCommerce troubleshooting 101
Related content
WooCommerce Visual Hook Guide: Single Product Page Here’s a visual hook guide for the WooCommerce Single Product Page. This is part of my “Visual Hook Guide Series“, through which you can find WooCommerce hooks quickly and easily by seeing their actual locations (and you can copy/paste). If you like this guide and it’s helpful to you, let me know in the comments! […]
WooCommerce: Disable Variable Product Price Range $$$-$$$ You may want to disable the WooCommerce variable product price range which usually looks like $100-$999 when variations have different prices (min $100 and max $999 in this case). With this snippet you will be able to hide the highest price, and add a “From: ” prefix in front of the minimum price. At the […]
WooCommerce: Hide Price & Add to Cart for Logged Out Users You may want to force users to login in order to see prices and add products to cart. That means you must hide add to cart buttons and prices on the Shop and Single Product pages when a user is logged out. All you need is pasting the following code in your functions.php (please note: […]
WooCommerce: Add Custom Field to Product Variations Adding and displaying custom fields on WooCommerce products is quite simple. For example, you can add a “RRP/MSRP” field to a product, or maybe use ACF and display its value on the single product page. Easy, yes. Unfortunately, the above only applies to “simple” products without variations (or the parent product if it’s a variable […]
WooCommerce: Show Number Of Products Sold @ Product Page WooCommerce database already stores the number of products sold for you. Therefore, you may want to show such number on the product page, close to the Add To Cart button. As we’ve seen in my book Ecommerce and Beyond, showing the number of sales for each product can increase your sales conversion rate. All you […]
Rodolfo Melogli
Business Bloomer Founder
Author, WooCommerce expert and WordCamp speaker, Rodolfo has worked as an independent WooCommerce freelancer since 2011. His goal is to help entrepreneurs and developers overcome their WooCommerce nightmares. Rodolfo loves travelling, chasing tennis & soccer balls and, of course, wood fired oven pizza. Follow @rmelogli
36 thoughts on “WooCommerce: Show Video Instead of Product Images”
Jordan
Thanks so much for this great resource! I have a problem though. The src URLs are disappearing. I used this code to add an image and video and both src: URLs were removed when I tested it. I also tried placing them in the ‘add_below_prod_gallery’ hook and it did the same thing. The images only show up when I put it in the ‘single_product_summary’ hook.
the URL src looks like this on render.
As I am testing this code with the new default theme of Twenty Twenty Two.
I had to make the iframe video width smaller and adjusted it from 560 to 480. So that I could get the product information beside the video.
Hi, I´d like to show a video in a gallery woocommerce product, but as “normal” image that when you clik on it, it shows int he box where is shown the featured image, not in a fancybox or a popup and without any video icon and in autoplay mode.
Hi Jorge, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
Hi Matt, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
Hi, This array has to work with multiple youtube links. What modification has to be done in second part of the code to assign respective youtube videos to multiple products. Please help.
Hi Prashant, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
But it removes all the images below the feature image(for variable product), I want to replace the main image by video , but want to have those other images(for variable product) , how can I do that , please explain.
Muhammad, our free plugin will do this for you. You can also do automated searches for product videos on sites like YouTube, Facebook Videos, Vimeo and more.
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
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.
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
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.
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
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.
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? Customization? Leave your comment now! _____
If you are writing code, please wrap it like so: [php]code_here[/php]. Failure to complying with this, as well as going off topic or not using the English language will result in comment disapproval. You should expect a reply in about 2 weeks - this is a popular blog but I need to get paid work done first. Please consider joining the Business Bloomer Club to get quick WooCommerce support. Thank you!
Thanks so much for this great resource! I have a problem though. The src URLs are disappearing. I used this code to add an image and video and both src: URLs were removed when I tested it. I also tried placing them in the ‘add_below_prod_gallery’ hook and it did the same thing. The images only show up when I put it in the ‘single_product_summary’ hook.
the URL src looks like this on render.
Thank you for your help!
Can’t really tell from “here”, I’d need to see your plugins/theme setup and see if there is some conflict. iframe should work no problem
Is there any other tuts that show how to use this in addition to using gallery images? Thanks!
This should help https://www.businessbloomer.com/woocommerce-add-content-below-the-single-product-page-images/
Hi,
Amazing plugin. Simply amazing. However, the product image is coming full width and price and description has gone down.
Please see if any help is possible.
Note I am a young developer…so learning only.
Thank you! You’ll need a bit of CSS to fix that
As I am testing this code with the new default theme of Twenty Twenty Two.
I had to make the iframe video width smaller and adjusted it from 560 to 480. So that I could get the product information beside the video.
I then added this CSS:
.woocommerce div.product div.woocommerce-product-gallery { position: relative; width: 500px !important; float: left; }Because of these adjustments the video is now seen to the left of the product title, price, short description etc.
Thanks!
Hi, I´d like to show a video in a gallery woocommerce product, but as “normal” image that when you clik on it, it shows int he box where is shown the featured image, not in a fancybox or a popup and without any video icon and in autoplay mode.
Hi Jorge, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
This code is not working for me with a simple product in 4.2.1
Disable all plugins but Woo and switch to 2020 theme, then let me know please
hello! it is possible to make it play automatically and infnite? as a gif?
Yes, just place a GIF image there instead of a video
Hi,
This works great for the product image!
I’m using the code to insert an iframe of an image hosted on another site.
Is there any way to tweak the code so it also updates the image in the shop page.
I’ve tried to tweak the code but not sure what the hook is called for the other images
Thanks
Hi Matt, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
How can you include more products ID’s in the code instead of just a single ID?
Like this:
Hi, This array has to work with multiple youtube links. What modification has to be done in second part of the code to assign respective youtube videos to multiple products. Please help.
Hi Prashant, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!
But it removes all the images below the feature image(for variable product), I want to replace the main image by video , but want to have those other images(for variable product) , how can I do that , please explain.
That’s much more complex, sorry
Hi, I want to show video as a product thumbnail in woocommerce,
let me know if you can help me.
Thanks
No I’m sorry 😐
Muhammad, our free plugin will do this for you. You can also do automated searches for product videos on sites like YouTube, Facebook Videos, Vimeo and more.
https://wordpress.org/plugins/product-videos-for-woocommerce/
Nice tutorial. But it removes the whole photo gallery. Is there any way to integrate the video inside existing gallery?
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
Hi Aslam,
Would be indeed a great feature!
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!
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
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.
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”:
How can I do this in place of a category image on the Storefront Homepage?
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
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
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 🙂