如何将 WordPress 社交登录添加到 WooCommerce

您是否正在寻找一种方法让您的社交媒体关注者轻松登录您的 WooCommerce 网站？ 考虑将 WordPress 社交登录添加到您的网站。

通过将社交登录添加到 WooCommerce，您可以为网站访问者提供一种使用其社交媒体帐户凭据快速登录的方式。

但是，唯一的问题是 WooCommerce 默认不为您的电子商务网站提供社交登录选项。 它只允许您向网站访问者提供一个简单的登录和注册表单，要求他们使用新凭据创建一个新帐户。

好消息是，您可以使用 ProfilePress 之类的插件在 WooCommerce 网站上创建自定义登录和注册表单。

在本文中，我们将向您展示如何将社交按钮添加到 WooCommerce 登录表单，并用自定义的 ProfilePress 替换默认的 WooCommerce 按钮。

为什么要向 WooCommerce 添加社交登录？

作为在线商店所有者，您可能已经知道 WooCommerce 默认为网站访问者提供有限的选项来登录您的网站。

所有网站访问者都必须首先使用唯一的用户名和电子邮件地址在您的网站上注册，然后才能访问内容。 默认登录表单不仅看起来很基本，而且还为用户提供了有限的选项来快速注册和登录您的 WooCommerce 网站。

默认的 WooCommerce 表单并非旨在让您的用户使用他们的社交媒体帐户登录您的网站。 由于很多人在 Facebook、Twitter 或 Google 等平台上拥有社交媒体帐户，因此使用这些帐户详细信息登录您的商店变得更加容易。

以下是向您的 WooCommerce 网站添加社交登录有用的更多原因：

• 让所有类型的用户注册并登录您的网站。 由于大多数人已经准备好使用社交媒体帐户，因此您可以使您的 WooCommerce 网站更容易访问和欢迎所有类型的用户。 已注册 Facebook 帐户的用户只需点击几下即可轻松注册并登录您的网站。

• 提供友好的用户体验。 在您的 WooCommerce 网站上提供友好的用户体验可以鼓励人们进行更多购买并提高客户保留率。 想一想：如果客户很容易登录到您的 WooCommerce 网站并下订单，那么这些相同的客户下次返回您的在线商店的可能性就更高。

• 鼓励更多人报名。 通过提供简单的一键式注册和登录，您可以鼓励更多人在您的 WooCommerce 网站上注册。 这是建立您的电子邮件列表和增强您的电子邮件营销活动的好方法。

• 将您的社交媒体关注者转换为您网站上的注册用户。 如果您的企业在社交媒体平台上有大量追随者，那么将所有注意力转移到您的 WooCommerce 网站上可能是个好主意。 您可以通过在您的 WooCommerce 网站上提供社交登录按钮来做到这一点，以便您的受众可以更轻松地访问您的 WooCommerce 网站。

将社交登录添加到默认 WooCommerce 的最简单方法

虽然您可以使用许多插件在您的 WooCommerce 网站上添加社交登录按钮，但 ProfilePress 是唯一脱颖而出的解决方案。

ProfilePress 是一个专业的用户配置文件和会员插件，内置强大的表单构建器和高级自定义。

您可以为默认的 WooCommerce 登录和注册页面创建外观漂亮的自定义表单，而无需编写任何代码。 除此之外，您还可以创建会员目录并在您的 WooCommerce 网站的前端展示您的所有注册会员。 ProfilePress 最好的部分是您可以使用预先设计的模板快速创建自定义表单，然后根据您的需要对其进行个性化设置。

使用 ProfilePress 插件，您可以将社交登录按钮添加到自定义 ProfilePress 登录表单，并将其替换为“我的帐户”页面上的默认 WooCommerce 注册和登录表单。

使用 ProfilePress 将社交登录添加到 WooCommerce

在这里，我们将向您展示使用 ProfilePress 将社交登录添加到 WooCommerce 是多么容易。

对于本教程，您需要在 WordPress 网站上安装 WooCommerce 插件。 您还需要 ProfilePress 插件在您的 WooCommerce 网站上添加带有社交登录按钮的自定义登录表单。

