WordPress Flatsome主题下为WooCommerce分类元素添加子分类的实现方案咨询

阿华AIGC实验室

2026-4-29

嘿，针对你在Flatsome主题下配置WooCommerce分类元素的问题，我给你梳理几个可行的方案，完全不需要直接脱离主题重建页面～

方案1：自定义Flatsome的WooCommerce分类元素（最贴合主题生态）

Flatsome的UX Builder元素是可以通过子主题扩展定制的，之前你试的Stack脚本可能没适配Flatsome的元素结构，给你一个适配的实操思路：

首先找到Flatsome主题中WooCommerce分类元素的核心文件，路径一般是 flatsome/inc/builder/elements/element-woocommerce-categories.php
把这个文件复制到你的子主题目录下（比如 your-child-theme/inc/builder/elements/），重命名为 custom-element-woocommerce-categories.php（避免和原主题文件冲突）

打开这个自定义文件，找到渲染分类的循环逻辑，在输出每个父分类的HTML代码后，添加子分类的渲染代码：

// 获取当前父分类的子分类
$sub_categories = get_terms( array(
    'taxonomy' => 'product_cat',
    'parent' => $category->term_id,
    'hide_empty' => false, // 可根据需求设置是否显示无商品的空分类
) );

if ( ! empty( $sub_categories ) ) {
    echo '<div class="sub-category-wrapper">';
    foreach ( $sub_categories as $sub_cat ) {
        $sub_cat_link = get_term_link( $sub_cat );
        echo '<a href="' . esc_url( $sub_cat_link ) . '" class="sub-category-item">' . esc_html( $sub_cat->name ) . '</a>';
    }
    echo '</div>';
}

接着在子主题的 functions.php 中注册这个自定义元素，这样就能在UX Builder里找到它：

add_action('ux_builder_elements', 'register_custom_woocommerce_cats_element');
function register_custom_woocommerce_cats_element() {
    ux_builder_register_element('custom-woocommerce-categories', array(
        'title' => '自定义WooCommerce分类（带子分类）',
        'template' => get_stylesheet_directory() . '/inc/builder/elements/custom-element-woocommerce-categories.php',
        'category' => 'WooCommerce',
        'icon' => 'icon-category',
    ));
}

最后回到UX Builder，就能在WooCommerce分类下找到这个新元素，拖入页面后，再用CSS调整样式（比如横向排列子分类），就能达到你想要的效果。

方案2：用自定义短代码替代内置元素

如果不想修改主题元素，也可以自己写一个短代码，然后在UX Builder的「短代码」元素中插入：

在子主题的 functions.php 中添加短代码函数：

add_shortcode('custom_product_cats_with_subs', 'custom_product_cats_with_subs_render');
function custom_product_cats_with_subs_render($atts) {
    // 可通过短代码参数指定要显示的父分类ID
    $atts = shortcode_atts(array(
        'parent_ids' => '', // 格式："12,34"，替换成你的父分类ID
    ), $atts);

    $parent_cat_ids = explode(',', $atts['parent_ids']);
    $output = '<div class="custom-cat-container">';

    foreach ($parent_cat_ids as $cat_id) {
        $parent_cat = get_term($cat_id, 'product_cat');
        if (is_wp_error($parent_cat)) continue;

        $parent_link = get_term_link($parent_cat);
        $output .= '<div class="parent-cat">';
        $output .= '<a href="' . esc_url($parent_link) . '">' . esc_html($parent_cat->name) . '</a>';

        // 渲染子分类
        $sub_cats = get_terms(array(
            'taxonomy' => 'product_cat',
            'parent' => $cat_id,
            'hide_empty' => false,
        ));
        if (!empty($sub_cats)) {
            $output .= '<div class="sub-cats-list">';
            foreach ($sub_cats as $sub_cat) {
                $sub_link = get_term_link($sub_cat);
                $output .= '<a href="' . esc_url($sub_link) . '">' . esc_html($sub_cat->name) . '</a>';
            }
            $output .= '</div>';
        }
        $output .= '</div>';
    }
    $output .= '</div>';
    return $output;
}

在UX Builder中添加「短代码」元素，输入 [custom_product_cats_with_subs parent_ids="12,34"]（替换成你的父分类ID），再添加自定义CSS调整样式：

.custom-cat-container {
    display: flex;
    gap: 3rem;
    align-items: flex-start;
}
.sub-cats-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 0.8rem;
    /* 如果要横向子分类，把flex-direction改成row */
}