WooCommerce 添加产品视频的实用方法

本文旨在指导开发者如何在 WooCommerce 产品页面上集成视频内容，提供两种实现方法：使用 ACF 自定义字段和 WooCommerce 产品视频插件，并针对常见问题提供解决方案，确保视频能正确显示且避免 JavaScript 错误。通过本文，你将学会如何灵活地将视频融入你的 WooCommerce 产品展示中。

方法一：使用 ACF 自定义字段添加视频

Advanced Custom Fields (ACF) 插件是一个强大的 WordPress 插件，允许你向 WordPress 页面、文章和自定义文章类型添加自定义字段。我们可以利用它来为 WooCommerce 产品添加视频链接。

步骤 1：创建 ACF 字段

1. 安装并激活 ACF 插件。
2. 在 WordPress 后台，导航到 "Custom Fields" -> "Add New"。
3. 创建一个新的字段组，例如 "Product Videos"。
4. 添加一个字段，字段类型选择 "oEmbed"，字段名设置为 "product_video"。
5. 设置字段组的 "Location" 规则，使其显示在 "Product" 上。

步骤 2：在产品页面添加视频链接

1. 编辑一个 WooCommerce 产品。
2. 在产品编辑页面，找到 "Product Videos" 字段组。
3. 在 "product_video" 字段中，粘贴 YouTube 或其他视频平台的视频链接。

步骤 3：在产品页面显示视频

将以下代码添加到你的主题的 functions.php 文件中，或者使用代码片段插件：

add_action( 'woocommerce_before_shop_loop_item_title', 'display_product_video_thumbnail', 9 );

function display_product_video_thumbnail() {
    global $product;

    $video_url = get_field( 'product_video', $product->get_id() );

    if ( $video_url ) {
        remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 );

        echo '
';
        echo wp_oembed_get( $video_url, array( 'width' => 200 ) ); // 使用 wp_oembed_get 函数安全地嵌入视频
        echo '
';
    }
}

代码解释：

• add_action( 'woocommerce_before_shop_loop_item_title', 'display_product_video_thumbnail', 9 ): 将 display_product_video_thumbnail 函数挂钩到 woocommerce_before_shop_loop_item_title 动作，在产品缩略图之前显示视频。
• get_field( 'product_video', $product->get_id() ): 获取产品自定义字段 "product_video" 的值，即视频链接。
• wp_oembed_get( $video_url, array( 'width' => 200 ) ): 使用 WordPress 内置的 wp_oembed_get 函数安全地嵌入视频，设置视频宽度为 200 像素。这比直接使用
• remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 ): 移除默认的产品缩略图，以便只显示视频。

注意事项：

• 确保 ACF 插件已正确安装并激活。
• 检查 ACF 字段名是否正确，大小写是否一致。
• 使用 wp_oembed_get() 函数可以自动处理不同视频平台的嵌入代码，提高安全性。
• 如果视频没有显示，可以使用 var_dump( $video_url ) 来检查 $video_url 变量的值，确保它包含正确的视频链接。

方法二：使用 WooCommerce 产品视频插件

WooCommerce 官方提供了一个 "Product Video for WooCommerce" 插件，可以方便地为产品添加视频。

步骤 1：安装并激活插件

1. 购买并下载 "Product Video for WooCommerce" 插件。
2. 在 WordPress 后台，导航到 "Plugins" -> "Add New"。
3. 上传并激活插件。

步骤 2：在产品页面添加视频

1. 编辑一个 WooCommerce 产品。
2. 在产品编辑页面，找到 "Product Video" 选项卡。
3. 上传视频文件或添加 YouTube/Vimeo 视频链接。

步骤 3：解决 Uncaught TypeError: jQuery(...).slick is not a function 错误

这个错误通常是由于 slick.js 插件没有正确加载或 jQuery 没有正确加载导致的。

解决方案：

1. 确保 jQuery 已加载： WooCommerce 依赖于 jQuery。 确保你的主题或插件没有阻止 jQuery 的加载。 WordPress 默认加载 jQuery，但有些主题或插件可能会禁用它。 你可以尝试在 functions.php 文件中强制加载 jQuery：

   function enqueue_jquery() {
       wp_enqueue_script( 'jquery' );
   }
   add_action( 'wp_enqueue_scripts', 'enqueue_jquery' );

2. 正确加载 slick.js 和 slick.css： 使用 wp_enqueue_script 和 wp_enqueue_style 函数来加载 slick.js 和 slick.css 文件，并确保 slick.js 依赖于 jQuery：

   function enqueue_slick() {
       if(is_shop() || is_product() || is_product_category() ) {
           wp_enqueue_style( 'slick-css', get_template_directory_uri() . '/assets/js/slick/slick.css' );
           wp_enqueue_style( 'slick-theme-css', get_template_directory_uri() . '/assets/js/slick/slick-theme.css' );
           wp_enqueue_script( 'slick-min-js', get_template_directory_uri() . '/assets/js/slick/slick.min.js', array( 'jquery' ), '', true ); // 确保依赖于 jQuery 并在页脚加载
       }
   }
   add_action( 'wp_enqueue_scripts', 'enqueue_slick' );

   代码解释：

   • wp_enqueue_style() 用于加载 CSS 文件。
   • wp_enqueue_script() 用于加载 JavaScript 文件。
   • array( 'jquery' ) 指定 slick-min-js 依赖于 jQuery，确保 jQuery 在 slick.js 之前加载。
   • true 参数表示在页脚加载 JavaScript 文件，这有助于提高页面加载速度。

3. 检查文件路径： 确保 slick.js 和 slick.css 文件的路径是正确的。 使用 get_template_directory_uri() 函数获取主题目录的 URL，然后拼接文件的相对路径。

4. 避免冲突： 如果你的主题或插件已经加载了其他版本的 slick.js，可能会导致冲突。 尝试禁用其他插件，看看是否能解决问题。

注意事项：

• 确保 "Product Video for WooCommerce" 插件已正确安装并激活。
• 检查视频文件是否已正确上传或视频链接是否有效。
• 仔细检查 slick.js 和 slick.css 文件的加载方式，确保没有冲突。
• 使用浏览器的开发者工具来检查 JavaScript 错误，并查看网络请求，确认文件是否已正确加载。

总结

本文介绍了两种为 WooCommerce 产品添加视频内容的方法：使用 ACF 自定义字段和 WooCommerce 产品视频插件。 选择哪种方法取决于你的具体需求和技术水平。 使用 ACF 更加灵活，可以自定义视频的显示方式，但需要一定的代码编写能力。 使用 WooCommerce 产品视频插件更加简单，但自定义程度较低。 无论选择哪种方法，都要注意正确加载 JavaScript 和 CSS 文件，避免出现错误。 通过本文的学习，相信你已经掌握了为 WooCommerce 产品添加视频内容的技巧，可以为你的客户提供更好的购物体验。