为什么要自定义账户中心
Bricks 官方群里有用户抱怨：WooCommerce 的 Account Page（账户页）元素太简陋了，想做一个像样一点的“账户中心”（左侧固定导航 + 右侧滚动内容）都无从下手。
其实 Bricks 自带的 WooCommerce 账户构建器完全够用，只是需要按正确姿势组装。成品结构是：一个 33/67 双栏布局的账户页——左栏是固定的导航（Dashboard / Orders / Downloads / Addresses / Account Details / Support / Back to Shop）+ 用户资料卡，右栏是滚动的内容区，通过各端点对应的 Bricks 模板渲染订单表、下载列表、地址表单等。
Step 1：开启 Notice 元素
先到 Bricks → 设置 → WooCommerce，打开 Enable Bricks WooCommerce “Notice” element 开关。这样右栏顶部能显示 WooCommerce 的提示消息（比如“地址已更新”）。
Step 2：搭建账户页结构
- 在页面列表中找到 My account 页面，用 Bricks 编辑（这就是我们的仪表盘页）；
- 页面设置 → 常规：禁用页头和页脚（账户中心要全屏布局）；
- 布局选 33 | 67 双栏：会自动生成一个带两列的 Container；
- 交叉轴对齐选 Stretch，宽度 100%、高度
100vh； - 右键 Container 包进一个 Section，并把该 Section 四边 padding 归零（覆盖全局主题样式的默认 padding）。
左栏（第 1 列）：内边距 3em、最大宽度 400、文字色 #f5f5f5、背景 #26272a。依次放入：
- Logo 元素（底部外边距 2em）；
- 一组 Text Link 导航，每个对应一个端点，加同一个类
wc-nav-link（图标间距 10、上下内边距 0.8em、左右 0.75em、宽度 100%、文字#f5f5f5、圆角 4、hover 变#fff）：- Dashboard → 内链到 My account 页；
- Orders → 链接用动态数据
{echo:wc_get_account_endpoint_url(orders)}； - Downloads →
{echo:wc_get_account_endpoint_url(downloads)}； - Addresses →
{echo:wc_get_account_endpoint_url(edit-address)}； - Account Details →
{echo:wc_get_account_endpoint_url(edit-account)}； - Support → 外链到你的支持页面；
- 给 Support 设置上边距
auto，把它推到左栏底部，下面再放 Back to Shop 链接。
用户资料卡：左栏底部加一个横向 Block，内含：头像 Image（动态数据 {wp_user_picture}，宽 50、圆角 50%）、h6 标题 {wp_user_display_name}、Basic Text {wp_user_email}，以及一个退出登录链接——HTML 标签设 a [link]、动态数据 {echo:wp_logout_url}、左侧 margin auto，里面放一个带 <title>Log out</title> 的 SVG 图标（这样悬停有提示）。
全局链接配色：账户中心里链接多，为保证所有链接都继承主题色，在 functions.php 加：
add_filter( 'bricks/link_css_selectors', function( $link_css_selectors ) {
// Add CSS link styles to .brxe-woocommerce-account-page a
$link_css_selectors[] = '.brxe-woocommerce-account-page a';
return $link_css_selectors; // Array of selectors link styles are applied to
} );自定义 CSS（Bricks → 自定义代码）：
[aria-current="page"] {
background-color: #3F3F48;
}
.brxe-woocommerce-account-page h2 {
margin-bottom: 0.6em;
}
.brxe-woocommerce-account-page h3 {
margin-bottom: 0.4em;
}[aria-current="page"] 让当前激活的导航项高亮，h2/h3 的下边距让端点页标题不那么挤。
右栏（第 2 列）：四边内边距 4em、最大宽度 966、overflow auto。放一个 Notice 元素 + 一个 Account – Page 元素——所有端点（订单/下载/地址/账户详情）都会渲染在这个元素里，并自动套用对应的 Bricks 模板（见下文）。
移除默认 MyAccount 导航
Account – Page 元素默认会带上 WooCommerce 自带的灰底导航，和我们的自定义导航重复。把它干掉：
- 安装激活 Bricks 官方子主题（Bricks Child Theme）；
- 复制
/wp-content/plugins/woocommerce/templates/myaccount/navigation.php到/wp-content/themes/bricks-child/woocommerce/myaccount/navigation.php； - 编辑副本，删除其中的
<nav class="woocommerce-MyAccount-navigation">…</nav>整块（保留<?php do_action( 'woocommerce_account_navigation' ); ?>及外围结构）：
<nav class="woocommerce-MyAccount-navigation">
<ul>
<?php foreach ( wc_get_account_menu_items() as $endpoint => $label ) : ?>
<li class="<?php echo wc_get_account_menu_item_classes( $endpoint ); ?>">
<a href="<?php echo esc_url( wc_get_account_endpoint_url( $endpoint ) ); ?>"><?php echo esc_html( $label ); ?></a>
</li>
<?php endforeach; ?>
</ul>
</nav>Step 3-7：各端点模板
为了让右栏各端点有完整标题、并能在仪表盘首页嵌入订单表，在 Bricks → 模板 里为每个端点建对应类型的模板（全部禁用页头页脚），内容大同小异——h1 标题 + 对应元素：
| 模板类型 | 端点 URL | 元素 |
|---|---|---|
| WooCommerce – Account – Orders | orders/ |
Account Orders |
| WooCommerce – Account – Dashboard | - |
自定义欢迎语 + 订单表 |
| WooCommerce – Account – Downloads | downloads/ |
Account Downloads |
| WooCommerce – Account – Addresses | edit-address/ |
Account Addresses |
| WooCommerce – Account – Edit account | edit-account/ |
Account – Edit account |
Dashboard 模板里用 h1 输出 Welcome, {wp_user_display_name}!，想加订单表就把 Orders 模板里的 Account Orders 元素右键存成全局元素再拖进来。
如果只是想在默认输出上方加个标题，连模板都不用建，直接挂钩子：
add_action( 'woocommerce_edit_account_form_start', function () {
echo '<h1>Account Details</h1>';
});小结
这个方案把 WooCommerce 账户体系彻底拆开重组：账户页负责框架（双栏 + 自定义导航），端点模板负责内容，Notice 元素负责反馈，bricks/link_css_selectors 负责链接风格统一，子主题覆盖 navigation.php 负责去掉多余导航。每一步都是 Bricks 原生能力，没有第三方插件依赖。想快速起步的，也可以导入官方提供的 Zippy 页面导出包再微调。做外贸站、会员站的账户中心，这套就是标准答案。