Display a Video Instead of the Product Image in WooCommerce
Want to show a video instead of the product image gallery on your WooCommerce product pages? This snippet adds a "Video" tab to the Total metabox for products, where you can paste in a video URL from YouTube, Vimeo, or any other provider WordPress supports out of the box.
When a video is set, it replaces the image gallery on the single product page. Products without a video keep the standard gallery, so you can use this selectively.
/**
* Adds a "Video" tab with a video URL field to the Total metabox for WooCommerce
* products, then replaces the product image/gallery on single product pages with
* the embedded video when one is set.
*
* Falls back to the default product image template if no video is entered or if
* the URL isn't from a supported oEmbed provider.
*/
add_filter( 'wpex_metabox_array', function( $fields ) {
$fields['woo_video_tab'] = [
'title' => esc_html__( 'Video', 'total-child-theme' ),
'post_type' => [ 'product' ], // remove this param to display on all post types
'settings' => [
'wpex_post_video' => [
'title' => esc_html__( 'Video', 'total-child-theme' ),
'description' => esc_html__( 'Product video', 'total-child-theme' ),
'id' => 'wpex_post_video',
'type' => 'text',
],
],
];
return $fields;
} );
if ( ! function_exists( 'woocommerce_show_product_images' ) ) {
function woocommerce_show_product_images() {
$video = get_post_meta( get_the_ID(), 'wpex_post_video', true );
if ( $video && function_exists( 'wpex_get_post_video_html' ) ) {
$embed = wpex_get_post_video_html( $video );
} elseif ( $video ) {
$embed = wp_oembed_get( esc_url_raw( $video ) );
} else {
$embed = '';
}
if ( ! $embed ) {
wc_get_template( 'single-product/product-image.php' );
return;
}
echo '<div class="images">' . $embed . '</div>';
}
}All PHP snippets should be added via child theme's functions.php file or via a plugin.
We recommend Code Snippets (100% Free) or WPCode (sponsored)
We recommend Code Snippets (100% Free) or WPCode (sponsored)
Related Snippets