WooCommerce 单品页特色产品标签显示教程-php教程-PHP中文网

WooCommerce 单品页特色产品标签显示教程

霞舞

发布： 2025-09-06 15:02:03

原创

225人浏览过

WooCommerce 单品页特色产品标签显示教程

本教程详细指导如何在 WooCommerce 单品页上，利用其内置的特色产品功能，动态显示一个“特色”标签。通过使用 wc_get_featured_product_ids() 函数，我们能够高效地识别并标记特色产品，从而避免使用自定义字段，优化代码结构，提升网站性能。文章将提供完整的代码示例和部署指南，帮助开发者实现这一常见需求。

引言：优化 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 '<span class="property-contract-badge">Featured</span>';
        } 
        // 调试用途：如果不是特色产品，可以输出提示。
        // 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-youjiankuohaophpcnget_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 样式。例如：

芦笋演示
一键出成片的录屏演示软件，专为制作产品演示、教学课程和使用教程而设计。

34

查看详情
```
.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 核心功能的良好集成。采用这种原生解决方案，不仅能提升代码质量，也为网站的长期维护和扩展奠定了坚实基础。

以上就是WooCommerce 单品页特色产品标签显示教程的详细内容，更多请关注php中文网其它相关文章！