如何修改WooCommerce产品循环中分类文本的样式？

1. 修改PHP代码，给分类添加容器并调整分隔符 #

原代码输出的分类默认用换行符分隔，且无统一容器，样式难以精准控制。替换为以下代码：

add_action( 'woocommerce_shop_loop_item_title', function (){
    global $product;
    // 用自定义容器包裹分类列表，方便样式控制
    echo '<div class="product-loop-categories">';
    // 将分类分隔符从默认换行改为逗号+空格，让多分类显示在一行
    echo wc_get_product_category_list($product->get_id(), ', ');
    echo '</div>';
}, 1 );

2. 添加CSS样式，设置字体大小与间距 #

将以下CSS代码添加到主题自定义CSS面板、子主题style.css文件，或Elementor自定义CSS区域：

/* 产品循环分类容器样式 */
.product-loop-categories {
    font-size: 13px; /* 设置目标字体大小 */
    margin-bottom: 10px; /* 增加与产品标题的间距，可按需调整数值 */
    color: #777; /* 可选：自定义分类文字颜色 */
}

/* 单个分类链接样式 */
.product-loop-categories a {
    display: inline-block;
    margin-right: 8px; /* 多个分类之间的间距 */
    text-decoration: none; /* 可选：去掉链接下划线 */
}

/* 最后一个分类去掉右侧多余间距 */
.product-loop-categories a:last-child {
    margin-right: 0;
}

关键说明 #

• 原代码中wc_get_product_category_list默认用<br>分隔分类，导致多分类换行，改为, 后可实现同排显示。
• 自定义容器类product-loop-categories能精准锁定分类区域，避免与页面其他元素样式冲突，确保样式生效。

内容的提问来源于stack exchange，提问作者Sofia Hjärtberg Zintio