Sandesh

April 19, 2020

WooCommerce: Show Video Instead of Featured Image @ Product Page

Ecommerce trends are changing a lot. Now, users are consuming more videos, and product images don’t provide many details about the product to the user. In such cases, users are tending to watch a video of product details. Product feature videos are helping them to make a firm decision without confusion.

You just need to know a product id of the product and the embed code of your video. I have explained about youtube video embed code. You can check it at the end of the article.

/**
 * @snippet       WooCommerce: Show Video Instead of Featured Image @ Product Page
 * @author        Sandesh Jangam
 * @donate $7     https://www.paypal.me/SandeshJangam/7
 */

add_action( 'woocommerce_before_single_product', 'ts_show_video_for_specific_product' );

function ts_show_video_for_specific_product() {
	// Here 31 is product id. You can change it according to your need.
	if ( is_single( '31' ) ) {
		remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 );
	 	add_action( 'woocommerce_before_single_product_summary', 'ts_add_iframe_video', 30 );
	}
}

function ts_add_iframe_video() {
	
	$output = '<div class="woocommerce-product-gallery images">';
        // Replace your iframe code from youtube here.
	$output .= '<iframe width="956" height="538" src="https://www.youtube.com/embed/aqz-KE-bpKQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>';
	$output .= '</div>';
	
	echo $output;
}

How to get embed code from youtube video?

  1. Go to your youtube video.
  2. Right-click on video and click copy embed code.
  3. Replace the embed code in the above code.

That’s it.

Where to add custom PHP code?

Add the above PHP code at the end of to your child theme’s functions.php. There are many ways to add custom PHP code ( custom functionality ) to WordPress / WooCommerce website. Read this article for more information

Why this code is not working?

If you face any issue with the above code, then please let me know in the comment. I will be happy to review the code, and If it is working for you, then show me some love in the comment section.

Thank you in advance…!

Sharing is Caring!
Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on telegram
Share on whatsapp

About the Author

Sandesh Jangam is Developer, WooCommerce Expert, and Podcaster. He is working as a WordPress developer since 2014 and helping people with this blog. He loves to travel ancient temples, chilling at the beach and reading books

Join 1,000+ Subscribers

Get exclusive access to WordPress, WooCommerce tips, articles, tutorials right in your inbox.​

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on telegram
Share on whatsapp

5 thoughts on “WooCommerce: Show Video Instead of Featured Image @ Product Page”

  1. Hello Sandesh

    Your code above is for a specific product but if want to replace all single product image with a iframe.

    Thanks for your help.

    1. It is possible. The code needs a tweak for a product id. I am not sure, you have the same iframe for all products or specific. YOu can use custom field to fetch product-specific data.

Leave a Comment

Your email address will not be published.

Become a WooCommerce Customization Expert and Earn More​

Get an early access notification right in your inbox.

Learn More or Register Now >>>