重點整理
WooCommerce 官方商店販售的 Social Login（開發商 SkyVerge）可以在「我的帳號」登入頁和結帳頁加入 Facebook、Google 等社群帳號登入按鈕，2026 年 10 月價格為一年 US$99，版本 2.18.3。支援的平台有 Facebook、X（Twitter）、Google、Amazon、PayPal、LinkedIn、Disqus，不包含 LINE。設定分兩步：在 WooCommerce 設定裡決定按鈕顯示位置，再到各平台的開發者後台建立應用程式，把 App ID 與密鑰填回外掛。
購物網站的會員註冊表單填得越多，顧客越容易在結帳前放棄。加入社群帳號登入後，顧客點一下 Facebook 或 Google 按鈕就能建立帳號、查詢訂單，結帳時也不用重新輸入電子郵件。這篇示範 WooCommerce Social Login 的安裝與設定，並以 Facebook 為例說明如何串接。
先選對外掛：Social Login 適合誰？
這是付費外掛，好處是由 WooCommerce 官方商店販售、與「我的帳號」「結帳」頁面整合完整，顧客也能在「我的帳號」裡自行連結或取消連結社群帳號。如果你需要 LINE 登入，或想先用免費方案，就要改用其他社群登入外掛；選擇時先到 WordPress.org 確認外掛仍在維護、近期有更新。
官方介紹與購買頁：Social Login for WooCommerce；說明文件：Social Login 文件。
安裝與基本設定
步驟一：購買並下載外掛
在官方購買頁選擇方案（一年或兩年）並付款，完成後就能在 WooCommerce.com 帳號下載外掛壓縮檔。
步驟二：上傳並啟用外掛
到 WordPress 後台「外掛 → 安裝外掛 → 上傳外掛」，選擇下載的壓縮檔安裝並啟用。
步驟三：打開 Social Login 設定頁
啟用後，到「WooCommerce → 設定」會多出 Social Login 分頁。
步驟四：選擇按鈕顯示位置
Display Social Login on 決定社群登入按鈕出現在哪裡，可選結帳頁（Checkout）、我的帳號（My Account）、結帳頁上方提示（Checkout Notice）等。要讓顧客在登入頁就能用社群帳號登入，My Account 一定要勾選。
步驟五：修改按鈕上方的說明文字
- Display “Link Your Account” button on Thank You page：在訂單完成的感謝頁顯示「連結帳號」按鈕，讓剛下單的顧客順手綁定社群帳號。
- Checkout Social Login Display Text：結帳頁按鈕上方的說明文字。
- Non-Checkout Social Login Display Text：結帳頁以外位置的說明文字。
預設是英文，可以直接改成中文，例如「使用社群帳號快速登入」。
步驟六：強制 SSL 並選擇要啟用的平台
網站已經使用 HTTPS 的話，勾選 Force SSL for all Providers，讓所有回呼網址都走 HTTPS（Facebook、Google 現在都要求 HTTPS）。下方 Providers 清單列出所有支援的平台，可以拖曳調整按鈕順序，點平台名稱進入各自的設定。
以 Facebook 為例串接社群帳號
步驟一：在 Meta 開發者後台建立應用程式
開始前先確認網站已啟用 HTTPS，並準備好隱私權政策與服務條款頁面的網址。接著用 Facebook 帳號登入 Meta for Developers（第一次使用要先註冊為開發者）：
- 點「我的應用程式 → 建立應用程式」，填入應用程式名稱（可用網站或公司名稱）與聯絡電子郵件。詢問「使用案例」時，依 WooCommerce 官方文件選「其他」，類型選「消費者」，不需要連結企業管理組合。
- 在應用程式主控板的產品清單找到「Facebook 登入」按「設定」，快速入門精靈可以略過。
- 到「應用程式設定 → 基本資料」填寫：應用程式網域（網址是 https://www.abc.com 就填 abc.com）、隱私政策網址（必填）、服務條款網址、類別；下方按「新增平台 → 網站」填入網址，最後按「儲存變更」。
- 同一頁上方的應用程式編號（App ID）與應用程式密鑰（App Secret）就是要貼回外掛的資料。密鑰要按「顯示」並輸入 Facebook 密碼才看得到，請妥善保存。
Meta 後台介面改版頻繁，下圖是早期畫面，欄位位置以實際後台為準，但上面這幾個欄位名稱一直沿用。
步驟二：填入 App ID 與 App Secret
回到 Social Login 的 Facebook 設定，勾選啟用，把編號與密鑰分別填入 App ID 與 App Secret。
步驟三：修改按鈕文字並確認回呼網址
登入按鈕與連結按鈕的文字可以改成中文。設定頁會顯示這個網站的回呼網址（Redirect URL），要把它填到 Facebook 應用程式的「有效的 OAuth 重新導向 URI」，並確認應用程式的網域設定和網站網域一致，否則登入時會出現網域驗證錯誤。
這個欄位在 Meta 後台的「Facebook 登入 → 設定」，其他選項維持預設即可。Facebook 會嚴格比對重新導向網址，差一個字元、少了 https 或 www 不一致都會登入失敗，一定要從外掛設定頁整串複製，格式類似 https://你的網域/?wc-api=auth&done=facebook。
步驟四：到前台測試登入
登出後回到網站的「我的帳號」頁面，就會看到 Facebook 登入按鈕。
點選後，Facebook 會提示網站將取得使用者的姓名與電子郵件，按繼續後如果直接進入已登入的帳號頁面，就代表設定成功。
如果只有你自己登入得了、其他人看到錯誤，是因為 Meta 應用程式還在「開發中」模式，只有管理員與測試人員能登入；到 Meta 後台把應用程式切換為「上線」，一般顧客才能使用。
步驟五：確認結帳頁也有按鈕
還沒登入的顧客進入結帳頁時，也會看到社群登入選項。如果結帳頁沒有出現，回到步驟四檢查是否有勾選 Checkout。
常見問題
WooCommerce 社群登入有免費外掛嗎？
有。WordPress.org 上有免費的社群登入外掛，例如 Nextend Social Login（2026 年仍持續更新），可以和 WooCommerce 的我的帳號頁整合；官方的 Social Login 是付費外掛，優點是與 WooCommerce 結帳、感謝頁整合較完整。
WooCommerce Social Login 可以用 LINE 登入嗎？
不行，官方文件列出的平台只有 Facebook、X（Twitter）、Google、Amazon、PayPal、LinkedIn、Disqus。台灣顧客常用 LINE 的話，要另外找支援 LINE Login 的外掛，或請工程師直接串接 LINE Login API。
WooCommerce「我的帳號」頁面在哪裡設定？
「我的帳號」頁面在「WooCommerce → 設定 → 進階 → 頁面設定」指定。Social Login 會把按鈕加到這個頁面的登入表單，所以要先確認我的帳號頁面已正確設定。
結語
WooCommerce Social Login 本身設定不複雜：選好按鈕位置、改好中文說明文字，再逐一串接要用的平台。比較花時間的是各平台開發者後台的申請，網站一定要先有 HTTPS，回呼網址和網域也要設定一致。如果需要 LINE 登入，記得改選支援 LINE 的外掛。