Skip to content

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)
Related Snippets
Back To Top