讲师中心 微信公众号

工具推荐

视频效率加速
Seko
Seko

AI短剧一键生成成片

Laper
Laper

剧本策划到成片协作

立刻MV
立刻MV

低成本歌曲 MV、视频生成

updream

一键生成高质量推广成片

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

夏伟同学_1375

夏伟同学_1375

发布时间:2025-09-06 15:02:03

|

259人浏览过

|

来源于php中文网

原创

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 );

代码解析

  1. global $product;: 在 WooCommerce 模板中,$product 是一个全局变量,代表当前正在显示的 WC_Product 对象。我们需要声明它以便在函数内部访问。
  2. is_a( $product, 'WC_Product' ): 这是一个安全检查,确保 $product 确实是一个 WC_Product 类的实例,防止在非产品页或 $product 未定义时出现错误。
  3. $product->get_id(): 获取当前产品的唯一 ID。
  4. wc_get_featured_product_ids(): 这是 WooCommerce 提供的一个核心函数,它查询数据库并返回所有被标记为“特色”的商品 ID 数组。这个函数是识别特色产品的关键。
  5. in_array( $product_id, $featured_product_ids ): PHP 的 in_array() 函数用于检查一个值(当前产品 ID)是否存在于一个数组(特色产品 ID 数组)中。如果存在,则表示当前产品是特色产品。
  6. echo 'Featured';: 如果产品是特色产品,则输出一个 标签,其中包含“Featured”文本。你可以根据需要修改 的类名和内容。
  7. add_action( 'woocommerce_before_single_product_summary', 'display_featured_product_badge', 1 );:
    • woocommerce_before_single_product_summary 是 WooCommerce 提供的一个动作钩子,它在单品页的商品图片和标题等主要摘要信息之前触发。
    • display_featured_product_badge 是我们自定义的函数名。
    • 1 是优先级,数值越小,函数执行越早。这里设置为 1 以确保标签尽早显示。

部署与注意事项

  1. 代码放置位置: 将上述代码添加到你的 WordPress 主题的 functions.php 文件中。强烈建议使用子主题 (Child Theme) 的 functions.php 文件,以避免在主题更新时丢失自定义代码。

  2. 样式美化: 上述代码仅输出了一个带有类名的 标签。为了让“特色”标签在视觉上更具吸引力,你需要为 .property-contract-badge 类添加相应的 CSS 样式。例如:

    CSS
    CSS

    CSS 官方网站入口。访问 W3C 的 CSS 页面,查看 CSS 标准、学习资料与工作组动态;CSS 是 Web 标准,无需下载安装。

    下载
    .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” 添加。

  3. 兼容性: 提供的代码在 WordPress 5.8.1 和 WooCommerce 5.8.0 等版本中经过测试并正常工作。对于未来的 WooCommerce 版本,此方法通常仍然有效,因为 wc_get_featured_product_ids() 是一个核心且稳定的 API。

  4. 性能: wc_get_featured_product_ids() 函数在后台会查询数据库,但在多数情况下,WooCommerce 会缓存此结果,因此对性能的影响通常可以忽略不计。

总结

通过本教程,我们学习了如何利用 WooCommerce 的原生 wc_get_featured_product_ids() 函数,在单品页上高效且优雅地显示特色产品标签。这种方法避免了引入额外的自定义字段,简化了开发流程,并确保了与 WooCommerce 核心功能的良好集成。采用这种原生解决方案,不仅能提升代码质量,也为网站的长期维护和扩展奠定了坚实基础。

热门AI工具

更多
码上飞
码上飞 Hot

一款基于自然语言的AI应用开发平台,可根据用户描述自动生成应用程序,帮助个人和团队快速完成应用原型与开发。

花生AI
花生AI Hot

一款AI视频创作工具,主要用于B站推出的AI视频创作工具,适合需要提升相关任务效率的用户。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

讯飞绘文

讯飞绘文是一款由科大讯飞推出的一站式 AIGC 内容运营平台。

小橡皮AI

一款AI工具,主要用于小橡皮一键去AI味,将机器味重的内容改得更有活人感,防止因为 AI 内容被平台打上 AI 标签,以及限流,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

墨刀AI
墨刀AI Hot

一款AI图像与设计工具,主要用于产品经理的专属智能体,适合需要提升相关任务效率的用户。

Lovart
Lovart Hot

一款面向视觉设计创作的AI设计平台,可通过智能体和画布工作流辅助制作海报、Logo、网页、PPT及其他视觉内容。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

相关专题

更多
全局变量怎么定义
全局变量怎么定义

本专题整合了全局变量相关内容,阅读专题下面的文章了解更多详细内容。

5325

2025.09.18

python 全局变量
python 全局变量

本专题整合了python中全局变量定义相关教程,阅读专题下面的文章了解更多详细内容。

2270

2025.09.18

c++ 全局变量
c++ 全局变量

本专题整合了c++全局变量的使用、定义、作用域等等内容,阅读专题下面的文章了解更多详细内容。

219

2026.03.17

class在c语言中的意思
class在c语言中的意思

在C语言中,"class" 是一个关键字,用于定义一个类。想了解更多class的相关内容,可以阅读本专题下面的文章。

4636

2024.01.03

python中class的含义
python中class的含义

本专题整合了python中class的相关内容,阅读专题下面的文章了解更多详细内容。

326

2025.12.06

数据库三范式
数据库三范式

数据库三范式是一种设计规范,用于规范化关系型数据库中的数据结构,它通过消除冗余数据、提高数据库性能和数据一致性,提供了一种有效的数据库设计方法。本专题提供数据库三范式相关的文章、下载和课程。

3205

2023.06.29

如何删除数据库
如何删除数据库

删除数据库是指在MySQL中完全移除一个数据库及其所包含的所有数据和结构,作用包括:1、释放存储空间;2、确保数据的安全性;3、提高数据库的整体性能,加速查询和操作的执行速度。尽管删除数据库具有一些好处,但在执行任何删除操作之前,务必谨慎操作,并备份重要的数据。删除数据库将永久性地删除所有相关数据和结构,无法回滚。

4221

2023.08.14

vb怎么连接数据库
vb怎么连接数据库

在VB中,连接数据库通常使用ADO(ActiveX 数据对象)或 DAO(Data Access Objects)这两个技术来实现:1、引入ADO库;2、创建ADO连接对象;3、配置连接字符串;4、打开连接;5、执行SQL语句;6、处理查询结果;7、关闭连接即可。

3591

2023.08.31

Go-Zero API开发使用教程
Go-Zero API开发使用教程

本专题聚焦Go-Zero的API开发,拆解.api描述文件的语法结构、路由与分组定义、参数绑定与校验规则,说明统一响应体、JWT鉴权、跨域与接口文档生成的落地方式,并给出网关聚合与接口测试的实践建议。

40

2026.11.12

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn