如何將 WordPress 社交登錄添加到 WooCommerce

已發表: 2022-04-18

您是否正在尋找一種方法讓您的社交媒體關注者輕鬆登錄您的 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!