WooCommerce Gallery - Adding a Video via URL from ACF

Question

I've searched high and low but can't seem to find a solution for this. I am working with WooCommerce and would like to add a video to certain products within the shop to the WooCommerce gallery. In simple terms, if a video exists, it will add another thumbnail in the gallery component which when clicked would then display the video in the viewport, in the same way that the existing images work.

The URL for the videos is being held in an ACF text field on the product page (video_url_mp4). I can't seem to find how to do this, i've tried manipulating product-image.php as below but this isn't working as intended.

<div class="<?php echo esc_attr( implode( ' ', array_map( 'sanitize_html_class', $wrapper_classes ) ) ); ?>" data-columns="<?php echo esc_attr( $columns ); ?>" style="opacity: 0; transition: opacity .25s ease-in-out;">
<figure class="woocommerce-product-gallery__wrapper">
    <?php
    if ( $post_thumbnail_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

    // Check for video URL and display video if available
    $video_url = get_field('video_url_mp4', $product->get_id());
    if ($video_url) {
        $video_thumbnail = wp_get_attachment_image_src( $post_thumbnail_id, 'woocommerce_thumbnail' ); // Get the thumbnail image for the video
        if ($video_thumbnail) {
            // Output the additional thumbnail in the thumbnail row
            echo '<div class="woocommerce-product-gallery__image">';
            echo '<a href="#" class="video-thumbnail-selector" data-video-url="' . esc_url( $video_url ) . '"><img src="' . esc_url( $video_thumbnail[0] ) . '" alt="Video Thumbnail"></a>';
            echo '</div>';
        }
    }

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

Any help with this would be much appreciated.

Answer 1

There are couple of ways you can try and see which one works:

1.using oEmbed field type.It provides an interactive component for embedding videos, images, tweets, audio, and other content. To display it:

<div class="embed-container">
<?php the_field('oembed'); ?>

For More info on this you can refer to the documentation https://www.advancedcustomfields.com/resources/oembed/

2. You can use "file" field type to upload the video file. and use the_field to display it.Again refer to the documnentaion.

3. You can also use "link" field type and add a link to the video. https://www.advancedcustomfields.com/resources/link/

Hope this helps.