Sustituir la imagen de producto por un vídeo en Woocommerce

				
					function ayra_media_principal_producto() {
    global $product;

    if ( ! $product ) {
        $product = wc_get_product( get_the_ID() );
    }

    if ( ! $product ) {
        return '';
    }

    $product_id  = $product->get_id();
    $video_url   = get_post_meta( $product_id, '_video_producto', true );
    $featured_id = $product->get_image_id();
    $gallery_ids = $product->get_gallery_image_ids();

    $items = array();

    // Añadir vídeo si existe
    if ( ! empty( $video_url ) ) {
        $items[] = array(
            'type'  => 'video',
            'embed' => wp_oembed_get( $video_url ),
            'thumb' => '',
        );
    }

    // Imagen destacada
    if ( $featured_id ) {
        $items[] = array(
            'type'  => 'image',
            'html'  => wp_get_attachment_image( $featured_id, 'large' ),
            'thumb' => wp_get_attachment_image_url( $featured_id, 'thumbnail' ),
        );
    }

    // Galería del producto
    foreach ( $gallery_ids as $image_id ) {
        $items[] = array(
            'type'  => 'image',
            'html'  => wp_get_attachment_image( $image_id, 'large' ),
            'thumb' => wp_get_attachment_image_url( $image_id, 'thumbnail' ),
        );
    }

    if ( empty( $items ) ) {
        return '';
    }

    ob_start();
    ?>

    <div class="producto-media-gallery">

        <div class="producto-media-main">
            <?php echo $items[0]['type'] === 'video' ? $items[0]['embed'] : $items[0]['html']; ?>
        </div>

        <?php if ( count( $items ) > 1 ) : ?>

            <div class="producto-media-thumbs">

                <?php foreach ( $items as $index => $item ) : ?>

                    <button class="producto-media-thumb <?php echo $index === 0 ? 'active' : ''; ?>"
                            type="button"
                            data-content="<?php echo esc_attr( $item['type'] === 'video' ? $item['embed'] : $item['html'] ); ?>">

                        <?php if ( $item['type'] === 'video' ) : ?>

                            <div class="producto-video-thumb">
                                <span class="producto-video-icon">▶</span>
                            </div>

                        <?php elseif ( ! empty( $item['thumb'] ) ) : ?>

                            <img decoding="async" src="<?php echo esc_url( $item['thumb'] ); ?>" alt="">

                        <?php endif; ?>

                    </button>

                <?php endforeach; ?>

            </div>

        <?php endif; ?>

    </div>

    <script>
    document.addEventListener('click', function(e) {

        const thumb = e.target.closest('.producto-media-thumb');

        if (!thumb) return;

        const gallery = thumb.closest('.producto-media-gallery');
        const main = gallery.querySelector('.producto-media-main');

        main.innerHTML = thumb.dataset.content;

        gallery.querySelectorAll('.producto-media-thumb').forEach(btn => {
            btn.classList.remove('active');
        });

        thumb.classList.add('active');

    });
    </script>

    <?php
    return ob_get_clean();
}

add_shortcode( 'media_principal_producto', 'ayra_media_principal_producto' );