Bricks 打造自定义 WooCommerce 账户中心（My Account Dashboard）

为什么要自定义账户中心

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：搭建账户页结构

1. 在页面列表中找到 My account 页面，用 Bricks 编辑（这就是我们的仪表盘页）；

2. 页面设置 → 常规：禁用页头和页脚（账户中心要全屏布局）；

3. 布局选 33 | 67 双栏：会自动生成一个带两列的 Container；

4. 交叉轴对齐选 Stretch，宽度 100%、高度 100vh；

5. 右键 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 自带的灰底导航，和我们的自定义导航重复。把它干掉：

1. 安装激活 Bricks 官方子主题（Bricks Child Theme）；

2. 复制 /wp-content/plugins/woocommerce/templates/myaccount/navigation.php 到 /wp-content/themes/bricks-child/woocommerce/myaccount/navigation.php；

3. 编辑副本，删除其中的 <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 标题 + 对应元素：

如果只是想在默认输出上方加个标题，连模板都不用建，直接挂钩子：

add_action( 'woocommerce_edit_account_form_start', function () {
	echo '<h1>Account Details</h1>';
});

相关阅读：

• Bricks 自定义 WooCommerce 账户中心：完整搭建教程

• Bricks 内容切换器：纯 CSS 方案（radio + :has 实现标签切换）

• Bricks 用 ACF Checkbox 字段渲染自定义 SVG 图标列表

小结

这个方案把 WooCommerce 账户体系彻底拆开重组：账户页负责框架（双栏 + 自定义导航），端点模板负责内容，Notice 元素负责反馈，bricks/link_css_selectors 负责链接风格统一，子主题覆盖 navigation.php 负责去掉多余导航。每一步都是 Bricks 原生能力，没有第三方插件依赖。想快速起步的，也可以导入官方提供的 Zippy 页面导出包再微调。做外贸站、会员站的账户中心，这套就是标准答案。

常见误区

搭自定义账户中心几个容易翻车的点：一是Notice 元素默认是关的，忘了开就看不到 WooCommerce 的提示（如「密码已更新」），体验直接打折；二是去掉默认导航要用子主题覆盖 navigation.php，别在核心文件里改，否则升级被覆盖；三是端点模板要挂对钩子/条件，少一个端点模板，对应子页就空白或回退默认。另外权限上，Bricks 的「Builder access」只控制谁能进编辑器，账户页前端展示不受它影响，别混淆。想快速起步也可直接导入官方 Zippy 导出包再微调。

常见问题（FAQ）

Q：一定要用子主题吗？ A：覆盖 navigation.php 等建议在子主题里做，升级才不会丢失改动。

Q：为什么 Notice 提示不显示？ A：Notice 元素默认关闭，在账户页模板里手动开启它才能显示 WooCommerce 反馈。

Q：能不用第三方插件做账户中心吗？ A：能，本方案全是 Bricks 原生能力（账户构建器+端点模板+Notice），无插件依赖。

Q：官方有现成模板可以抄吗？ A：有，可导入官方提供的 Zippy 页面导出包再微调，省去从零搭。

延伸阅读

• 想要现成外贸独立站模板与建站实战？看 铲子铺 chanzipu 的外贸建站教程（同用 Bricks，从零搭出能收询盘的站）
• 相关阅读：Bricks Setup Guide

站长

Ray Chan

WordPress Developer & Bricks Specialist

WordPress developer with 10+ years of client builds. Switched to Bricks in 2023 — now builds fast WordPress sites and migrates legacy Elementor/Divi projects.

获取报价 →浏览全部教程