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

我想知道怎么在 Bricks 里做出这样的仪表盘？！可惜 “Account Page”（账户页）元素太受限了。

是我漏了什么吗？毕竟 Bricks 官网展示的正是这个效果——看链接

这篇教程就来讲：如何用 Bricks 的 WooCommerce 账户构建器搭建一个自定义的 My Account（我的账户）仪表盘。

这是一篇相当长、相当深入的教程。默认可视化学习的话，也可以等 Paul C 的配套视频。

先看看默认的 My account 页面长什么样（作为对照）：

第一步：开启 WooCommerce 通知元素

为了在右列的顶部显示 WooCommerce 通知（notices），先进入 Bricks → Settings → WooCommerce，打开 Enable Bricks WooCommerce “Notice” element（启用 Bricks WooCommerce 通知元素）开关。

第二步：My account 页面

进入页面列表，用 Bricks 编辑 My account 页面。

我们要在这个页面里搭出整体结构：左侧固定列 + 右侧可滚动内容列——这就是我们的仪表盘页面。完成后应该是这样：

想省事的话，可以直接导入这份 Zippy 导出（Zippy 是 Bricks 的导出/导入插件），在此基础上继续微调；不过「移除 WooCommerce 默认导航」那部分还是得自己按下面做。下面是手动搭建步骤：

点击设置（齿轮）图标 → GENERAL：

禁用页眉和页脚（Disable header and footer）。
点击布局图标，选择 33 | 67 布局——这会添加一个含 2 列的容器（Container）。
交叉轴对齐（Align cross axis）：Stretch。
宽度（Width）：100%。
高度（Height）：100vh。

右键点击容器，把它包进一个区块（Section）里。如果你的全局主题样式给所有区块都设了 padding，记得把这个区块四边 padding 都设为 0 去掉。

左列

选中第 1 列：

Padding 四边：3em
最大宽度（Max. width）：400
颜色（Color）：#f5f5f5
背景色（Background color）：#26272a

添加一个 Logo 元素，选择/上传你的 logo 图片；底部外边距（Margin）设为 2em。

接下来添加一系列 Text Link（文本链接）元素，一个对应一个账户导航项。

添加 Text Link 元素：

文本：Dashboard
链接：内部（Internal）→ My account（页面）
点击图标按钮，上传一个 SVG 图标，比如这个 dashboard 图标（本教程所有图标统一选 18dp 尺寸、白色）。如果在 Bricks 编辑器里上传不了 SVG，请在 Bricks 的 General 设置里为管理员启用该权限。
给它加一个类（class），比如 wc-nav-link。
选中该类后设置：图标间距（Icon Gap）10；上下 Padding 0.8em；左右 Padding 0.75em；宽度 100%；颜色 #f5f5f5；四边圆角（Border radius）4；激活 hover 状态并把颜色设为 #fff，然后关闭 hover 状态。

复制这个 Text Link，改成 Orders：

链接可以是静态值 /my-account/orders/，也可以是动态数据：
{echo:wc_get_account_endpoint_url(orders)}
图标：购物车图标。

再复制成 Downloads（如果有可下载产品的话）：

静态：/my-account/downloads/
动态：{echo:wc_get_account_endpoint_url(downloads)}
图标：下载图标。

再复制成 Addresses：

静态：/my-account/edit-address/
动态：{echo:wc_get_account_endpoint_url(edit-address)}
图标：地图图标。

再复制成 Account Details：

静态：/my-account/edit-account/
动态：{echo:wc_get_account_endpoint_url(edit-account)}
图标：用户图标。

再复制成 Support：

链接：外部（External）→ /support（换成适合你站点的链接）。
图标：客服图标。
想把它推到底部：选中它，把顶部外边距（top margin）设为 auto。

再复制成 Back to Shop：

链接：内部（Internal）→ Shop（页面）。
图标：返回图标。
记得把上一个链接的 auto 顶部外边距移除。

接下来加用户资料部分：

添加一个 Block（块）：

方向（Direction）：水平（row）
列间距（Column gap）：1em；行间距（Row gap）：1em
顶部外边距：1em
顶部 Padding：2em；底部 Padding：1em
底部边框：1px solid #5e5e68

在 Block 里添加一个 Image 元素：

图片来源设为 {wp_user_picture}
尺寸（Size）：WooCommerce Gallery Thumbnail (100 x 100)
宽度（Width）：50
四边圆角：50%

在 Image 下方添加一个 Div：

添加一个 h6 Heading，内容为 {wp_user_display_name}
添加一个 Basic Text 元素，内容为 {wp_user_email}，HTML 标签：p

再添加一个 Div 作为上一个 Div 的兄弟元素：

