TUTORIAL: Product Video for Woocommerce

Olá, tudo bem?

Kássin Fogaça falando e hoje estou aqui para te “salvar” rsrs!

Caso você esteja procurando uma forma fácil e simples de adicionar um vídeo no lugar da imagem de destaque de um produto, você chegou ao lugar certo!

Vamos direto ao ponto!

Para adicionar um vídeo no lugar de uma imagem destacada de produto, basta você adicionar o seguinte snippet ao seu site!

Confira o resultado!

Hello, how are you?

Kássin Fogaça speaking, and today I’m here to “save” you, hahaha!

If you’re looking for an easy and simple way to replace a product’s featured image with a video, you’ve come to the right place!

Let’s get straight to the point!

To add a video in place of a featured product image, simply add the following snippet to your website!

Check out the result!

<?php

// Adicione os metadados ao produto
add_action('woocommerce_product_options_general_product_data', 'custom_product_field');

function custom_product_field() {
    global $woocommerce, $post;

    echo '<div class="options_group">';

    woocommerce_wp_text_input(
        array(
            'id'            => 'mp4_video_url',
            'label'         => __('URL do Vídeo (MP4 ou HEVC)', 'woocommerce'),
            'placeholder'   => 'https://example.com/video.mp4',
            'description'   => __('Insira a URL do vídeo (MP4 ou HEVC) aqui.', 'woocommerce'),
            'desc_tip'      => 'true'
        )
    );

    echo '<br>';

    woocommerce_wp_checkbox(
        array(
            'id'            => 'show_video_in_shop',
            'label'         => __('Exibir vídeo na vitrine', 'woocommerce'),
            'description'   => __('Marque esta caixa se deseja exibir o vídeo na vitrine da loja.', 'woocommerce')
        )
    );

    echo '</div>';
}

// Salva o valor do campo de URL do vídeo e a opção de exibição na vitrine
add_action('woocommerce_process_product_meta', 'save_custom_product_field');

function save_custom_product_field($post_id) {
    $mp4_video_url = isset($_POST['mp4_video_url']) ? esc_url($_POST['mp4_video_url']) : '';
    $show_video_in_shop = isset($_POST['show_video_in_shop']) ? 'yes' : 'no';

    update_post_meta($post_id, 'mp4_video_url', $mp4_video_url);
    update_post_meta($post_id, 'show_video_in_shop', $show_video_in_shop);
}

// Exiba o vídeo como imagem destacada na página do produto
add_filter('woocommerce_single_product_image_thumbnail_html', 'replace_featured_image_with_video', 10, 2);

function replace_featured_image_with_video($html, $attachment_id) {
    global $post;

    if ($attachment_id == get_post_thumbnail_id($post->ID)) {
        $mp4_video_url = get_post_meta($post->ID, 'mp4_video_url', true);

        if ($mp4_video_url) {
            $video_html = '<video width="100%" height="auto" autoplay loop muted playsinline>';
            $video_html .= '<source src="' . $mp4_video_url . '" type="video/mp4">';
            $video_html .= '<source src="' . $mp4_video_url . '" type="video/hevc">';
            $video_html .= 'Seu navegador não suporta o vídeo.';
            $video_html .= '</video>';
            return $video_html;
        }
    }

    return $html;
}

// Exiba o vídeo na vitrine de produtos, se a opção estiver marcada
add_action('woocommerce_before_shop_loop_item_title', 'display_video_in_product_loop');

function display_video_in_product_loop() {
    global $product;

    $show_video_in_shop = get_post_meta($product->get_id(), 'show_video_in_shop', true);

    if ($show_video_in_shop === 'yes') {
        $mp4_video_url = get_post_meta($product->get_id(), 'mp4_video_url', true);

        if ($mp4_video_url) {
            $video_html = '<video width="100%" height="auto" autoplay loop muted playsinline>';
            $video_html .= '<source src="' . $mp4_video_url . '" type="video/mp4">';
            $video_html .= '<source src="' . $mp4_video_url . '" type="video/hevc">';
            $video_html .= 'Seu navegador não suporta o vídeo.';
            $video_html .= '</video>';
            echo $video_html;
        }
    }
}