其他

WooCommerce商品列表页价格后添加自定义信息的实用方法

悠悠楠杉

2025-12-10

0 评论

43 阅读

正在检测是否收录...

12/10

正文：

在WooCommerce运营中，商品列表页是用户决策的关键页面之一。默认情况下，系统仅显示价格和“加入购物车”按钮，但实际场景中我们可能需要追加库存状态、促销倒计时或会员专属标签等信息。下面通过原生Hook和代码实现这一功能，无需依赖插件。

核心原理

WooCommerce通过woocommerce_after_shop_loop_item_title钩子控制价格下方的输出内容，我们可以利用add_action挂载自定义函数。以下是基础代码框架：

  
add_action('woocommerce_after_shop_loop_item_title', 'add_custom_after_price', 15);  
function add_custom_after_price() {  
    global $product;  
    // 获取当前产品ID  
    $product_id = $product->get_id();  
    // 在此处编写自定义逻辑  
    echo '<div class="custom-price-meta">VIP会员享9折</div>';  
}

进阶应用场景

动态显示库存状态
结合WooCommerce的库存管理API，低库存时显示警示：

  
if ($product->get_stock_quantity() < 5) {  
    echo '<span class="low-stock">仅剩' . $product->get_stock_quantity() . '件</span>';  
}

限时促销标签
通过自定义字段实现促销时间判断（需先在产品编辑页添加promotion_end_date字段）：

  
$end_date = get_post_meta($product_id, 'promotion_end_date', true);  
if ($end_date && strtotime($end_date) > time()) {  
    echo '<div class="sale-tag">限时特惠截止：' . date('m/d', strtotime($end_date)) . '</div>';  
}

会员分级显示
配合会员插件（如Members）实现不同用户组可见内容：

  
if (wc_memberships_is_user_active_member(get_current_user_id(), 'vip')) {  
    echo '<div class="member-tag">VIP专属价</div>';  
}

样式优化建议

在主题的style.css中添加CSS保证显示效果：

  
.custom-price-meta {  
    font-size: 12px;  
    color: #ff5500;  
    margin-top: 5px;  
}  
.low-stock {  
    display: block;  
    background: #fff8e6;  
    padding: 3px 8px;  
    border-radius: 3px;  
}