HTML 标签：a [link]
链接（Link）：动态数据 {echo:wp_logout_url}
左边距（margin left）设为 auto
里面放一个 SVG 元素：下载这个退出图标（18dp、白色，与教程中其他图标一致）。用文本/代码编辑器打开，加入：

<title>Log out</title>

效果如下（加 <title> 会给图标提供 tooltip 提示）：

<svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 0 24 24" width="18px" fill="#FFFFFF"><title>Log out</title><path d="M0 0h24v24H0z" fill="none"/><path d="M17 7l-1.41 1.41L18.17 11H8v2h10.17l-2.58 2.58L17 17l5-5zM4 5h8V3H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h8v-2H4V5z"/></svg>

上传该图标。

全局链接颜色

你可能已经在全局主题样式里给链接设置过特定颜色。为了让它对自定义仪表盘里所有链接生效，把下面代码加到子主题的 functions.php（不含开头的 PHP 标签）或代码片段插件：

<?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

再补一点 CSS：让当前/激活的自定义链接通过背景色凸显出来，并给本页的 h2、h3 标题设置底部外边距。

点击设置（齿轮）图标 → CUSTOM CODE，添加：

[aria-current="page"] {
	background-color: #3F3F48;
}
.brxe-woocommerce-account-page h2 {
	margin-bottom: 0.6em;
}
.brxe-woocommerce-account-page h3 {
	margin-bottom: 0.4em;
}

右列

Column 元素设置：四边 Padding 4em；最大宽度（可选）966；Overflow（溢出）设为 auto。

添加一个 Notice 元素。

添加一个 Account – Page 元素。

WooCommerce 的每个账户端点（Addresses、Downloads、Orders 等）都会在 “Account – Page” 元素内部、用对应的 Bricks 模板（如果存在）渲染。端点对照参考：

模板类型	端点	元素
WooCommerce – Account – Dashboard	`/`	–
WooCommerce – Account – Orders	`orders/`	Account – Orders
WooCommerce – Account – View order	`orders/view-order/{order_id}/`	Account – View order
WooCommerce – Account – Downloads	`downloads/`	Account – Downloads
WooCommerce – Account – Addresses	`edit-address/`	Account – Addresses
WooCommerce – Account – Edit address	`edit-address/billing/` / `edit-address/shipping/`	Account – Edit address
WooCommerce – Account – Edit account	`edit-account/`	Account – Edit account

移除 WooCommerce MyAccount 导航

添加这个元素后，默认会出现一个浅灰色背景的默认 WooCommerce 账户导航。既然我们要逐个手建导航项以便完全掌控，就把这个多余的默认导航去掉。

如果还没装 Bricks 子主题，先安装并激活（站点任何阶段安装都安全）。

复制：

/wp-content/plugins/woocommerce/templates/myaccount/navigation.php

到：

/wp-content/themes/bricks-child/woocommerce/myaccount/navigation.php

然后编辑上述文件，删除：

<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>

第三步：WooCommerce Account Orders 模板

默认情况下，订单表格出现在 /my-account/orders/。

想在其上下方添加元素的话，按此步做。

进入 Bricks → Templates：

导入这份模板，或新建一个类型为 “WooCommerce – Account – Orders” 的模板（同名或类似名称）。
若已导入模板，确认其类型正确。用 Bricks 编辑它：禁用页眉页脚。右键点击 “WooCommerce Account Orders” 元素，另存为全局元素（global element）——下一步要用（如果你想在仪表盘里加订单表格）。

手动搭建：

用 Bricks 编辑模板。
在 PAGE SETTINGS 里禁用页眉页脚。
添加一个 h1 Heading，文本如 “Your Orders”；底部外边距 1.5em。
添加 WooCommerce Account Orders 元素；在结构面板里右键它，另存为全局元素（下一步要用）。

第四步：WooCommerce Account Dashboard 模板

开箱即用的仪表盘显示：

想自定义它——比如上面加个标题、下面加订单表格——就按此步做。

进入 Bricks → Templates，新建一个类型为 “WooCommerce – Account – Dashboard” 的模板。

用 Bricks 编辑它：

禁用页眉页脚。
添加一个 h1 Heading，文本：

Welcome, {wp_user_display_name}!

底部外边距 1.5em。

添加两个 HTML 标签为 p 的 Basic Text 元素（分别放欢迎语和仪表盘说明）。
想要 WooCommerce 原生输出的精确代码的话，不用上面两个文本元素，改加一个 Code 元素，内容：

