如何自定义你的 WooCommerce 登录页面(3 种方式)

你想自定义你的 WooCommerce 客户登录页面吗?

默认的 WordPress 登录页面很简单,与你的商店品牌不匹配。 自定义你的 WooCommerce 客户登录页面将帮助你提供更好的访客体验。

在本文中,我们还分享了有关如何创建完全自定义的 WooCommerce 登录页面以及如何自定义结帐登录页面的提示。

如何创建自定义 WooCommerce 客户登录页面

为什么要创建自定义 WooCommerce 客户登录页面?

当客户登录你的 WooCommerce 商店时,他们会看到只有 WordPress 徽标和品牌的默认 WordPress 登录页面。

标准 WordPress 登录屏幕示例

假如你想访问你网站的仪表板,此页面非常适合。 但是,客户可能会对简单的设计感到失望,并怀疑登录页面与你网站的外观不匹配。

自定义你的 WooCommerce 登录页面允许你添加徽标并更改设计以匹配你的网站。 这将使你的网站看起来更专业,并提供更好的访客体验。

你还可以添加更多表单字段,甚至可以宣传特定产品或向客户展示特别优惠。

也就是说,让我们看看 WooCommerce 中创建自定义客户登录页面。

  • 使用 SeedProd 创建一个完全自定义的 WooCommerce 登录页面
  • 使用 WPForms 自定义 WooCommerce 登录页面
  • 奖励:WooCommerce Checkout 登录自定义

使用 SeedProd 创建一个完全自定义的 WooCommerce 登录页面

创建自定义 WooCommerce 客户登录页面的最佳方法是使用 SeedProd。 最好的 WordPress 登陆页面WordPress 主题构建器,非常易于使用。

SeedProd 的拖放构建器可让你自定义页面或 WordPress 主题的设计和布局,而无需触及任何一行代码。

本教程使用 SeedProd Pro 许可证,因为它包括登录页面模板和其他高级自定义选项。 还有一个免费版本的 SeedProd Lite 可用。

首先,你需要安装并激活 SeedProd 插件。 如需帮助,请参阅我们关于如何安装 WordPress 插件的教程。

启用后,将显示 SeedProd 启动屏幕。 输入你的许可证密钥,然后单击“确认密钥”按钮。 我们可以在 SeedProd 帐户区域中找到你的许可证密钥。

SeedProd 许可证密钥

接下来,我们可以为你的 WooCommerce 商店创建自定义登录页面。

只需转到 WordPress 仪表板中的 SeedProd » 登录页面,然后单击“设置登录页面”按钮。

选择登录页面

之后,SeedProd 将显示几个模板。 我们可以快速选择一个并根据你的需要进行自定义。 这将帮助你节省时间,并且我们可以使用现有设计创建自己的 WooCommerce 登录页面。

该插件还允许你使用空白模板从头开始创建登录页面。

为 SeedProd 登录页面选择一个模板

选择模板后,将打开一个弹出窗口。

继续输入页面名称并单击“保存并开始编辑页面”按钮。

输入页面名称和页面 URL

接下来,你将看到拖放页面构建器。

你现在可以通过从左侧菜单向模板添加新块来自定义登录页面。

SeedProd 提供标准块,例如标题、文本、图像、按钮等。

自定义您的 WooCommerce 登录页面

除此之外,你还可以添加高级块,例如赠品、联系表格、社交分享按钮、表格选择器等。 你还可以将 WooCommerce 块添加到登录页面模板中,例如最近的产品、特色产品和畅销产品。

WooCommerce 块可以轻松推荐顶级产品并推广折扣优惠以获得更多转化。

除此之外,SeedProd 允许你进一步自定义登录页面的每个部分。 只需单击一个部分,你就会看到更多选项,例如编辑标签、颜色、字体和间距。

更多自定义选项

完成自定义 WooCommerce 登录页面后,不要忘记单击顶部的“保存”按钮。

然后,我们可以通过转到“页面设置”选项卡并单击“页面状态”切换按钮从草稿更改为发布。 然后,我们可以单击“保存”按钮并关闭页面构建器。

SeedProd 页面设置

剩下的就是向访客展示一个新的自定义 WooCommerce 登录页面。 为此,请转到 WordPress 仪表板上的 SeedProd » 登录页面。

单击“登录页面”下的开关,它将变为绿色和“活动”。

激活 SeedProd 登录页面

激活后,网站上将出现一个新的登录页面!

我们可以访问电子商务商店以查看它的运行情况。

WooCommerce 登录页面预览

使用 WPForms 自定义 WooCommerce 客户登录表单

想要创建一个与你的网站主题相匹配并提供更多表单字段的登录表单?

默认的 WordPress 登录表单只允许访客输入电子邮件地址或访客名以及密码。 我们可以使用自定义登录表单添加更多字段并让客户使用他们的姓名或电话号码登录。

最好的方法是使用 WPForms。 它是最适合初学者的 WordPress 表单构建器。 超过 500 万个网站使用 WPForms 来构建更智能的表单。

