本文旨在提供在 WooCommerce 产品页面添加视频内容的实用指南，涵盖使用 ACF 自定义字段和 WooCommerce Product Video 插件两种方法。针对常见问题，我们将提供详细的排错步骤和优化建议，确保视频内容能够正确显示，提升用户体验。
使用 ACF 自定义字段添加视频
Advanced Custom Fields (ACF) 是一款强大的 WordPress 插件，允许您向 WordPress 网站添加自定义字段。我们可以使用 ACF 添加一个视频字段，然后在 WooCommerce 产品页面显示该视频。
步骤 1：创建 ACF 字段
- 安装并激活 ACF 插件。
- 在 WordPress 后台，转到 "Custom Fields" -> "Add New"。
- 创建一个新的字段组，例如 "Product Video"。
- 添加一个字段，字段类型选择 "oEmbed"，字段名称设置为 "product_video"。
- 在 "Location" 部分，选择 "Post Type" 等于 "Product"，将此字段组关联到 WooCommerce 产品。
步骤 2：修改主题 functions.php 文件
将以下代码添加到您的主题的 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 '<div class="product-video-wrapper">';
echo wp_oembed_get( $video_url, array( 'width' => 200 ) ); // 使用 wp_oembed_get 来嵌入视频
echo '</div>';
}
}代码解释：
- woocommerce_before_shop_loop_item_title：这是一个 WooCommerce action hook，允许我们在产品循环的标题之前添加内容。
- get_field('product_video', $product->get_id())：使用 ACF 的 get_field() 函数获取 "product_video" 字段的值。
- wp_oembed_get( $video_url, array( 'width' => 200 ) )：使用 WordPress 的 wp_oembed_get() 函数将视频 URL 转换为嵌入代码，并设置视频宽度为 200 像素。
- remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 )：移除默认的产品缩略图，以便显示视频。
注意事项：
- 确保已在每个产品页面上填写 "product_video" 字段。
- 如果视频未显示，请使用 print_r( $video_url ) 检查 $video_url 变量是否包含正确的值。如果为空，检查 ACF 字段设置和产品页面上的字段值。
- 建议使用 wp_oembed_get() 函数嵌入视频，它可以自动处理来自 YouTube、Vimeo 等平台的视频。
使用 WooCommerce Product Video 插件
WooCommerce Product Video 插件是一个专门用于在 WooCommerce 产品页面添加视频的插件。
步骤 1：安装并激活插件
安装并激活 WooCommerce Product Video 插件。
步骤 2：配置插件
在产品编辑页面，您会看到一个新的 "Product Video" 选项卡。您可以在此选项卡中添加视频 URL 或上传视频文件。
问题排查：Uncaught TypeError: jQuery(...).slick is not a function
这个错误通常表示 slick.js 没有正确加载或者 jQuery 没有加载完成。
解决方法：
- 确保 jQuery 已加载： WooCommerce 和 WordPress 通常已经加载了 jQuery。但是，如果您的主题或插件禁用了 jQuery，您需要手动加载它。
- 依赖关系： 确保 slick.js 依赖于 jQuery。修改 functions.php 文件，使用 wp_enqueue_script() 函数注册 slick.js，并将其依赖项设置为 jquery：
function enqueue_slick() {
if(is_shop() || is_product() || is_product_category() ) {
wp_enqueue_style( 'slick-css', get_stylesheet_directory_uri() . '/assets/js/slick/slick.css' );
wp_enqueue_style( 'slick-theme-css', get_stylesheet_directory_uri() . '/assets/js/slick/slick-theme.css' );
wp_enqueue_script( 'slick-min-js', get_stylesheet_directory_uri() . '/assets/js/slick/slick.min.js', array('jquery'), null, true ); // 确保依赖于 jQuery 并且在 footer 加载
}
}
add_action( 'wp_enqueue_scripts', 'enqueue_slick' );代码解释：
- wp_enqueue_script( 'slick-min-js', get_stylesheet_directory_uri() . '/assets/js/slick/slick.min.js', array('jquery'), null, true )：
- 第一个参数是脚本的名称。
- 第二个参数是脚本的 URL。
- 第三个参数是依赖项数组，这里设置为 array('jquery')，表示 slick.js 依赖于 jQuery。
- 第四个参数是版本号，可以设置为 null。
- 第五个参数设置为 true，表示在 wp_footer() 钩子处加载脚本，确保 jQuery 已经加载完成。
- 使用 wp_enqueue_style 正确加载CSS样式文件。
注意事项：
- 确保 slick.css 和 slick-theme.css 文件内容正确，没有语法错误。
- 检查浏览器控制台，查看是否有其他 JavaScript 错误，这些错误可能会阻止 slick.js 正常运行。
总结
本文提供了两种在 WooCommerce 产品页面添加视频内容的方法：使用 ACF 自定义字段和 WooCommerce Product Video 插件。无论您选择哪种方法，都需要仔细检查代码和配置，确保视频能够正确显示。如果遇到问题，请仔细阅读本文提供的排错步骤，并检查浏览器控制台中的错误信息。通过以上步骤，您应该能够成功地在 WooCommerce 产品页面添加视频内容，提升用户体验。
