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