本文介绍如何在 WooCommerce 商店页和分类页中，通过 post_class 过滤器为精选商品动态添加专属 CSS 类（如 featured-post），实现精准样式控制。
本文介绍如何在 woocommerce 商店页和分类页中，通过 `post_class` 过滤器为精选商品动态添加专属 css 类（如 `featured-post`），实现精准样式控制。
在 WooCommerce 中，“精选商品”（Featured Products）本质上是通过为商品设置 featured 产品标签（product tag）或自定义字段（如 _featured 元数据）来标识的。但需注意：WooCommerce 官方并未将“精选”作为内置分类法（taxonomy）提供，而是依赖 _featured 自定义字段（布尔值）进行逻辑判断。因此，原答案中使用 has_term('featured', 'product_cat') 实际上存在概念混淆——product_cat 是产品分类（category），而“精选”通常不以分类形式存在；更准确、可靠的方式是检查 _featured 元字段。
✅ 正确做法是使用 get_post_meta() 判断当前商品是否被标记为精选：
add_filter( 'post_class', 'add_class_to_woocommerce_featured_products' );
function add_class_to_woocommerce_featured_products( $classes ) {
// 仅在产品归档页（shop/category/tag 等）中生效，避免影响其他页面
if ( ! is_shop() && ! is_product_category() && ! is_product_tag() && ! is_tax( 'product_attribute' ) ) {
return $classes;
}
// 确保当前循环项是 product 类型
if ( 'product' === get_post_type() ) {
// 检查是否为精选商品（WooCommerce 原生支持的 _featured 字段）
if ( 'yes' === get_post_meta( get_the_ID(), '_featured', true ) ) {
$classes[] = 'woocommerce-featured';
}
}
return $classes;
}? 关键说明：
- is_shop()、is_product_category() 等条件确保该逻辑只在商品列表页执行，提升性能并避免干扰单个商品页或其他内容；
- get_post_meta( get_the_ID(), '_featured', true ) 是 WooCommerce 内置机制，后台【产品 → 编辑】右侧“产品数据”面板中的“启用精选”开关即为此字段赋值 yes/no；
- 添加的类名 woocommerce-featured 语义清晰、无冲突风险，便于后续用 CSS 独立定制样式，例如：
.woocommerce-featured .woocommerce-loop-product__title {
position: relative;
}
.woocommerce-featured::before {
content: "★";
position: absolute;
top: -8px;
right: -8px;
background: #ff6b6b;
color: white;
width: 24px;
height: 24px;
border-radius: 50%;
font-size: 12px;
display: flex;
align-items: center;
justify-content: center;
}⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 不要使用 has_term('featured', 'product_tag') 或 product_cat 代替 _featured 字段，除非你已手动创建并维护名为 featured 的产品标签/分类——这属于非标准用法，易与主题或插件逻辑冲突；
- 若需在首页或自定义查询中也应用该类，请扩展条件判断（如加入 is_front_page() 或检查 $wp_query->is_main_query()）；
- 修改后务必清空对象缓存（如有启用 WP Super Cache / Redis 等），并刷新浏览器缓存以验证效果。
通过此方法，你即可在不修改模板文件的前提下，安全、可维护地为精选商品注入结构化语义类，为响应式设计与交互增强打下坚实基础。
