Astra 如何配合 WooCommerce 添加用户登录功能？完整操作指南

Astra主题和WooCommerce搭建电商网站时，添加用户登录功能很简单。只要在WooCommerce设置中启用”客户账户”功能，系统就会自动创建登录、注册和账户页面。Astra主题完美兼容这些页面，顾客可以直接在前台完成注册、登录、查看订单等操作，不用进入后台。整个过程不用代码，几分钟就能完成设置。

一、为什么要在 Astra 中添加 WooCommerce 登录功能？

WooCommerce 自带的用户登录机制主要体现在：

购物车结账时引导用户登录
WooCommerce 提供的“我的账户”页面，集成登录、注册、订单管理等功能

Astra 对 WooCommerce 的原生支持非常好，通过下面的方式提升用户体验：

将登录按钮整合进顶部导航栏或页眉
自定义“我的账户”页面样式
配合古腾堡编辑器优化登录页面布局

二、前提准备

安装并启用以下内容

Astra 主题（推荐搭配 Astra Pro 开启更多 WooCommerce 控件）

WooCommerce 插件（官方电商系统，免费）

用户管理辅助插件（可选）
- Theme My Login（前端登录/注册界面）
- Nextend Social Login（第三方社交账户登录）
- User Registration（注册字段扩展）

三、启用 WooCommerce 的登录功能

步骤 1：启用用户注册与登录功能

进入后台 → WooCommerce → 设置 → 账户与隐私，勾选以下选项：

允许顾客在“我的账户”页面登录
允许顾客在结账时创建账户
自动为顾客创建账户（可选）

保存设置后，“我的账户”页面将同时包含登录和注册表单。

四、通过自定义菜单添加“登录/我的账户”入口

后台 → 外观 → 菜单

添加 WooCommerce 自动生成的 “我的账户” 页面（通常为 /my-account）

命名为“登录 / 我的账户”或自定义名称
可配合插件 If Menu 设置登录状态下切换显示“登录”与“登出”按钮

五、将登录按钮添加到 Astra 顶部菜单栏

如果想让登录功能在页眉显眼展示，可以在 Astra 的头部构建器中操作：

外观 → 自定义 → 头部构建器

添加一个“按钮”或“HTML”模块

设置跳转链接为 /my-account 或 /login

按钮文字可填写为“登录”或“账户中心”

自定义样式以匹配整体设计风格

六、使用 Gutenberg 优化登录页面（可选）

Astra 与 Gutenberg（WordPress 原生区块编辑器）完全兼容，可以使用 Gutenberg 创建一个自定义登录页面，并将其作为主登录入口，搭配 Astra 的导航菜单或按钮使用。

1. 新建“用户登录”页面

进入后台 → 页面 → 新建页面
标题建议填写为：“用户登录”或“账户中心”

点击“使用Gutenberg编辑器”（即默认编辑方式）进行编辑

2. 插入登录表单

方法一：使用短代码区块插入 WooCommerce 登录表单：

点击页面内容区域 → 添加区块 → 搜索并插入 “短代码” 区块
输入以下内容：





	


		登录

		

			
			
				用户名或电邮地址 *必填
							
			
				密码 *必填
				
			

			
			
				
					 记住我
				
								
			
			
				忘记密码？
			

			
		


	

	

		注册

		

			
			
			
				邮箱地址 *必填
							

			
				用于设置新密码的链接将发送至您的电子邮件地址。

			
			您的个人资料将用于在您体验本网站的整个过程中为您提供支持、管理对您帐户的访问，以及用于在我们的隐私政策中描述的其他用途。

说明：这个短代码不仅包含登录表单，还包含注册表单与账户信息区块（登录后自动切换）

方法二（进阶）：使用支持用户登录的表单插件，如 WPForms 或 User Registration，生成表单后插入其短代码

总结

Astra主题与WooCommerce完美配合，不用编程就可以快速搭建美观实用的用户登录系统。无论是使用默认账户页面、还是创建独立登录入口，都可以轻松实现，为顾客提供流畅的购物体验。

联系我们
教程看不懂？联系我们为您免费解答！免费助力个人，小企站点！	客服微信
① 电话：020-2206-9892
② QQ咨询：1025174874
③ 邮件：info@361sale.com
④ 工作时间：周一至周五，9:30-18:30，节假日休息