25% off ProSNIPC25OFF

Product Video Tab

Adds a Video tab to the WooCommerce product tabs, embedding a responsive YouTube, Vimeo, or direct MP4 URL stored in a custom admin meta box on each product.

Module2 parts · by SnipCraft

PHPPHP

php
<?php
if ( ! class_exists( 'WooCommerce' ) ) { return; }

/* ── Admin meta box ── */
add_action( 'add_meta_boxes', 'scseed_pvt_meta_box' );
function scseed_pvt_meta_box() {
    add_meta_box(
        'scseed_product_video',
        __( 'Product Video', 'scseed' ),
        'scseed_pvt_meta_box_html',
        'product',
        'side',
        'default'
    );
}

function scseed_pvt_meta_box_html( $post ) {
    $url = get_post_meta( $post->ID, '_scseed_video_url', true );
    wp_nonce_field( 'scseed_pvt_save', 'scseed_pvt_nonce' );
    ?>
    <label for="scseed_video_url" style="display:block;margin-bottom:.4rem;font-weight:600">
        <?php esc_html_e( 'Video URL', 'scseed' ); ?>
    </label>
    <input type="url" id="scseed_video_url" name="scseed_video_url"
           value="<?php echo esc_attr( $url ); ?>"
           placeholder="https://www.youtube.com/watch?v=..."
           style="width:100%;box-sizing:border-box" />
    <p class="description" style="margin-top:.4rem">
        <?php esc_html_e( 'YouTube, Vimeo, or direct .mp4 URL. Leave blank to hide the tab.', 'scseed' ); ?>
    </p>
    <?php
}

add_action( 'save_post_product', 'scseed_pvt_save_meta', 10, 2 );
function scseed_pvt_save_meta( $post_id, $post ) {
    if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) { return; }
    if ( ! current_user_can( 'edit_post', $post_id ) ) { return; }
    if ( empty( $_POST['scseed_pvt_nonce'] ) ||
         ! wp_verify_nonce(
             sanitize_text_field( wp_unslash( $_POST['scseed_pvt_nonce'] ) ),
             'scseed_pvt_save'
         ) ) { return; }
    if ( isset( $_POST['scseed_video_url'] ) ) {
        $url = esc_url_raw( wp_unslash( $_POST['scseed_video_url'] ) );
        if ( $url ) {
            update_post_meta( $post_id, '_scseed_video_url', $url );
        } else {
            delete_post_meta( $post_id, '_scseed_video_url' );
        }
    }
}

/* ── Frontend tab ── */
add_filter( 'woocommerce_product_tabs', 'scseed_pvt_add_tab', 25 );
function scseed_pvt_add_tab( $tabs ) {
    global $product;
    $url = get_post_meta( $product->get_id(), '_scseed_video_url', true );
    if ( ! $url ) { return $tabs; }
    $tabs['scseed_video'] = array(
        'title'    => apply_filters( 'scseed_pvt_tab_label', __( 'Video', 'scseed' ) ),
        'priority' => 30,
        'callback' => 'scseed_pvt_tab_content',
    );
    return $tabs;
}

function scseed_pvt_tab_content() {
    global $product;
    $url = esc_url( get_post_meta( $product->get_id(), '_scseed_video_url', true ) );
    if ( ! $url ) { return; }

    // Check for YouTube
    if ( preg_match( '/(?:youtube.com/watch?v=|youtu.be/)([a-zA-Z0-9_-]{11})/', $url, $m ) ) {
        $embed = 'https://www.youtube.com/embed/' . $m[1];
        echo '<div class="scseed-pvt__wrap"><iframe class="scseed-pvt__iframe" src="'
           . esc_url( $embed ) . '" frameborder="0" allowfullscreen loading="lazy" '
           . 'title="' . esc_attr( $product->get_name() ) . '"></iframe></div>';
        return;
    }

    // Check for Vimeo
    if ( preg_match( '/vimeo.com/(d+)/', $url, $m ) ) {
        $embed = 'https://player.vimeo.com/video/' . $m[1];
        echo '<div class="scseed-pvt__wrap"><iframe class="scseed-pvt__iframe" src="'
           . esc_url( $embed ) . '" frameborder="0" allowfullscreen loading="lazy" '
           . 'title="' . esc_attr( $product->get_name() ) . '"></iframe></div>';
        return;
    }

    // Direct video file
    echo '<div class="scseed-pvt__wrap scseed-pvt__wrap--video">'
       . '<video controls preload="metadata" class="scseed-pvt__video">'
       . '<source src="' . $url . '" />'
       . esc_html__( 'Your browser does not support the video tag.', 'scseed' )
       . '</video></div>';
}

CSSStyles

css
/* ── Product Video Tab ── */
.scseed-pvt__wrap {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
    border-radius: 6px;
    background: #000;
}
.scseed-pvt__iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}
.scseed-pvt__wrap--video { padding-bottom: 0; height: auto; }
.scseed-pvt__video { width: 100%; display: block; border-radius: 6px; }
#media#video#woocommerce#product#tabs