如何不使用插件将视频添加到WooCommerce产品页面图库

如何不使用插件将视频添加到WooCommerce产品页面图库

　　在本教程中，您将学习如何不使用插件将视频添加到WooCommerce产品页面图库。这将支持来自 YouTube 和 Vimeo 等服务的 oEmbed 视频。虽然我们的其他指南将允许您用 YouTube 视频替换产品图片库，但以下代码片段将允许您将视频添加到现有图库。这将为您提供展示产品图片以及视频演示的机会。

　　推荐：如何从WooCommerce产品详细信息页面中删除SKU

1、向产品数据部分添加自定义字段

　　在此步骤中，我们将使用文本区域添加” Video URL “作为要包含在图库中的视频分隔列表。

　　使用add_action将函数wcsuccess_video_product_field 挂载到 woocommerce_product_options_pricing钩子上。这个钩子通常用于在WooCommerce产品编辑页面的“ 定价 ”部分添加自定义字段。函数内部调用了woocommerce_wp_textarea_input，创建了一个文本区域输入框，ID是video_url，标签是Video URL，描述提示用户输入逗号分隔的视频URL列表。这个函数的作用应该是在产品编辑页面的定价部分添加一个输入框，让管理员可以输入视频URL。

/*
 * "Add field to product data in add/edit product"
*/
add_action( 'woocommerce_product_options_pricing', 'wcsuccess_video_product_field' );
function wcsuccess_video_product_field() {
    woocommerce_wp_textarea_input(
        array(
            'id'          => 'video_url',
            'value'       => get_post_meta( get_the_ID(), 'video_url', true ),
            'label'       => 'Video URL',
            'desc_tip'    => true,
            'description' => 'A comma-separated list of video URLs',
        )
    );
}

2、将自定义字段保存到产品

　　接下来，我们需要将自定义字段保存到产品中。

　　wcsuccess_product_video_save 挂载到 woocommerce_process_product_meta钩子，当产品保存时触发。它从$_POST中获取video_url的值，检查非空后使用update_post_meta保存到数据库，并用esc_attr转义。

/*
 * "Save the video to the product"
*/
add_action('woocommerce_process_product_meta', 'wcsuccess_product_video_save');
function wcsuccess_product_video_save($post_id) {
    $video_list = $_POST['video_url'];
    if (!empty($video_list)) {
        update_post_meta($post_id, 'video_url', esc_attr($video_list));
    }
}

　　推荐：WP Speed of Light插件使用教程WordPress速度优化插件

3、在产品图库中显示视频

　　现在数据已保存，我们需要在产品图库中显示视频。所有视频都将出现在图库中任何图像的末尾。

　　使用add_action将函数wc_success_add_gallery_videos挂载到woocommerce_product_thumbnails钩子上，优先级为100，没有参数。这个钩子通常用于在产品缩略图区域添加内容，比如额外的图片或视频。函数内部获取当前产品的video_url元数据，然后将其拆分成数组，循环输出每个视频的嵌入代码。

　　使用wc_get_product(get_the_ID())获取当前产品对象。然后get_meta(‘video_url’)获取之前保存的视频URL列表。这里假设video_url是以逗号分隔的字符串，比如用户在后台输入的多个URL用逗号隔开。代码检查是否存在video_list，并且不为空。如果存在，使用explode分割成数组。遍历数组，每个视频URL通过wp_oembed_get处理，生成嵌入代码，并包裹在带有ResponsivevideoWrapper类的div中，放入product-gallery的image容器里。

/*
 * "Add the videos to the gallery"
*/
add_action( 'woocommerce_product_thumbnails', 'wc_success_add_gallery_videos', 100, 0 );
function wc_success_add_gallery_videos() {
    $product     = wc_get_product(get_the_ID());
    $video_list  = $product->get_meta('video_url');  
    
    if(isset($video_list) && !empty($video_list)) {
        $video_array = explode(",", $video_list);
        
        if($video_array) {
            foreach ($video_array as $video_embed) { ?>
                <div class="woocommerce-product-gallery__image">
                    <?php echo '<div class="ResponsivevideoWrapper">' . wp_oembed_get($video_embed) . '</div>'; ?>
                </div>
            <?php }
        }   
    }
}

