在 WooCommerce 产品页面显示精选产品标签

霞舞

发布时间：2025-09-06 16:18:11

777人浏览过

来源于php中文网

原创

在 woocommerce 产品页面显示精选产品标签

本文将介绍如何在 WooCommerce 产品页面上，根据产品是否被设置为精选产品，动态显示一个“Featured”标签。我们将使用 wc_get_featured_product_ids() 函数来判断产品是否为精选产品，并在产品摘要之前显示相应的标签。本文提供了详细的代码示例和步骤，帮助你轻松实现这一功能。

实现步骤

以下步骤将指导你如何在 WooCommerce 产品页面上显示精选产品标签：

打开你的主题或子主题的 functions.php 文件。 建议使用子主题，以避免在主题更新时丢失自定义代码。
添加以下代码到 functions.php 文件中：

function action_woocommerce_before_single_product_summary() {
    global $product;

    // 检查是否为 WooCommerce 产品
    if ( is_a( $product, 'WC_Product' ) ) {
        // 获取产品 ID
        $product_id = $product->get_id();

        // 获取所有精选产品的 ID 数组
        $featured_product_ids = wc_get_featured_product_ids();

        // 检查当前产品 ID 是否在精选产品 ID 数组中
        if ( in_array( $product_id, $featured_product_ids ) ) {
            echo 'Featured';
        } else {
            //如果不需要非精选产品显示任何内容，可以注释掉或者删除该行
            //echo 'NOT featured';
        }
    }
}
add_action( 'woocommerce_before_single_product_summary', 'action_woocommerce_before_single_product_summary', 1 );

保存 functions.php 文件。

代码解释

action_woocommerce_before_single_product_summary() 函数： 这个函数会在 WooCommerce 单个产品摘要之前执行。
global $product;： 获取全局 $product 对象，该对象包含了当前产品的信息。
is_a( $product, 'WC_Product' )： 检查 $product 对象是否为 WooCommerce 产品对象。
$product->get_id()： 获取当前产品的 ID。
wc_get_featured_product_ids()： 获取所有精选产品的 ID 数组。
in_array( $product_id, $featured_product_ids )： 检查当前产品 ID 是否存在于精选产品 ID 数组中。
echo 'Featured';： 如果产品是精选产品，则输出带有 "Featured" 文本的 HTML 标签。你可以根据需要自定义标签的样式和内容。
add_action( 'woocommerce_before_single_product_summary', 'action_woocommerce_before_single_product_summary', 1 );： 将 action_woocommerce_before_single_product_summary() 函数添加到 woocommerce_before_single_product_summary 钩子上，并设置优先级为 1。

自定义样式

你可以通过 CSS 自定义 "Featured" 标签的样式。在你的主题的 style.css 文件或者自定义 CSS 文件中添加以下代码：

芒果商城系统GSHOP

芒果系统GSHOP 纯静态商城系统，你还在为商城的优化而苦恼？GSHOP是全站纯静态商城系统，一键seo优化功能解决seo问题，自定义URL链接解决商城同质化问题；多页面显示：动态页、伪静态页面、纯静态页面增加收录，提升网站权重，提升流量等。安全稳定、功能强大的商城系统。1、芒果商城系统基于 php5.0开发，企业级应用。2、产品功能Ajax设计，响应速度更快，购物体验更好。3、全新密钥存放机制，

下载

.property-contract-badge {
    background-color: #f00; /* 红色背景 */
    color: #fff; /* 白色文字 */
    padding: 5px 10px; /* 内边距 */
    border-radius: 5px; /* 圆角 */
    font-size: 14px; /* 字体大小 */
}

根据你的需求修改颜色、字体、边距等属性。