How to Add Video In Product Image WooCommerce

Are you looking for a way to add a video in the product image? The single product page is very important in any WooCommerce store. This helps customers to make a decision on what to buy.

Table of Contents

This page includes different specs and features to help answer questions. It also provides reviews and allows product comparison to facilitate the buying process.

Therefore, it is important to add relevant information on this page.

You may want to display a YouTube video instead of a static, boring, featured image and product gallery.

How to Add Video in Product Image WooCommerce

By the end of this post, you should be able to add a video in the product image.

It is important to note that not all products are created equal. This means that we have to limit it to some product IDs.

However, WooCommerce does not have a built-in solution to do this. This is why we will use a custom PHP snippet.

Let us see how you can achieve this.

Steps to Add Video in Product Image WooCommerce

This is how the product image is displayed on the front end. Remember to check the product ID:

Here are the steps you need to follow:

Log into your WordPress site and access the Dashboard as the admin user.
From the Dashboard menu, click on Appearance Menu > Theme Editor Menu. When the Theme Editor page is opened, look for the theme functions file where we will add the function that will add the video as a product image.
Add the following code to the php file:

[php] /**

* @snippet Video Instead of Images at the Single Product

add_action( ‘woocommerce_before_single_product’, ‘njengah_show_video_not_image’ );

function njengah_show_video_not_image() {

// Do this for product ID = 47 only

if ( is_single( ’47’ ) ) {

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’, ‘njengah_show_product_video’, 20 );

}

function njengah_show_product_video() {

echo ‘<div class="woocommerce-product-gallery">’;

// get video embed HTML from YouTube

echo ‘<iframe width="560" height="315" src="https://www.youtube.com/embed/RA2Y0iIKKFU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>’;

echo ‘</div>’;

}
[/php]

This is the outcome:

Conclusion

In this brief tutorial, you have learned how to embed a video in the product image. This is a great way to provide relevant information about the product.

You should always remember that online shoppers use the single product page to obtain relevant information before they can make a purchase.

Adding a video will help you boost your conversion rate.

Editorial Staff

How to Add Video In Product Image WooCommerce

How to Add Video in Product Image WooCommerce

Steps to Add Video in Product Image WooCommerce

Conclusion

Similar Articles

Related