brickswiki.com

首页 / 中文教程 / 教程

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

有人在 Bricks Facebook 群https://www.facebook.com/groups/brickscommunity/posts/1311323746198809/里提问：

Ray Chan·2026-08-12·约 6 分钟

有人在 Bricks Facebook 群里提问：

我想知道怎么在 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 账户页面钩子参考。

参考链接

需要帮忙？

用 Bricks 建站？我接客户项目。

从快速营销站到完整的 Bricks 建站，再到从 Elementor 迁移——我都做过。本站每篇教程都来自真实项目经验。告诉我你的需求，一个工作日内回复。

  • ✓Bricks 建站与改版
  • ✓Elementor / Divi → Bricks 迁移
  • ✓Bricks → Astro / headless 性能升级
  • ✓速度优化，PageSpeed 95+ 目标

相关教程

WooCommerce 产品循环模板覆盖：用 Bricks 模板替换默认产品循环

阅读全文 →

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

阅读全文 →

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

阅读全文 →