如何在Shop页面商品列表的商品名称下方展示单个商品所属分类

场景1：WooCommerce搭建的Shop页面 #

直接在当前使用主题的functions.php文件中添加如下代码：

// 商品列表标题下方输出所属分类
add_action( 'woocommerce_after_shop_loop_item_title', 'show_product_category_under_title', 2 );
function show_product_category_under_title() {
    global $product;
    $category_list = wc_get_product_category_list( $product->get_id(), '、', '<span class="product-cate">', '</span>' );
    if ( $category_list ) {
        echo $category_list;
    }
}

如果需要调整分类显示样式，在主题自定义CSS面板添加以下代码即可：

.product-cate {
    font-size: 0.9rem;
    color: #757575;
    margin: 5px 0;
}

场景2：自定义开发的Shop页面 #

按前后端分离的常规实现逻辑操作即可：

• 后端调整商品列表接口，查询商品数据时同步关联查询出对应的商品分类字段，和商品名称、价格等信息一同返回
• 前端调整商品列表渲染逻辑，在商品名称对应的DOM节点下方新增分类渲染代码，示例参考（React语法）：

<div className="product-card">
  <h4 className="product-name">{product.name}</h4>
  {/* 新增分类展示 */}
  <span className="product-category">{product.category}</span>
  <p className="product-price">¥{product.price}</p>
</div>

分类样式调整可参考上面的CSS代码。

内容的提问来源于stack exchange，提问作者user3169651