如何在首页调用WooCommerce商品分类图片及标题生成分类卡片

架构老林

2026-9-26

实现方案

1. 原有代码问题修正

你现有的查询参数存在错误，查询WooCommerce商品分类需要调整参数，同时改用更规范的get_terms方法获取分类数据。

2. 分类图片获取逻辑

WooCommerce后台设置的商品分类图片ID会存储在分类的thumbnail_id元字段中，通过get_term_meta读取该字段后，即可调用WordPress附件方法输出图片地址。

3. 完整可运行代码

<?php
// 修正后的分类查询参数
$args = array(
    'taxonomy' => 'product_cat',
    'number' => 8, // 控制返回8个分类
    'orderby' => 'term_id', // 按创建时间倒序即最新分类在前
    'order' => 'DESC',
    'hide_empty' => false, // 可根据需求调整是否隐藏空商品分类
);
$categories = get_terms( $args );
foreach( $categories as $category ) {
    // 获取分类图片ID
    $thumbnail_id = get_term_meta( $category->term_id, 'thumbnail_id', true );
    // 生成图片地址，无图时可替换为自己站点的占位图地址
    $image_url = $thumbnail_id ? wp_get_attachment_url( $thumbnail_id ) : '你的默认占位图地址';
    // 直接获取分类跳转链接，无需手动拼接，兼容性更强
    $cat_link = get_term_link( $category, 'product_cat' );
?>
<a href="<?php echo esc_url($cat_link); ?>">
    <div class="category-tile-image">
        <img src="<?php echo esc_url($image_url); ?>" alt="<?php echo esc_attr($category->name); ?>">
    </div>
    <h2><?php echo esc_html($category->name); ?></h2>
</a>
<?php } ?>