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?
- Go to your youtube video.
- Right-click on video and click copy embed code.
- Replace the embed code in the above code.
That’s it.
5 thoughts on “WooCommerce: Show Video Instead of Featured Image @ Product Page”
I want to add same youtube video in shop page. is this work?
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.
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.
for every product we should use past this code again and again.
i want video for all products
I want to show both images as well as youtube video how can i do this