如何在WooCommerce商品归档页标题下方显示自定义字段内容

架构老林

2026-5-15

嘿，你已经搞定了自定义字段的添加和保存，接下来只需要把字段内容输出到商品归档页的标题下方就行啦！

直接在你的主题（推荐用子主题，避免主题更新丢失代码）的functions.php文件里添加下面这段代码：

// 在商品归档页标题下方显示自定义字段内容
add_action('woocommerce_after_shop_loop_item_title', 'display_custom_product_field_in_archive', 15);
function display_custom_product_field_in_archive() {
    global $product;
    
    // 获取之前保存的自定义字段值
    $custom_text = get_post_meta($product->get_id(), '_custom_product_text_field', true);
    
    // 只有当字段有内容时才输出，避免空标签
    if (!empty($custom_text)) {
        echo '<div class="custom-product-text">' . esc_html($custom_text) . '</div>';
    }
}

代码说明：

钩子选择：woocommerce_after_shop_loop_item_title是WooCommerce官方提供的、专门用于商品归档页标题之后的钩子，完美匹配你的需求。
优先级设置：我把优先级设为15，这样内容会显示在默认的商品价格之后（价格输出的优先级是10）。如果你想把自定义字段放在价格之前，只需要把15改成5就行。
安全处理：用esc_html()转义输出内容，避免出现XSS安全风险，这是开发时的好习惯哦。
样式自定义：我给输出的内容加了custom-product-text这个CSS类，你可以在主题的样式文件里添加自定义样式，比如：
```
.custom-product-text {
    color: #666;
    font-size: 14px;
    margin: 5px 0;
}
```