4、在图库中添加视频缩略图

　　添加这些代码片段后，您将能够在图库末尾看到视频。但是，它们可能会显得不成比例，并且缩略图将在图库下方丢失。我们可以通过添加一些代码来解决这个问题。这次我们将添加 jQuery 来插入源视频的缩略图。

　　将视频的缩略图添加到WooCommerce的产品图库中，特别是当某些图片元素没有src属性时，用视频平台的缩略图（如YouTube或Vimeo）来替代

/*
 * "Add the thumbnails to the gallery"
*/
add_action('wp_footer', 'wc_success_video_thumbnails');
function wc_success_video_thumbnails() {
    $video_url_list = get_post_meta(get_the_ID(), 'video_url', true);

    if(isset($video_url_list) && !empty($video_url_list)) {
        ?>
        <script>
            (function($) {
                $(function() {
                    let videoList = "<?php echo $video_url_list; ?>";
                    let videoArray = videoList.split(',');
                    $(".flex-control-thumbs img").ready(function() {
                        let i = 0;
                        $('.flex-control-thumbs img').each(function () {
                            if (this.src.length == 0) {
                                if(videoArray[i].includes("youtube")) {
                                    videoArray[i] = videoArray[i].replace("https://www.youtube.com/watch?v=", "https://img.youtube.com/vi/");
                                    $(this).attr('src', videoArray[i]+'/3.jpg');
                                    i++;
                                } else if (videoArray[i].includes("vimeo")) {
                                    videoArray[i] = videoArray[i].replace("https://vimeo.com/", "https://vumbnail.com/");
                                    $(this).attr('src', videoArray[i]+'_small.jpg');
                                    i++;
                                } else {
                                    $(this).attr('src', 'https://img.youtube.com/vi/default_img/3.jpg');
                                    i++;
                                }
                            }
                        });
                    });
                });
            })(jQuery);
        </script>
        <?php
    }
}

　　推荐：使用GenerateBlocks插件改造WordPress网站

5、设置视频播放器的样式

　　最后，设置视频播放器的样式，使其具有正确的纵横比。将以下 CSS 代码添加到主题定制器 -> 附加 CSS。

/*
 * Snippet: How to Add a Video to the WooCommerce Product Page Gallery Without a Plugin – 2025
 * Author: John Cook 
 * URL: https://wcsuccessacademy.com/?p=771
 * Tested with WooCommerce 9.3.3
 * "CSS for responsive video"
*/

.ResponsivevideoWrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  padding-top: 25px;
  height: 0;
  float:left;
  width: 100%;
}
.ResponsivevideoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

　　将这些代码片段放在您的主题 functions.php 文件中，并将主题定制器中的 CSS 放在附加 css 下。

重要说明

• 特色图片：如果您的产品不包含特色图片，则视频将不会显示。建议为产品添加特色图片。
• 视频网址：确保视频网址以逗号分隔，并且不要按回车键。
• 默认缩略图$(this).attr('src', 'https://img.youtube.com/vi/default_img/3.jpg');：如果嵌入的视频提供商没有缩略图，您可以在步骤 4 中的此行添加默认缩略图的 URL。该代码为 YouTube 和 Vimeo 提供了规定。

　　推荐：如何从YouTube下载Shorts短片

总结

　　以上是晓得博客为你介绍的如何不使用插件将视频添加到WooCommerce产品页面图库的全部内容，通过遵循这些步骤，您可以将视频添加到 WooCommerce 产品页面图库，以丰富的多媒体内容增强您的产品列表。本指南可帮助您提供更具吸引力的购物体验，而无需依赖其他插件，从而确保更流畅、更快速的网站性能。

　　推荐：保护WooCommerce商店免受垃圾邮件攻击的10种方法

　　推荐： 如何使用WP_Query检索想要的任何帖子