You can show a video instead of product images on the WooCommerce product page by removing the default gallery output for a specific product ID and replacing it with an embedded video player, giving standout products a more engaging presentation than static photos alone.
Why Replace Images With Video for Specific Products
- Demonstrate how a product works better than photos can convey
- Highlight a hero or flagship product with richer media
- Improve engagement and time-on-page for products that benefit from motion
Step 1: Add the Video Replacement Snippet
/** Replace the product gallery with a video embed for one specific product */
add_action( 'woocommerce_before_single_product', 'swap_gallery_for_video_on_product' );
function swap_gallery_for_video_on_product() {
$video_product_id = 340;
if ( is_single( $video_product_id ) ) {
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', 'render_product_video_embed', 20 );
}
}
function render_product_video_embed() {
echo '<div class="woocommerce-product-gallery">';
echo '<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ?rel=0" frameborder="0" allowfullscreen></iframe>';
echo '</div>';
}Replace the video product ID and the embed URL with your own. To apply this to multiple products, change is_single( $video_product_id ) to check against an array with in_array() instead.
Troubleshooting
Both the Gallery and Video Show Up
Confirm the priority numbers in the remove_action() calls match exactly what your theme uses to add the default gallery hooks — a mismatched priority means the removal silently fails.
Video Doesn’t Resize on Mobile
Wrap the iframe in a responsive container with CSS (a common pattern uses a padding-bottom percentage trick) since a fixed-width/height iframe won’t scale automatically.
Want to Show Video Alongside Images, Not Instead Of
Skip the remove_action() calls and just add the video as an extra element either before or after the gallery output instead of replacing it.
Frequently Asked Questions
Does this work with self-hosted video instead of YouTube?
Yes — swap the iframe for an HTML5 <video> tag pointing to your own hosted file instead of an embed URL.
Can I apply this to an entire category instead of one product ID?
Yes — replace the is_single() check with a category conditional like has_term() for the current product.
Will this affect the product gallery thumbnails too?
Yes — the snippet removes both the main gallery and its thumbnails, since both are controlled by separate default hooks that are unhooked together here.
Conclusion
Showing a video instead of product images on the WooCommerce product page is a matter of unhooking the default gallery actions for a chosen product and hooking in your own embed. Keep the replacement scoped to specific products where video genuinely adds value.
See also How to Enhance the WooCommerce Product Gallery. Then read How to Display FREE Instead of $0.00 for WooCommerce Product Prices.
Prefer no code? All-in-One Utilities Woo Add-on adds over 50 WooCommerce features, so you can switch them on without code.