如何创建自定义 WooCommerce 注册表单
已发表: 2022-02-15想要改进您的 WordPress 网站的客户注册流程? 构建自定义 WooCommerce 注册表单是朝着正确方向迈出的一步。
默认的 WooCommerce 插件有一个注册表单,但只收集基本信息。 但是在名为 ProfilePress 的插件的帮助下,您可以从用户那里收集更多信息并重新排序表单以使其对用户友好。 通过表格收集的信息可用于您的电子邮件营销活动等。
在本文中,我们将向您展示如何创建自定义注册表单并将其替换为您的默认 WooCommerce 表单。 让我们潜入水中。
创建自定义 WooCommerce 注册表单
要创建自定义 WooCommerce 注册表单,您需要一个名为 ProfilePress 的插件。 下面,我们将向您展示如何设置插件。
第 1 步:安装 ProfilePress
注册 ProfilePress,您将收到一张收据,其中包含下载插件的链接以及许可证密钥。 在您的 WordPress 网站上下载并安装该插件。 输入许可证密钥以激活插件。
步骤 1.5:启用 WooCommerce 注册
转到WooCommerce-> 仪表板的设置。 单击“隐私和帐户”部分,然后选中“允许客户在“我的帐户”页面上创建帐户选项。
第 2 步:使用 ProfilePress 创建自定义表单
有趣的来了。 在您的 WordPress 仪表板上,转到ProfilePress > Forms & Profiles > Registration > Add New 。
您有两个选项来创建自定义注册表单。 您可以使用预制模板或从头开始构建表单。 如果您不知道如何编码和/或不想花时间从头开始构建表单,那么我们建议您选择模板。
选择拖放生成器。
为表单命名,然后从其中一个预建模板中进行选择。 出于本教程的目的,我们选择了Tulip 。 在下一页上,您可以根据需要自定义表单。
添加自定义字段
您可以将以下自定义字段添加到表单中,包括 WooCommerce 计费和运输字段到您的注册表单。
- 用户名
- 电子邮件地址
- 确认电子邮件
- 密码
- 确认密码
- 密码强度
- 网站昵称
- 显示名称
- 名
- 姓
- 上传头像
- 上传封面照片
- 传
- 选择角色
- 自定义 HTML
- 重新验证码
以下是我们为注册表单选择的自定义字段的快速浏览:
修改表单设置
ProfilePress 允许您更改表单的外观,包括。 这意味着您可以创建一个与您的品牌和风格相得益彰的表格。 我们建议您花几分钟时间修改表单的外观。
在进行下一步之前,请确保您转到注册设置并选择客户作为新用户角色。 使用此自定义表单注册的任何人都将被视为客户。
表单准备好后,保存更改。 现在,是时候在您的网站上显示新的自定义注册表单了。
第 3 步:更换 WooCommerce 注册表单
在本节中,您将学习如何用新的自定义注册表单替换默认的 WooCommerce 注册表单。
转到ProfilePress > 设置 > WooCommerce 。 您应该会看到一个名为My Account Registration Form的选项。 从下拉菜单中,选择您刚刚构建的新注册表并保存设置。
如果需要,您可以使用此表单作为您网站的默认注册页面。 您需要做的就是转到ProfilePress > 设置 > 常规 > 全局。 然后从注册页面选项中,选择新的自定义注册页面。
值得注意的是,如果您选择创建一个新的注册页面,复制表单的简码,创建一个新页面,添加简码并发布页面。 是的,就是这么简单!

就是这样,伙计们! 这就是您创建自定义 WooCommerce 注册表单的方式! 当您预览您的 WooCommerce 我的帐户页面时,您应该会看到显示的注册表单。
现在您有了自定义注册表单,有些人想知道是否还可以创建自定义登录表单。 创建自定义 WooCommerce 登录表单的过程与创建自定义注册表单的过程相同。 我们将在下一节中快速向您展示这些步骤。
如何创建自定义 WooCommerce 登录表单
要创建自定义 WooCommerce 登录表单,请转到ProfilePress > Forms & Profiles > Login > Add New 。
选择拖放生成器。 为表单命名,然后从其中一个预建模板中进行选择。
接下来,添加自定义字段并根据需要修改表单的外观。
最后,要用新的自定义表单替换默认的 WooCommerce 登录表单,请转到ProfilePress > Settings > WooCommerce > My Account Login Form并选择新的登录表单。
如果您想让新的登录表单成为您整个网站的默认登录表单,请转到ProfilePress > Settings > General > Global 。 然后从登录页面选项中,选择新的自定义登录表单。
以下是自定义登录页面在我们网站上的外观:
有了它,您现在知道如何创建自定义 WooCommerce 登录表单。
如果您将“我的帐户”页面中的默认注册和登录表单都替换为来自 ProfilePress 的自定义表单,则它在您的网站上可能会出现以下情况。
在任何 WooCommerce 商店中,除了注册和登录表单之外,还有一种访问者经常使用的重要表单——结帐表单。 接下来,我们将了解您为什么应该考虑自定义结帐表单以及您需要采取的具体步骤。
将自定义注册字段添加到 WooCommerce Checkout
将自定义字段添加到结帐页面是从客户那里收集其他信息的好方法。 例如,您可以让客户添加他们的社交媒体帐户,以简化注册过程。 这有助于提供更好的客户体验并提高您的销售额。
转到WooCommerce > 设置 > 帐户和隐私,然后选择允许客户在结帐时创建帐户。
接下来,转到ProfilePress > 设置 > 自定义字段。 您应该会在此页面上找到一两个可用的自定义字段。 要添加更多自定义字段,请选择Add New 。
ProfilePress 支持以下自定义字段类型:
- 文本
- 密码
- 电子邮件
- 电话
- 隐藏场
- 数字
- 日期
- 国家
- 文本区域
- 单个复选框
- 上传文件
- 选择下拉菜单
- 单选按钮
- 复选框
创建所需的所有字段后,保存设置,然后转到ProfilePress > Settings > WooCommerce > Checkout Registration Fields 。 添加您刚刚创建的注册字段。
如果您想将字段设为必填,则在必填注册字段中,添加您认为应为必填的字段。
不要忘记保存更改。
就是这样。 您现在有一个自定义结帐注册表单。
结论
通过自定义 WooCommerce 注册或表单收集用户信息有助于提高您的销售额。 WooCommerce 不提供添加字段或对其表单进行任何类型自定义的选项,因此您需要像 ProfilePress 这样的插件来修改 WooCommerce 表单。
也就是说,ProfilePress 不仅仅是一个表单构建器。 它可以帮助您管理用户配置文件和成员目录。 它可以帮助您限制对网站内容的访问,等等。 给 ProfilePress 一个旋转!
如果您喜欢我们的指南,那么您可能会发现我们的其他一些 WooCommerce 指南很有帮助。 看看我们的博客。