本文旨在指导开发者如何在 WooCommerce 产品页面上集成视频内容，提供两种实现方法：使用 ACF 自定义字段和 WooCommerce 产品视频插件，并针对常见问题提供解决方案，确保视频能正确显示且避免 JavaScript 错误。通过本文，你将学会如何灵活地将视频融入你的 WooCommerce 产品展示中。
方法一：使用 ACF 自定义字段添加视频
Advanced Custom Fields (ACF) 插件是一个强大的 WordPress 插件，允许你向 WordPress 页面、文章和自定义文章类型添加自定义字段。我们可以利用它来为 WooCommerce 产品添加视频链接。
步骤 1：创建 ACF 字段
- 安装并激活 ACF 插件。
- 在 WordPress 后台，导航到 "Custom Fields" -> "Add New"。
- 创建一个新的字段组，例如 "Product Videos"。
- 添加一个字段，字段类型选择 "oEmbed"，字段名设置为 "product_video"。
- 设置字段组的 "Location" 规则，使其显示在 "Product" 上。
步骤 2：在产品页面添加视频链接
- 编辑一个 WooCommerce 产品。
- 在产品编辑页面，找到 "Product Videos" 字段组。
- 在 "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：安装并激活插件
- 购买并下载 "Product Video for WooCommerce" 插件。
- 在 WordPress 后台，导航到 "Plugins" -> "Add New"。
- 上传并激活插件。
步骤 2：在产品页面添加视频
- 编辑一个 WooCommerce 产品。
- 在产品编辑页面，找到 "Product Video" 选项卡。
- 上传视频文件或添加 YouTube/Vimeo 视频链接。
步骤 3：解决 Uncaught TypeError: jQuery(...).slick is not a function 错误
这个错误通常是由于 slick.js 插件没有正确加载或 jQuery 没有正确加载导致的。
解决方案：
-
确保 jQuery 已加载： WooCommerce 依赖于 jQuery。 确保你的主题或插件没有阻止 jQuery 的加载。 WordPress 默认加载 jQuery，但有些主题或插件可能会禁用它。 你可以尝试在 functions.php 文件中强制加载 jQuery：
function enqueue_jquery() { wp_enqueue_script( 'jquery' ); } add_action( 'wp_enqueue_scripts', 'enqueue_jquery' ); -
正确加载 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 文件，这有助于提高页面加载速度。
检查文件路径： 确保 slick.js 和 slick.css 文件的路径是正确的。 使用 get_template_directory_uri() 函数获取主题目录的 URL，然后拼接文件的相对路径。
避免冲突： 如果你的主题或插件已经加载了其他版本的 slick.js，可能会导致冲突。 尝试禁用其他插件，看看是否能解决问题。
注意事项：
- 确保 "Product Video for WooCommerce" 插件已正确安装并激活。
- 检查视频文件是否已正确上传或视频链接是否有效。
- 仔细检查 slick.js 和 slick.css 文件的加载方式，确保没有冲突。
- 使用浏览器的开发者工具来检查 JavaScript 错误，并查看网络请求，确认文件是否已正确加载。
总结
本文介绍了两种为 WooCommerce 产品添加视频内容的方法：使用 ACF 自定义字段和 WooCommerce 产品视频插件。 选择哪种方法取决于你的具体需求和技术水平。 使用 ACF 更加灵活，可以自定义视频的显示方式，但需要一定的代码编写能力。 使用 WooCommerce 产品视频插件更加简单，但自定义程度较低。 无论选择哪种方法，都要注意正确加载 JavaScript 和 CSS 文件，避免出现错误。 通过本文的学习，相信你已经掌握了为 WooCommerce 产品添加视频内容的技巧，可以为你的客户提供更好的购物体验。
