Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /**
- * Simple Add YouTube Video to WooCommerce Product
- * https://wpgenie.org
- * this code snippet goes to themes\child-theme\functions.php
- */
- /**
- * 1. BACKEND: Add a Custom Meta Box for YouTube Video ID
- *
- */
- add_action( 'add_meta_boxes', 'add_wc_youtube_video_meta_box' );
- function add_wc_youtube_video_meta_box() {
- add_meta_box(
- 'wc_youtube_product_video',
- __( 'Product YouTube Video', 'woocommerce' ),
- 'render_wc_youtube_video_meta_box',
- 'product',
- 'side', // Places it in the sidebar near the Product Gallery
- 'low'
- );
- }
- function render_wc_youtube_video_meta_box( $post ) {
- $video_id = get_post_meta( $post->ID, '_product_youtube_id', true );
- wp_nonce_field( 'save_wc_youtube_video_meta', 'wc_youtube_video_nonce' );
- echo '<p><label for="product_youtube_id"><strong>' . __( 'YouTube Video ID:', 'woocommerce' ) . '</strong></label></p>';
- echo '<input type="text" id="product_youtube_id" name="product_youtube_id" value="' . esc_attr( $video_id ) . '" style="width:100%; padding: 6px;" placeholder="e.g., dQw4w9WgXcQ" />';
- echo '<p class="description">' . __( 'Paste only the 11-character video ID (the part after "v=" in the URL).', 'woocommerce' ) . '</p>';
- }
- /**
- * 2. BACKEND: Save the YouTube Video ID when the product is saved
- */
- add_action( 'woocommerce_process_product_meta', 'save_wc_youtube_video_meta' );
- function save_wc_youtube_video_meta( $post_id ) {
- if ( ! isset( $_POST['wc_youtube_video_nonce'] ) || ! wp_verify_nonce( $_POST['wc_youtube_video_nonce'], 'save_wc_youtube_video_meta' ) ) {
- return;
- }
- if ( isset( $_POST['product_youtube_id'] ) ) {
- $video_id = sanitize_text_field( $_POST['product_youtube_id'] );
- update_post_meta( $post_id, '_product_youtube_id', $video_id );
- }
- }
- /**
- * 3. FRONTEND: Hook the YouTube Video above the Product Gallery
- * WooCommerce outputs the gallery at priority 20. Setting this to 15 pushes it directly above it.
- */
- /**
- * Hook: woocommerce_single_product_summary.
- *
- * @hooked woocommerce_template_single_title - 5
- * @hooked woocommerce_template_single_rating - 10
- * @hooked woocommerce_template_single_price - 10
- * @hooked woocommerce_template_single_excerpt - 20
- * @hooked woocommerce_template_single_add_to_cart - 30
- * @hooked woocommerce_template_single_meta - 40
- * @hooked woocommerce_template_single_sharing - 50
- * @hooked WC_Structured_Data::generate_product_data() - 60
- */
- add_action( 'woocommerce_single_product_summary', 'display_youtube_video_above_gallery', 15 );
- function display_youtube_video_above_gallery() {
- global $product;
- if ( ! $product ) {
- return;
- }
- // Fetch the Video ID
- $video_id = get_post_meta( $product->get_id(), '_product_youtube_id', true );
- // If an ID exists, output the responsive player
- if ( ! empty( $video_id ) ) {
- ?>
- <div class="wc-product-youtube-video-wrapper" style="margin-bottom: 20px; width: 100%; clear: both;">
- <div class="video-container" style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; border-radius: 4px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);">
- <iframe
- src="https://www.youtube.com/embed/<?php echo esc_attr( $video_id ); ?>?rel=0"
- style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
- frameborder="0"
- allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
- allowfullscreen>
- </iframe>
- </div>
- </div>
- <?php
- }
- }
Advertisement