如何在WooCommerce主分类页面添加子分类与商品的分隔符

原代码问题分析 #

1. 错误调用get_header()：该函数会重复渲染页面头部，破坏DOM结构，直接导致Elementor模板无法正常解析显示。
2. 短代码转义字符错误："是HTML转义字符，PHP环境下短代码ID需用普通双引号包裹，否则短代码无法被识别。
3. 函数使用不当：woocommerce_maybe_show_product_subcategories()是直接输出内容的函数，而非返回字符串，用echo调用会造成重复输出。
4. 钩子逻辑混乱：原代码对商品循环的包裹逻辑有误，导致子分类与商品的结构层级错误。

修正后的代码 #

add_action( 'init', 'move_subcat_list' );
function move_subcat_list() {
    // 移除WooCommerce默认的子分类输出钩子
    remove_action( 'woocommerce_before_shop_loop', 'woocommerce_output_product_categories', 10 );

    // 注册自定义钩子，按优先级控制显示顺序
    add_action( 'woocommerce_before_shop_loop', 'custom_output_product_subcategories', 20 );
    add_action( 'woocommerce_before_shop_loop', 'add_separator_between_subcats_products', 30 );
}

/**
 * 自定义渲染子分类列表
 */
function custom_output_product_subcategories() {
    // 获取当前分类的子分类（仅显示非空分类）
    $subcategories = get_terms( 'product_cat', array(
        'parent' => get_queried_object_id(),
        'hide_empty' => true,
    ) );

    if ( ! empty( $subcategories ) ) {
        woocommerce_product_loop_start();
        foreach ( $subcategories as $subcategory ) {
            // 调用WooCommerce默认的分类模板渲染
            wc_get_template( 'content-product_cat.php', array(
                'category' => $subcategory,
            ) );
        }
        woocommerce_product_loop_end();
    }
}

/**
 * 在子分类与商品之间添加分隔内容
 */
function add_separator_between_subcats_products() {
    $subcategories = get_terms( 'product_cat', array(
        'parent' => get_queried_object_id(),
        'hide_empty' => true,
    ) );

    // 仅当存在子分类时显示分隔内容
    if ( ! empty( $subcategories ) ) {
        // 方案1：添加纯CSS分隔线（可自定义样式）
        echo '<div class="subcat-product-separator" style="height: 2px; background-color: #e0e0e0; margin: 40px 0;"></div>';

        // 方案2：启用Elementor模板（替换为你的模板ID，确保模板已发布）
        // echo do_shortcode('[elementor-template id="2808"]');
    }
}

关键修改说明 #

• 钩子调整：直接移除默认的子分类输出钩子，改用自定义逻辑控制显示位置，避免冲突。
• 子分类获取优化：用get_terms直接获取子分类，更灵活可控，避免原函数的输出副作用。
• 移除冗余代码：删除get_header()调用，修复页面结构完整性。
• 双方案支持：提供纯HTML分隔线和Elementor模板两种选项，按需注释/启用。

调试建议 #

1. 确认Elementor模板ID（2808）正确，且模板已设置为发布状态。
2. 清除网站缓存（包括页面缓存、Elementor缓存）后测试效果。
3. 检查当前主题的Shop页面模板是否保留了woocommerce_before_shop_loop钩子，若主题自定义了模板需确保钩子存在。
4. 先在普通页面插入Elementor短代码测试模板本身是否能正常显示，排除模板自身问题。

内容的提问来源于stack exchange，提问作者Ward Swilem