引言：优化 WooCommerce 特色产品标识
在 woocommerce 商店中，为特定商品添加“特色”标识是提升其可见性和吸引力的常见做法。许多开发者可能会选择使用自定义字段（如 advanced custom fields, acf）来标记特色产品，并在前端根据字段值显示相应的标签。然而，woocommerce 本身已经内置了强大的特色产品管理功能。利用这些原生功能，不仅可以简化代码，还能提高网站性能和可维护性。本教程将介绍如何摒弃自定义字段，转而使用 woocommerce 原生 api 来动态显示特色产品标签。
理解 WooCommerce 的特色产品机制
WooCommerce 将特色产品视为一种特殊的商品状态，通过内部机制进行管理。虽然在某些旧版本或特定场景下，可能会涉及到 product_visibility 自定义分类法，但最直接且推荐的识别特色产品的方法是使用 wc_get_featured_product_ids() 函数。这个函数返回一个包含所有特色产品 ID 的数组，使得开发者能够轻松判断任意产品是否被标记为特色。
实现特色产品标签的显示
我们的目标是在 WooCommerce 单品页的商品摘要之前，显示一个“特色”标签。以下是具体的实现步骤和代码示例。
核心代码示例
我们将通过 WordPress 的 add_action 钩子，在 woocommerce_before_single_product_summary 位置插入自定义函数，以检查当前产品是否为特色产品并显示标签。
/**
* 在 WooCommerce 单品页显示特色产品标签
*
* 该函数会在商品摘要前检查当前产品是否为特色产品，
* 如果是，则显示一个带有“Featured”文本的标签。
*/
function display_featured_product_badge() {
// 声明全局 $product 对象，以便访问当前产品数据
global $product;
// 检查 $product 是否是一个有效的 WC_Product 对象
if ( is_a( $product, 'WC_Product' ) ) {
// 获取当前产品的 ID
$product_id = $product->get_id();
// 获取所有特色产品的 ID 数组
// wc_get_featured_product_ids() 返回一个包含特色产品 ID 的数组
$featured_product_ids = wc_get_featured_product_ids();
// 检查当前产品 ID 是否存在于特色产品 ID 数组中
if ( in_array( $product_id, $featured_product_ids ) ) {
// 如果是特色产品，则输出标签 HTML
echo 'Featured';
}
// 调试用途：如果不是特色产品，可以输出提示。
// else {
// echo 'NOT featured';
// }
}
}
// 将函数挂载到 woocommerce_before_single_product_summary 动作钩子
// 优先级设置为 1，确保在其他内容之前显示
add_action( 'woocommerce_before_single_product_summary', 'display_featured_product_badge', 1 );代码解析
- global $product;: 在 WooCommerce 模板中，$product 是一个全局变量，代表当前正在显示的 WC_Product 对象。我们需要声明它以便在函数内部访问。
- is_a( $product, 'WC_Product' ): 这是一个安全检查，确保 $product 确实是一个 WC_Product 类的实例，防止在非产品页或 $product 未定义时出现错误。
- $product->get_id(): 获取当前产品的唯一 ID。
- wc_get_featured_product_ids(): 这是 WooCommerce 提供的一个核心函数，它查询数据库并返回所有被标记为“特色”的商品 ID 数组。这个函数是识别特色产品的关键。
- in_array( $product_id, $featured_product_ids ): PHP 的 in_array() 函数用于检查一个值（当前产品 ID）是否存在于一个数组（特色产品 ID 数组）中。如果存在，则表示当前产品是特色产品。
- echo 'Featured';: 如果产品是特色产品，则输出一个 标签，其中包含“Featured”文本。你可以根据需要修改 的类名和内容。
-
add_action( 'woocommerce_before_single_product_summary', 'display_featured_product_badge', 1 );:
- woocommerce_before_single_product_summary 是 WooCommerce 提供的一个动作钩子，它在单品页的商品图片和标题等主要摘要信息之前触发。
- display_featured_product_badge 是我们自定义的函数名。
- 1 是优先级，数值越小，函数执行越早。这里设置为 1 以确保标签尽早显示。
部署与注意事项
代码放置位置: 将上述代码添加到你的 WordPress 主题的 functions.php 文件中。强烈建议使用子主题 (Child Theme) 的 functions.php 文件，以避免在主题更新时丢失自定义代码。
-
样式美化: 上述代码仅输出了一个带有类名的 标签。为了让“特色”标签在视觉上更具吸引力，你需要为 .property-contract-badge 类添加相应的 CSS 样式。例如：
免费红色响应式多语言企业通用模板1.0.0下载该模板源码有公司简介、公司新闻、产品展示、客户案例、留言等企业官网常用页面功能。模板是响应式模板，支持多语言，完善的标签调用修改起来很方便。功能特点：1. 使用的框架采用HkCms开源内容管理系统v2.2.3版本、免费可以商用。2. 所需环境Apache/Nginx，PHP7.2 及以上 + MySQL 5.6 及以上。3. 安装教程： (1) 站点运行路径填写到public目录下。 (2) 浏览
.property-contract-badge { background-color: #ff0000; /* 红色背景 */ color: #ffffff; /* 白色文字 */ padding: 5px 10px; border-radius: 3px; font-size: 0.8em; font-weight: bold; text-transform: uppercase; display: inline-block; /* 使其与周围元素对齐 */ margin-bottom: 10px; /* 与下方元素保持距离 */ }将这些 CSS 代码添加到你的主题的 style.css 文件中，或通过 WordPress 后台的“外观” -> “自定义” -> “额外 CSS” 添加。
兼容性: 提供的代码在 WordPress 5.8.1 和 WooCommerce 5.8.0 等版本中经过测试并正常工作。对于未来的 WooCommerce 版本，此方法通常仍然有效，因为 wc_get_featured_product_ids() 是一个核心且稳定的 API。
性能: wc_get_featured_product_ids() 函数在后台会查询数据库，但在多数情况下，WooCommerce 会缓存此结果，因此对性能的影响通常可以忽略不计。
总结
通过本教程，我们学习了如何利用 WooCommerce 的原生 wc_get_featured_product_ids() 函数，在单品页上高效且优雅地显示特色产品标签。这种方法避免了引入额外的自定义字段，简化了开发流程，并确保了与 WooCommerce 核心功能的良好集成。采用这种原生解决方案，不仅能提升代码质量，也为网站的长期维护和扩展奠定了坚实基础。
