如何在WordPress首页添加多个商品合集 替代[products]显示可用分类

你之前用的[products]是WooCommerce自带的商品展示短代码，要展示商品分类可以用下面几种方案：

方案1：用官方自带短代码（无需额外代码，最便捷） #

WooCommerce默认内置了[product_categories]短代码，用法和[products]完全一致，直接放到首页编辑器、自定义HTML小工具中即可生效，常用参数如下：

• 显示所有顶级分类：[product_categories number="0" parent="0"]，number设为0表示不限制数量，parent设为0表示只显示一级分类
• 显示指定ID的分类：[product_categories ids="12,25,37"]，替换为你要展示的分类ID即可
• 控制布局：[product_categories columns="3" number="6"]，表示每行显示3个，总共展示6个分类
• 显示无商品的分类：[product_categories hide_empty="0"]，默认会隐藏没有商品的分类，加这个参数即可全部显示

方案2：自定义短代码（需要个性化展示效果时使用） #

如果自带短代码的样式和功能满足不了需求，可以自行注册自定义短代码，将以下代码添加到当前主题的functions.php文件即可：

// 注册自定义商品分类短代码
add_shortcode( 'custom_product_cats', 'custom_render_product_cats' );
function custom_render_product_cats( $atts ) {
    // 短代码参数默认配置
    $default_atts = array(
        'number'     => 10, // 显示分类数量
        'columns'    => 3, // 每行显示数量
        'hide_empty' => true, // 是否隐藏无商品的分类
        'parent'     => 0, // 父分类ID，0为只显示顶级分类
    );
    $args = shortcode_atts( $default_atts, $atts );
    
    // 查询商品分类
    $product_cats = get_terms( array(
        'taxonomy'   => 'product_cat',
        'number'     => $args['number'],
        'hide_empty' => $args['hide_empty'],
        'parent'     => $args['parent'],
    ) );

    if ( empty( $product_cats ) || is_wp_error( $product_cats ) ) return '';

    // 输出分类HTML
    $html = '<ul class="custom-product-cat-list columns-' . esc_attr( $args['columns'] ) . '">';
    foreach ( $product_cats as $cat ) {
        $cat_link = get_term_link( $cat );
        // 获取分类封面图
        $thumb_id = get_term_meta( $cat->term_id, 'thumbnail_id', true );
        $thumb_html = $thumb_id ? wp_get_attachment_image( $thumb_id, 'woocommerce_thumbnail' ) : '';

        $html .= '<li class="product-cat-item">';
        $html .= '<a href="' . esc_url( $cat_link ) . '">';
        $html .= $thumb_html;
        $html .= '<h4 class="cat-name">' . esc_html( $cat->name ) . '</h4>';
        $html .= '<span class="cat-count">' . sprintf( '%s件商品', $cat->count ) . '</span>';
        $html .= '</a>';
        $html .= '</li>';
    }
    $html .= '</ul>';

    // 基础样式，可自行删除后写到主题CSS文件中
    $html .= '<style>
    .custom-product-cat-list { list-style: none; margin: 20px 0; padding: 0; display: grid; gap: 20px; }
    .custom-product-cat-list.columns-3 { grid-template-columns: repeat(3, 1fr); }
    .custom-product-cat-list.columns-4 { grid-template-columns: repeat(4, 1fr); }
    .product-cat-item img { width: 100%; height: auto; border-radius: 8px; margin-bottom: 10px; }
    .product-cat-item .cat-name { margin: 0 0 5px; font-size: 18px; }
    .product-cat-item .cat-count { color: #666; font-size: 14px; }
    </style>';

    return $html;
}

添加完成后，使用短代码[custom_product_cats columns="4" number="8" hide_empty="false"]即可调用，参数可根据需求调整。

方案3：直接写入主题模板（固定位置展示时使用） #

如果需要将分类模块固定放到首页的指定位置，不需要后台随时修改，可以将方案2中的分类查询、HTML输出逻辑直接复制到首页对应的模板文件（通常是front-page.php或home.php）的对应位置即可。

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