如何在WooCommerce结账页面移除头部（非CSS方式）

原因分析 #

Twenty Twenty-Three作为块主题，通过parts/header.html控制全局头部，但WooCommerce结账页因模板加载逻辑或钩子优先级差异，没有正确调用子主题的空header文件。

解决方案（代码实现，无需CSS） #

方法1：强制结账页加载空header模板 #

在子主题的functions.php文件中添加以下代码，直接指定结账页使用子主题的空header文件：

add_filter( 'get_template_part', 'override_checkout_header_template', 10, 3 );
function override_checkout_header_template( $template, $slug, $name ) {
    // 仅针对结账主页面生效，排除订单完成等端点页面
    if ( is_checkout() && ! is_wc_endpoint_url() && 'header' === $slug ) {
        return get_stylesheet_directory() . '/parts/header.html';
    }
    return $template;
}

方法2：直接移除头部核心元素 #

如果方法1无效，可直接移除主题头部的站点标题和导航块，在子主题functions.php中添加：

add_action( 'wp', 'remove_checkout_header_blocks' );
function remove_checkout_header_blocks() {
    if ( is_checkout() && ! is_wc_endpoint_url() ) {
        // 移除站点标题块
        remove_action( 'twentytwentythree_header', 'wp_block_site_title', 10 );
        // 移除导航块
        remove_action( 'twentytwentythree_header', 'wp_block_navigation', 20 );
        // 清除header外层的空白容器
        add_filter( 'render_block', 'clear_checkout_header_container', 10, 2 );
    }
}

function clear_checkout_header_container( $block_content, $block ) {
    if ( is_checkout() && ! is_wc_endpoint_url() && 'core/group' === $block['blockName'] ) {
        if ( isset( $block['attrs']['layout']['type'] ) && 'constrained' === $block['attrs']['layout']['type'] ) {
            return '';
        }
    }
    return $block_content;
}

方法3：自定义结账页模板 #

在子主题中创建woocommerce/checkout/form-checkout.html文件，复制父主题page.html的内容，删除其中调用头部的代码行<!-- wp:template-part {"slug":"header"} /-->，结账页将使用该自定义模板，不再加载头部。

验证步骤 #

添加代码后清空WordPress缓存和浏览器缓存，访问结账页面确认头部已移除。

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