如何在WooCommerce店铺及归档页面为产品添加分类名称

下面提供两种实用方法，帮你在产品卡片里加上产品分类：

方法一：使用钩子函数（推荐，不修改主题核心文件） #

直接把以下代码添加到主题的functions.php文件，或者自定义功能插件里：

// 在产品标题上方显示产品分类
add_action( 'woocommerce_before_shop_loop_item_title', 'display_product_category_on_archive', 9 );
function display_product_category_on_archive() {
    global $product;
    // 获取产品的第一个分类（可按需调整为获取所有分类）
    $categories = get_the_terms( $product->get_id(), 'product_cat' );
    if ( $categories && ! is_wp_error( $categories ) ) {
        $category = reset( $categories );
        echo '<div class="product-category-tag"><a href="' . get_term_link( $category ) . '">' . $category->name . '</a></div>';
    }
}

如果想把分类放在标题下方、价格上方，只需要把钩子改成woocommerce_after_shop_loop_item_title，并调整优先级：

add_action( 'woocommerce_after_shop_loop_item_title', 'display_product_category_on_archive', 4 );

方法二：修改主题WooCommerce模板文件 #

如果你的主题自定义了WooCommerce模板，找到主题目录下的woocommerce/content-product.php文件，在合适的位置插入以下代码（比如放在产品标题<h2>标签的上方或下方）：

<?php
global $product;
$categories = get_the_terms( $product->get_id(), 'product_cat' );
if ( $categories && ! is_wp_error( $categories ) ) {
    $category = reset( $categories );
    ?>
    <div class="product-category-tag">
        <a href="<?php echo get_term_link( $category ); ?>"><?php echo $category->name; ?></a>
    </div>
    <?php
}
?>

样式美化（可选） #

可以添加自定义CSS来调整分类标签的样式，比如：

.product-category-tag {
    font-size: 12px;
    color: #666;
    margin-bottom: 8px;
}
.product-category-tag a {
    text-decoration: none;
    background: #f5f5f5;
    padding: 2px 6px;
    border-radius: 3px;
}
.product-category-tag a:hover {
    background: #e0e0e0;
}

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