How to Replace Featured Product Images with a Product Video in WooCommerce

7Pillars.io, bLabs Ventures’ ‘Marketing On Demand’ shop, is built on a few platforms, WooCommerce being a major one for the foundation of our e-commerce needs.

The WooCommerce interface by default allows for a user to upload a series of images associated with each product. This works fine for selling clothing, candy, or other tangible goods – but in the case of our ‘Marketing On Demand’ services, we felt that a video explaining the service would be much more effective in place of a standard featured image.

There are several plug-ins that may be able to achieve some version of this – but I felt our need was too specific and thus, delved into a custom solution.

Below is a step-by-step solution of what I did to achieve the following acceptance criteria:

1. Create a field on a WooCommerce product page that accepts a video embed code.

2. If the field is NOT empty, display this video in place of featured image on the single-product page. If the field IS empty, show the featured image instead.

3. ONLY show this video on the single product page. Use the featured image on collection pages, cart pages, e-mails, and anywhere else it might appear.

With that in mind, let’s get started. To be clear, all code changes should be made within a child theme. If you aren’t already doing that, here’s the official WP documentation on Child Themes – https://developer.wordpress.org/themes/advanced-topics/child-themes/

Step 1 – Create a new ‘Product Video’ field in the WC product editor. Paste the following code at the bottom of your functions.php file

   add_action( 'woocommerce_product_options_general_product_data', 'product_video_field' );
   function product_video_field() {
       $args = array(
           'id'    => 'product_video_field',
           'label'    => sanitize_text_field( 'Product Video' ),
           'placeholder'   => 'Cut and paste video embed code here',
           'desc_tip'    => true,
           'style'    => 'height:120px'

       );
       echo woocommerce_wp_textarea_input( $args );
   }

   add_action( 'woocommerce_process_product_meta', 'product_video_field_save' );

woocommerce_product_options_general_product_data hooks into the output of the ‘Product Data’ tab. There are more arguments available for woocommerce_wp_textarea_input, the above example only uses a few. See the function definition from WC docs for more info on that. The result is the following:

woocommerce_product_options_general_product_data

Now that we’ve created the field, we need to make sure the data is saved when we publish/update our product. To do this we hook into woocommerce_process_product_meta. Paste the below at the bottom your functions.php file.

 add_action( 'woocommerce_process_product_meta', 'product_video_field_save' );

   function product_video_field_save($post_id) {
       $product_video_field = $_POST['product_video_field'];
       update_post_meta($post_id, 'product_video_field', $product_video_field);
}

Step 2 – Output the video on the product page

To do this, we’ll need to modify the woocommerce single-product template file. To do this,  create the following directories/file in your child theme: /your-child-theme/woocommerce/single-product/product-image.php
Cut and paste the below as the contents of the new product-image file.

<?php
/**
* Single Product Image
*
* This template can be overridden by copying it to yourtheme/woocommerce/single-product/product-image.php.
*
* HOWEVER, on occasion WooCommerce will need to update template files and you
* (the theme developer) will need to copy the new files to your theme to
* maintain compatibility. We try to do this as little as possible, but it does
* happen. When this occurs the version of the template file will be bumped and
* the readme will list any important changes.
*
* @see     https://docs.woocommerce.com/document/template-structure/
* @package WooCommerce/Templates
* @version 3.5.1
*/

defined( 'ABSPATH' ) || exit;

// Note: `wc_get_gallery_image_html` was added in WC 3.3.2 and did not exist prior. This check protects against theme overrides being used on older versions of WC.
if ( ! function_exists( 'wc_get_gallery_image_html' ) ) {
    return;
}

global $product;

$columns           = apply_filters( 'woocommerce_product_thumbnails_columns', 4 );
$post_thumbnail_id = $product->get_image_id();
$wrapper_classes   = apply_filters( 'woocommerce_single_product_image_gallery_classes', array(
    'woocommerce-product-gallery',
    'woocommerce-product-gallery--' . ( $product->get_image_id() ? 'with-images' : 'without-images' ),
    'woocommerce-product-gallery--columns-' . absint( $columns ),
    'images',
) );

//for video, need to modify the wrapper classes, as they disable click events
$video_wrapper_classes   = apply_filters( 'woocommerce_single_product_image_gallery_classes', array(
    'woocommerce-product-gallery--' . ( $product->get_image_id() ? 'with-images' : 'without-images' ),
    'woocommerce-product-gallery--columns-' . absint( $columns ),
    'images',
) );

$product_video = get_post_meta(get_the_ID(), 'product_video_field', true );
$product_sub_image = get_the_post_thumbnail($post, [120]);

?>
<div class="<?php echo esc_attr( implode( ' ', array_map( 'sanitize_html_class', $video_wrapper_classes ) ) ); ?>" data-columns="<?php echo esc_attr( $columns ); ?>">
    <figure class="woocommerce-product-gallery__wrapper">
        <?php //if the product video field is not empty, output the video on the page.
            if ( !empty($product_video)) { ?>
                <div id="product-video-container">
                      <?php echo $product_video; ?> 
                </div>
                <!--this is optional, display the featured image below the video, IF there is a video -->
                <div id="product-sub-image-container">
                <?php echo $product_sub_image; ?>
                </div>
             <?php } else {
                 //if no video, output featured image as per default template
            if ( $product->get_image_id() ) {
            $html = wc_get_gallery_image_html( $post_thumbnail_id, true );
            } else {
            $html = '<div class="woocommerce-product-gallery__image--placeholder">';
            $html .= sprintf( '<img src="%s" alt="%s" class="wp-post-image" />', esc_url( wc_placeholder_img_src( 'woocommerce_single' ) ), esc_html__( 'Awaiting product image', 'woocommerce' ) );
            $html .= '</div>';
            }
        }
        echo apply_filters( 'woocommerce_single_product_image_thumbnail_html', $html, $post_thumbnail_id ); // phpcs:disable WordPress.XSS.EscapeOutput.OutputNotEscaped

        do_action( 'woocommerce_product_thumbnails' );
        ?>
    </figure>
</div>

As illustrated in the comment blocks, this template also contains an option to output the featured image underneath the video. If you don’t want that, simply erase these 3 lines:

<div id="product-sub-image-container">
           <?php echo $product_sub_image; ?>
        </div>

And with that, voila! An iframe/embed code taken from youtube, pasted into the field below, yields a responsive, featured video in place of our featured image.

woocommerce_product_options_general_product_data
woocommerce

That’s it! I would love to hear your questions, and also any modifications, customizations, and improvements you were able to attach to the above snippets.

Happy PHPing.

 

Dan Kurfirst,

Senior Developer

We are recognized as a top New Jersey Web Design Agency on DesignRush. You don’t have to do it alone Blueliner can help. Contact us with your Web Development needs and be ready to take your business to the next level.

DROP US A LINE!

SEND MESSAGE
Instagram E-Commerce Blueliner MarketingTeenagers having fun
Share via