Enhancing your WooCommerce product pages with videos can significantly boost customer engagement and conversion rates. Instead of static images, videos offer a dynamic and detailed view of your products, providing a richer shopping experience. This guide will show you how to replace the featured image with a featured video in WooCommerce, using either a plugin for ease or custom code for greater flexibility. Transform your product presentation and give your store a competitive edge with captivating video content. Here’s a comprehensive guide to achieving this:
Method 1: Using a Plugin
Get This Theme: BuddyX Theme and BuddyX Theme Pro
Step 1: Install and Activate a Plugin
- Video Gallery – YouTube Gallery: This plugin allows you to add videos to your WooCommerce products.
- WooThumbs for WooCommerce: This premium plugin provides advanced product gallery features, including video support.
Step 2: Configure the Plugin
For Video Gallery – YouTube Gallery:
Go to your WordPress dashboard.
Navigate to Plugins > Add New.
Search for Video Gallery – YouTube Gallery.
Install and activate the plugin.
Follow the plugin’s instructions to add a video URL to your WooCommerce product.
For WooThumbs for WooCommerce:
- Purchase, install, and activate the plugin.
- Navigate to WooCommerce > WooThumbs.
- Configure the settings to enable video support.
- Add a video URL to your product gallery.
Method 2: Using Custom Code
Step 1: Add Video URL Meta Box
First, add a custom field to your product edit screen to input the video URL.
Add the following code to your theme’s functions.php file:
// Add a custom field to the product edit screen
function custom_woocommerce_product_video_field() {
woocommerce_wp_text_input(
array(
‘id’ => ‘_featured_video_url’,
‘label’ => __(‘Featured Video URL’, ‘woocommerce’),
‘description’ => __(‘Enter the URL of the featured video.’, ‘woocommerce’),
‘desc_tip’ => true,
)
);
}
add_action(‘woocommerce_product_options_general_product_data’, ‘custom_woocommerce_product_video_field’);
// Save the custom field value
function custom_woocommerce_product_save_video_field($post_id) {
$video_url = $_POST[‘_featured_video_url’];
if (!empty($video_url)) {
update_post_meta($post_id, ‘_featured_video_url’, esc_url($video_url));
}
}
add_action(‘woocommerce_process_product_meta’, ‘custom_woocommerce_product_save_video_field’);
Step 2: Display the Video Instead of the Featured Image
Next, replace the featured image with the video on the product page.
Add the following code to your theme’s functions.php file:
// Display video instead of the featured image
function custom_woocommerce_replace_featured_image_with_video($html, $post_id) {
$video_url = get_post_meta($post_id, ‘_featured_video_url’, true);
if ($video_url) {
$html = ‘<div class=”woocommerce-product-gallery__image”>’;
$html .= ‘<iframe width=”560″ height=”315″ src=”‘ . esc_url($video_url) . ‘” frameborder=”0″ allowfullscreen></iframe>’;
$html .= ‘</div>’;
}
return $html;
}
add_filter(‘woocommerce_single_product_image_html’, ‘custom_woocommerce_replace_featured_image_with_video’, 10, 2);
Step 3: Adjust the Video Display (Optional)
You might want to adjust the CSS to make the video fit better within your product gallery.
Add custom CSS to your theme’s style.css file:
max-width: 100%;
height: auto;
}
Conclusion
By following these steps, you can successfully replace the featured image with a featured video in WooCommerce. Using a plugin is the simplest method, especially for those who are not comfortable with coding. However, adding custom code gives you more control and flexibility over how the video is integrated into your product pages.
Interesting Reads:
How to Add Social Proof to Your WordPress Website?