我们可以轻松创建自定义 WooCommerce 登录表单并将其显示在在线商店的任何位置,例如侧边栏或产品页面。

对于本教程,我们使用 WPForms Pro 计划,因为它包含一个访客注册插件。 你还可以尝试免费版的 WPForms 以开始使用。

首先,你需要安装并激活 WPForms 插件。 如需帮助,请参阅我们关于如何安装 WordPress 插件的教程。

激活后,我们可以通过 WordPress 仪表板上的 WPForms » 设置输入你的许可证密钥。 我们可以在 WPForms 帐户区域中找到你的许可证密钥。

输入您的 WPForms 许可证密钥

接下来,你需要转到 WordPress 管理面板中的 WPForms » Addons。

然后向下滚动到“访客注册加载项”并单击“安装加载项”按钮。

安装 WPForms 用户注册插件

你现在已准备好为 WooCommerce 创建自定义登录表单。 只需转到 WPForms » Add New 并启动表单构建器。

在下一个屏幕上,我们可以在顶部输入表单的名称。 然后搜索“访客登录表单”模板并单击“使用模板”按钮。

选择一个 WPForms 用户登录表单模板

然后,我们可以使用拖放构建器自定义访客登录表单模板。 WPForms 可以很容易地将其他字段添加到表单或重新排列模板中的现有字段。

例如,我们可以通过将电话号码等高级字段从左侧菜单拖放到模板中来添加它们。

WPForms 表单生成器

模板中的每个表单域都可以进一步定制。 只需单击该字段,编辑标签,添加说明并使其成为表单上的必填字段。

然后,我们可以转到表单构建器的“设置”选项卡。 我们可以在常规设置中将“提交按钮文本”更改为“登录”。

自定义 WPForms 按钮文本

接下来,转到“确认”选项卡,我们可以在其中更改访客成功登录时发生的情况。

只需单击“验证类型”下拉菜单并选择一个选项。 我们可以向客户显示消息、显示页面或重定向到特定 URL。

例如,假如你将 WooCommerce 登录表单添加到你的产品页面,你的客户可以快速登录以购买你的产品。

在 WPForms 中编辑验证设置

完成后,只需单击顶部的“保存”按钮。

接下来,你需要将 WooCommerce 客户登录表单添加到你网站上的页面。

只需单击构建器顶部的“嵌入”按钮。 然后,我们可以选择是将表单放在现有页面上还是创建新页面。

在页面上嵌入表单

现在,我们将选择“创建新页面”选项。

接下来,你需要输入页面名称并单击“Let’s Go!”。 按钮。

输入新登录页面的名称

然后,你将在 WordPress 内容区域中看到 WPForms 登录表单。

你现在可以预览表单、发布新页面并为你的客户显示自定义 WooCommerce 登录信息。

使用 WPForms 预览 WooCommerce 登录页面

另一方面,你还可以将 WooCommerce 登录表单添加到你的商店侧边栏。 这将使表单出现在所有产品页面上,并允许客户快速登录。

只需转到 WordPress 仪表板上的外观 » 小部件。 然后单击“+”按钮并添加 WPForms 小部件块。

然后,我们可以从下拉菜单中选择登录表单并输入主题。

将登录表单添加到侧边栏

完成后,单击“更新”按钮。

你现在可以访问我们的在线商店并在侧边栏中查看登录表单。

侧边栏预览中的登录表单

有关创建自定义 WooCommerce 客户登录页面的更多方法,请参阅我们关于如何创建自定义 WordPress 登录页面的教程。

你还可以查看有关 WordPress 中添加导航菜单的教程,以便我们可以将 WooCommerce 登录页面添加到你的网站导航中。

奖励:自定义 WooCommerce 结帐登录页面

WooCommerce 允许回访者从结帐页面登录。 假如你想自定义你的 WooCommerce 结帐登录页面,最好的办法是使用功能强大的渠道构建器插件,例如 WooFunnels。

WooFunnels 可让你自定义 WooCommerce 结帐页面、添加多级付款、添加一键追加销售等。

我们可以从数十种针对转换进行了高度优化的现成结帐模板中进行选择,最好的部分是我们可以使用流行的 WordPress 页面构建器对其进行自定义。

WooFunnels 支付示例

我们可以选择对多个渠道、销售页面和追加销售产品进行 A/B 测试。

WooFunnels 提供了 WooCommerce 漏斗每个阶段的详细分类。

WooCommerce 的 WooFunnels A/B 测试

它还附带 Autonami,这是一个强大的营销自动化插件,可让你自定义 WooCommerce 电子邮件并发送关于购物车放弃、欢迎系列等 WooCommerce 内容的滴漏电子邮件通知。

WooCommerce 的 Autonami 电子邮件库

假如你对发展 WooCommerce 商店很认真,这是我们推荐的基本工具之一。

我们希望本文能帮助你了解如何创建自定义 WooCommerce 客户登录页面。

© 版权声明
THE END
喜欢就支持一下吧
点赞5 分享
评论 抢沙发

请登录后发表评论