[ad_1]
WooCommerce 登錄頁面對於許多商店來說已經足夠了，但它缺乏設計控制。 店主可能希望自定義 WooCommerce 登錄以更好地匹配他們的品牌。
WooCommerce 登錄頁面的工作原理
安裝 WooCommerce 後，該插件會自動在您的商店中生成一個「我的帳戶」頁面——該頁面使用 [woocommerce_my_account] 短代碼。
我的帳戶頁面是客戶的主要登錄頁面——您可以重命名它並將其添加到導航菜單中。
當客戶進入該頁面時，他們會看到一個簡單的表單，用於輸入登錄用戶名和密碼。
登錄後，他們會看到我的帳戶模塊，用於查看最近的訂單、下載、地址、帳戶詳細信息等。
帳戶詳細信息選項卡允許用戶調整他們的登錄信息。
此外，您可以將登錄/退出小部件添加到網站的任何小部件支持的區域，例如側邊欄或頁腳。
這為網站訪問者提供了相同的欄位，以使用他們的用戶名/電子郵件和密碼登錄。
您如何自定義默認的 WooCommerce 登錄表單？
如果您想自定義 WooCommerce 登錄表單，您有多種選擇：
我們鼓勵您探索上面列出的所有選項。 普通的 WordPress 用戶最好使用插件來替換默認的「我的帳戶」頁面或保留該頁面並進行一些自定義。 頁面構建器也很好用！
📌 請記住，幾乎每個頁面構建器和插件都需要高級訂閱才能自定義 WooCommerce 登錄。 這並沒有錯，但是對於本教程，我們將使用唯一可行的免費插件來自定義登錄。
如何自定義 WooCommerce 客戶登錄
Login/Signup Popup 插件提供了一種在前端自定義 WooCommerce 客戶登錄的免費方式。 該插件提供了一個內聯表單和一個彈出表單，用於添加到您網站的任何區域。 它還可以自動替換「我的帳戶」登錄/註冊表單。
要開始此過程，請在您的 WordPress 網站上安裝並激活插件。
- 啟用 WooCommerce 登錄/註冊表單
- 替換「我的帳戶」頁面表單
- 管理註冊/登錄表單欄位
- 自定義 WooCommerce 登錄/註冊頁面樣式
- 在前端檢查結果
- 在您網站的任何位置添加 WooCommerce 登錄/註冊表單
- 在前端查看結果
1. 啟用 WooCommerce 登錄/註冊表單
激活插件後，您現在應該會在 WordPress 管理面板中看到一個名為 Login/Signup Popup 的選項卡。 單擊該按鈕繼續。
在常規下，確保檢查以下選項卡：
- 啟用註冊
- 註冊時自動登錄用戶
- 處理重置密碼
這些通常都是在安裝 Login/Signup Popup 插件後激活的，但最好仔細檢查一下。 您可能還希望在此區域中配置其他一些設置，例如在某人註冊後選擇用戶角色，或添加登錄重定向頁面。
2.替換我的帳戶頁面表單
向下滾動到 WooCommerce 設置部分。
如果這些設置尚未打開，請激活它們：
- 替換 myaccount 表單
- 替換結帳登錄表單
這使您的過程更加輕鬆，因為該插件會自動將默認的「我的帳戶」頁面註冊/登錄表單換成您可以控制的新表單。 結帳登錄表單也是如此。
3.管理註冊/登錄表單欄位
在「常規」選項卡下，轉到頁面頂部。 單擊註冊欄位選項旁邊的管理鏈接。
這會將您帶到一個區域以自定義 WooCommerce 登錄和註冊表單。 您可以添加密碼、用戶名、姓名等欄位。 甚至還有一個可用的條款和條件欄位。
單擊左側的欄位。 當您單擊每一個時，您將看到唯一的欄位設置。
- 如果您想將其包含在您的登錄/註冊表單中，請將其標記為活動
- 通過更改佔位符、最大字元數以及使用 WooCommerce 計費和運輸信息自動填充等內容來自定義 WooCommerce 登錄欄位
一旦您對欄位及其設置感到滿意，請確保單擊「保存」按鈕。
4. 自定義 WooCommerce 登錄/註冊頁面樣式
選擇「設置」選項卡以打開更高級的選項來設計和自定義 WooCommerce 登錄和註冊。
🗏 在此頁面上，您可以：
- 顯示圖標
- 調整圖標大小
- 更改容器寬度
- 更改圖標和圖標背景顏色
- 選擇邊框顏色
- 為所有欄位設置下邊距
- 選擇輸入欄位的背景顏色
並繼續在頁面上向下滾動，因為還有其他幾個工具可以自定義 WooCommerce 登錄區域。
5.在前端查看結果
要查看結果，您必須退出管理員帳戶或打開隱身標籤。 然後，導航到您的 WooCommerce 商店的「我的帳戶」頁面。 您將看到一個新的自定義 WooCommerce 登錄表單，其中包含您決定的任何欄位和樣式。
註冊選項卡用作您的註冊表單，其中包含您選擇的所有欄位。 例如，在本教程中，我們選擇要求客戶輸入他們的名字和姓氏、電子郵件、密碼，並接受服務條款。
6. 在您網站的任何位置添加 WooCommerce 登錄/註冊表單
如果您願意，該插件還允許您將登錄表單添加到 WooCommerce 商店的其他部分。
返回登錄/註冊表單彈出窗口 > 設置。 選擇信息選項卡。 本頁詳細介紹了如何使用多種方法顯示 WooCommerce 登錄表單。
你可以：
- 使用鏈接、類或短代碼從菜單中打開登錄/註冊表單的彈出版本
- 使用簡碼顯示登錄表單的內聯或彈出版本
由於我們已經查看了 WooCommerce 登錄表單的內聯版本，讓我們探索如何顯示彈出表單。
轉到頁面、帖子或小部件區域（提供內容編輯器的任何地方）並添加簡碼塊。 將上一頁的彈出表單簡碼粘貼到該塊中。 單擊頁面/帖子的更新或發布。
⚠ 注意：如果使用經典 WordPress 編輯器，請將短代碼粘貼到可視化編輯器中以使其工作。
7.在前端查看結果
轉到您網站的前端版本 – 特別是您可以查看將登錄短代碼添加到頁面、帖子或小部件的區域。 確保您已退出管理員帳戶，以便查看錶單。
如果使用彈出表單，您會注意到登錄鏈接。 內聯表單只是在一頁上顯示整個表單。
單擊該鏈接後，將出現 WooCommerce 登錄表單的彈出版本，供客戶登錄其帳戶。 單擊「註冊」選項卡會為新客戶提供其他欄位以創建帳戶。 還有一些設置可以自定義表單上的圖像以更好地匹配您的品牌。
如何將社交登錄添加到 WooCommerce
自定義 WooCommere 登錄區域的一種更現代的方法是添加社交登錄按鈕。 這些最大限度地減少了客戶必須完成的輸入量，因為它從 Facebook 或 Twitter 等地方提取他們的當前信息以在您的網站上創建一個帳戶。
與自定義基本的 WooCommerce 登錄頁面類似，有許多選項可將社交登錄合併到您的 WooCommerce 網站中。 例如，本文前面的登錄/註冊彈出插件實際上以 9 美元的價格提供了一個社交登錄插件。
然而，要以最簡單、最便宜的方式將社交按鈕添加到您的 WooCommerce 登錄名，請安裝免費的 Super Socializer 插件。
- 啟用社交登錄功能
- 建立社交網路
- 為 WooCommerce 表單啟用社交登錄
- 測試您的 WooCommerce 社交登錄功能
1.啟用社交登錄功能
激活後，您會在 WordPress 管理菜單中找到一個 Super Socializer 選項卡。 打開它，然後選擇社交登錄選項。
選中啟用社交登錄框 – 它位於主控制部分下。
2. 建立社交網路
在「基本配置」選項卡中，檢查您希望包含在社交登錄中的社交網路。 對於每一個，您還需要粘貼 Key/ID 和 Secret 以激活登錄功能。
不幸的是，每個社交網路都有自己的方法來查找其 ID、密鑰和秘密。 幸運的是，您可以單擊紅色問號圖標來解釋查找每個問題的步驟。
例如，Facebook 允許您快速創建一個「應用程序」，它提供了一個應用程序 ID 和密碼。 無需了解 Facebook 應用程序的開發 – 只需生成應用程序（並且永遠不要刪除它）即可獲取 ID 和 Secret。
對於您想要的每個社交登錄，將 ID/密鑰和秘密粘貼回 WordPress。
完成後請務必單擊底部的保存按鈕。
您可能還需要添加從您的網站到應用程序的鏈接，但這取決於社交網路 – Facebook 需要此步驟。
3. 為 WooCommerce 表單啟用社交登錄
要在 WooCommerce 中啟用社交登錄按鈕，請轉到 Super Socializer 插件中的高級配置選項卡。
有四個框 📦 需要檢查（除非您不想讓社交按鈕出現在某些登錄表單上）：
- 在 WooCommerce 客戶登錄表單之前啟用
- 在 WooCommerce 客戶登錄表單中啟用
- 在 WooCommerce 客戶註冊表單上啟用
- 在 WooCommerce 結帳頁面啟用
4. 測試您的 WooCommerce 社交登錄功能
最後，是時候看看前端的社交登錄是什麼樣子了。 轉到 WooCommerce 中的「我的帳戶」頁面——我們已經為要添加到該頁面的社交登錄按鈕配置了設置。
您現在將看到您之前激活的每個社交登錄按鈕。 對於本教程，我們只打開了 Facebook，但還有其他多種可供選擇。 當有人點擊按鈕時，他們可以使用他們之前創建的社交憑證註冊或登錄您的 WooCommerce 網站！
⚠ 注意：默認樣式更適合常規 WooCommerce 登錄表單。 如果您已經自定義了登錄頁面，您可能需要添加一些自定義 CSS 以使事情看起來更漂亮。
自定義 WooCommerce 登錄名的其他方法
自定義 🎨 WooCommerce 登錄和註冊頁面的可能性是無窮無盡的，所以記住什麼是可用的總是好的。
👉 以下是其他可供考慮的選擇：
您對如何自定義 WooCommerce 登錄頁面還有任何疑問嗎？ 讓我們在評論中知道！