<p>
	<?php
  $allowed_html = array(
    'a' => array(
      'href' => array(),
    ),
  );
  $current_user = get_user_by( 'id', get_current_user_id() );
	printf(
		/* translators: 1: user display name 2: logout url */
		wp_kses( __( 'Hello %1$s (not %1$s? <a href="%2$s">Log out</a>)', 'woocommerce' ), $allowed_html ),
		'<strong>' . esc_html( $current_user->display_name ) . '</strong>',
		esc_url( wc_logout_url() )
	);
	?>
</p>
<p>
	<?php
	/* translators: 1: Orders URL 2: Address URL 3: Account URL. */
	$dashboard_desc = __( 'From your account dashboard you can view your <a href="%1$s">recent orders</a>, manage your <a href="%2$s">billing address</a>, and <a href="%3$s">edit your password and account details</a>.', 'woocommerce' );
	if ( wc_shipping_enabled() ) {
		/* translators: 1: Orders URL 2: Addresses URL 3: Account URL. */
		$dashboard_desc = __( 'From your account dashboard you can view your <a href="%1$s">recent orders</a>, manage your <a href="%2$s">shipping and billing addresses</a>, and <a href="%3$s">edit your password and account details</a>.', 'woocommerce' );
	}
	printf(
		wp_kses( $dashboard_desc, $allowed_html ),
		esc_url( wc_get_endpoint_url( 'orders' ) ),
		esc_url( wc_get_endpoint_url( 'edit-address' ) ),
		esc_url( wc_get_endpoint_url( 'edit-account' ) )
	);
	?>
</p>
<?php
/**
	 * My Account dashboard.
	 *
	 * @since 2.6.0
	 */
do_action( 'woocommerce_account_dashboard' );
?>

想加订单表格：添加一个 h3 “Orders” 标题，再添加 “WooCommerce Account Orders” 全局元素。

模板 JSON 导出。

第五步：WooCommerce Account Downloads 模板

不用 WooCommerce 下载功能的话可以跳过。

进入 Bricks → Templates，新建类型为 “WooCommerce – Account – Downloads” 的模板：

编辑时禁用页眉页脚。
添加 h1 “Your Downloads” 标题，底部外边距 1.5em。
添加 “Account – Downloads” 元素。

模板 JSON 导出。

第六步：WooCommerce Account Addresses 模板

与上一步类似，模板类型改为 “WooCommerce – Account – Addresses”：加一个 “Your Addresses” h1 标题和 “Account – Addresses” 元素。

模板 JSON 导出。

第七步：WooCommerce Account Details 模板

与上一步类似，模板类型改为 “WooCommerce – Account – Edit account”：加一个 “Account Details” h1 标题和 “Account – Edit account” 元素。

模板 JSON 导出。

💡 如果你熟悉钩子、只想做类似「在默认输出上方加个标题」的小改动，也可以完全不建 Bricks 模板，直接这样：

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

参见 WooCommerce 账户页面钩子参考。

相关阅读：

参考链接

常见误区与性能提示

几个坑：一是把整个 My Account 用 Bricks 重做后，忘了 WooCommerce 自带导航还在，出现两套菜单，按本文移除原导航；二是全局链接颜色、CSS 没作用域，会污染整站样式，用容器类限定；三是 Orders/Downloads 等模板各自建、没复用左列布局，后期改一处要改五处。性能上这类账户页是登录态、不进公开缓存，重点把查询和 CSS 写干净，别塞重动画。

常见问题（FAQ）

重做 My Account 后旧导航怎么去？ 按本文用 CSS/钩子移除 WooCommerce 自带 MyAccount 导航，避免两套菜单并存。

样式会污染整站吗？ 会，全局 CSS 没限定作用域就外溢；用容器类把账户页样式包起来。

各子页面能复用布局吗？ 能，把左列等公共部分抽成统一结构，Orders/Downloads/Addresses 只换右列内容。

账户页要管缓存吗？ 登录态页面通常不进公开缓存，重点把查询和 CSS 写干净、别堆重动画。

相关阅读：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.

获取报价 →浏览全部教程

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

第一步：开启 WooCommerce 通知元素

第二步：My account 页面

左列

全局链接颜色

自定义 CSS

右列

移除 WooCommerce MyAccount 导航

第三步：WooCommerce Account Orders 模板

第四步：WooCommerce Account Dashboard 模板

第五步：WooCommerce Account Downloads 模板

第六步：WooCommerce Account Addresses 模板

第七步：WooCommerce Account Details 模板

参考链接

常见误区与性能提示

延伸阅读

常见问题（FAQ）

延伸阅读

Bricks 查询循环输出 ACF 图片字段的 Alt、Caption、标题数据

Bricks 中输出 ACF Relationship 关联文章的数量

ACF Relationship 字段 + Bricks 查询循环：显示关联文章

把任意自定义 WP_Query 循环接入 Bricks 查询循环

相关教程

用 Bricks 建站，Ray Chan 接客户项目