wpgenie

simple youtube video to product

Jun 2nd, 2026
9,022
0
Never
2
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
PHP 3.71 KB | None | 0 0
  1. /**
  2.  * Simple Add YouTube Video to WooCommerce Product
  3.  * https://wpgenie.org
  4.  * this code snippet goes to themes\child-theme\functions.php
  5. */
  6.  
  7. /**
  8.  * 1. BACKEND: Add a Custom Meta Box for YouTube Video ID
  9.  *
  10.  */
  11. add_action( 'add_meta_boxes', 'add_wc_youtube_video_meta_box' );
  12. function add_wc_youtube_video_meta_box() {
  13.     add_meta_box(
  14.         'wc_youtube_product_video',
  15.         __( 'Product YouTube Video', 'woocommerce' ),
  16.         'render_wc_youtube_video_meta_box',
  17.         'product',
  18.         'side', // Places it in the sidebar near the Product Gallery
  19.         'low'
  20.     );
  21. }
  22.  
  23.  
  24. function render_wc_youtube_video_meta_box( $post ) {
  25.  
  26.     $video_id = get_post_meta( $post->ID, '_product_youtube_id', true );
  27.     wp_nonce_field( 'save_wc_youtube_video_meta', 'wc_youtube_video_nonce' );
  28.    
  29.     echo '<p><label for="product_youtube_id"><strong>' . __( 'YouTube Video ID:', 'woocommerce' ) . '</strong></label></p>';
  30.     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" />';
  31.     echo '<p class="description">' . __( 'Paste only the 11-character video ID (the part after "v=" in the URL).', 'woocommerce' ) . '</p>';
  32. }
  33.  
  34. /**
  35.  * 2. BACKEND: Save the YouTube Video ID when the product is saved
  36.  */
  37. add_action( 'woocommerce_process_product_meta', 'save_wc_youtube_video_meta' );
  38. function save_wc_youtube_video_meta( $post_id ) {
  39.  
  40.     if ( ! isset( $_POST['wc_youtube_video_nonce'] ) || ! wp_verify_nonce( $_POST['wc_youtube_video_nonce'], 'save_wc_youtube_video_meta' ) ) {
  41.         return;
  42.     }
  43.  
  44.     if ( isset( $_POST['product_youtube_id'] ) ) {
  45.         $video_id = sanitize_text_field( $_POST['product_youtube_id'] );
  46.         update_post_meta( $post_id, '_product_youtube_id', $video_id );
  47.     }
  48. }
  49.  
  50. /**
  51.  * 3. FRONTEND: Hook the YouTube Video above the Product Gallery
  52.  * WooCommerce outputs the gallery at priority 20. Setting this to 15 pushes it directly above it.
  53.  */
  54.  
  55. /**
  56.  * Hook: woocommerce_single_product_summary.
  57.  *
  58.  * @hooked woocommerce_template_single_title - 5
  59.  * @hooked woocommerce_template_single_rating - 10
  60.  * @hooked woocommerce_template_single_price - 10
  61.  * @hooked woocommerce_template_single_excerpt - 20
  62.  * @hooked woocommerce_template_single_add_to_cart - 30
  63.  * @hooked woocommerce_template_single_meta - 40
  64.  * @hooked woocommerce_template_single_sharing - 50
  65.  * @hooked WC_Structured_Data::generate_product_data() - 60
  66.  */
  67.  
  68. add_action( 'woocommerce_single_product_summary', 'display_youtube_video_above_gallery', 15 );
  69. function display_youtube_video_above_gallery() {
  70.  
  71.     global $product;
  72.    
  73.     if ( ! $product ) {
  74.         return;
  75.     }
  76.  
  77.     // Fetch the Video ID
  78.     $video_id = get_post_meta( $product->get_id(), '_product_youtube_id', true );
  79.  
  80.     // If an ID exists, output the responsive player
  81.     if ( ! empty( $video_id ) ) {
  82.         ?>
  83.         <div class="wc-product-youtube-video-wrapper" style="margin-bottom: 20px; width: 100%; clear: both;">
  84.             <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);">
  85.                 <iframe
  86.                     src="https://www.youtube.com/embed/<?php echo esc_attr( $video_id ); ?>?rel=0"
  87.                     style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
  88.                     frameborder="0"
  89.                     allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  90.                     allowfullscreen>
  91.                 </iframe>
  92.             </div>
  93.         </div>
  94.         <?php
  95.     }
  96. }
Advertisement