步骤#1：安装并激活 ProfilePress

首先，获取 ProfilePress 插件并将其安装在您的 WordPress 网站上。

从 WordPress 管理面板导航到插件 → 添加新的，然后单击添加新按钮。 现在，上传 zip 文件并继续在您的 WooCommerce 网站上安装插件。

步骤#2：创建自定义登录表单

准备好 ProfilePress 插件后，您可以开始创建自定义登录表单，其中添加了社交媒体按钮。 确保首先通过导航到ProfilePress → 插件屏幕来启用社交登录插件。

完成后，转到ProfilePress → Forms & Profiles并单击Add New按钮。

选择拖放生成器并为您的自定义登录表单指定一个新标题。 现在选择一个模板开始编辑登录表单。 我们选择了Bash模板进行演示。

单击“选择模板”按钮后，它将自动将您重定向到表单编辑页面，您可以在其中添加额外字段以及社交媒体登录按钮。

步骤#3：添加社交登录按钮

您可以从此页面添加多个社交登录按钮并拖放添加或删除额外字段到您的登录表单。

您还可以编辑每个字段并自定义显示在 WooCommerce 网站前端的字段文本。

只需将鼠标悬停在字段上时单击设置图标，完成后单击应用更改按钮。 完成自定义字段后，您可以使用“表单设置”元框将社交媒体登录按钮添加到您的登录表单。

使用外观选项卡，使用社交登录按钮文本字段添加社交媒体帐户。 您还可以为自定义登录表单自定义提交按钮和文本字段占位符的按钮文本。

完成后，请确保单击“应用更改”按钮继续。

步骤#4：替换默认的 WooCommerce 登录表单

复制自定义登录表单短代码并导航到页面→添加新以在您的 WooCommerce 网站上创建新的社交登录页面。

只需使用简码块粘贴登录表单简码，然后单击发布按钮继续。 现在剩下要做的就是在设置中配置实际的社交登录，并将默认的 WooCommerce 登录表单替换为我们刚刚创建的表单。

要将我们创建的页面设置为我们网站上全局的默认 WordPress 登录页面，请导航到ProfilePress → 设置，然后使用“全局设置”选项卡下的“登录页面”下拉菜单选择新创建的登录页面。

要设置实际的社交登录过程，请导航到ProfilePress → 设置，然后单击社交登录选项卡以设置社交登录设置。

在这里，您可以为所有社交媒体帐户输入设置的 API 密钥，以便不同的社交应用程序与 ProfilePress 社交登录表单无缝集成。 输入社交媒体平台的 API 密钥后，单击保存更改按钮。

除此之外，您还可以通过转到“按钮”选项卡来更改社交登录按钮上的按钮文本。

完成后，请确保单击“保存更改”按钮。

替换 WooCommerce 我的帐户页面中显示的默认注册和登录表单； 单击WooCommerce选项卡并使用“我的帐户登录表单”和“我的帐户注册表单”下拉字段选择您新创建的社交登录页面。

根据您选择的表单主题，它在您的 WooCommerce 我的帐户页面上的外观如下。

您还可以在结帐时将默认的 WooCommerce 登录表单替换为带有社交登录的 ProfilePress 登录表单。 为此，只需选择包含登录表单的登录页面，其中包含我们之前使用Checkout Login Form下拉菜单创建的社交登录。

单击保存更改按钮继续。

单击社交登录按钮会将用户重定向到登录身份验证页面。

客户还可以使用他们的社交媒体帐户从 WooCommerce 结帐页面登录。

结论

向您的 WooCommerce 网站添加社交登录按钮是鼓励更多注册以及改善您网站上的用户体验的好方法。 这对于已经在其社交媒体帐户上拥有大量追随者的企业特别有用。

但是，在您的网站上提供社交登录时，您会受到默认 WooCommerce 功能的限制。 这就是为什么我们建议使用专用的自定义表单构建器插件（例如 ProfilePress）来替换您的 WooCommerce 网站上默认的、外观通用的登录表单。

寻找一种将社交登录添加到您的 WooCommerce 网站的简单方法？ 立即获取 ProfilePress！