WooCommerce 帳戶社交登入外掛 – Social Login 快速註冊會員

WooCommerce 帳戶社交登入 外掛- Social login 快速註冊會員 內容綱要:

1. WooCommerce Social login 外掛安裝與設定

2. Facebook 社交帳戶連結設定方式

WooCommerce 帳戶社交登入 外掛對於電商網站管理者而言,是非常需要安裝的附加功能,WordPress 購物網站在會員系統中其實能夠客製化的選項並不多,只有單純的註冊、登入、使用者管理等,如果説想要提升顧客在網站中結帳流程的整體流暢度,安裝 WooCommerce Social Login 讓使用者在結帳或查看商品訂單狀況時可以一鍵使用 FB 帳號登入的方法,是一個不錯的選擇。

在本篇教學中將說明如何安裝 Social Login 外掛以及設定方式,另外這個外掛是 WooCommerce 官方製作,必須要付費後才能取的外掛安裝檔案,在下方有附上官方介紹購買連結,各位朋友可以自行參考是否要付費,或者在網路上搜尋資源。(購買此外掛鵠學苑不會得到任何分成,我們也是付費購買使用的,特此聲明。)

WooCommerce Social Login 官方介紹(購買):https://docs.woocommerce.com/document/woocommerce-social-login/

WooCommerce Social Login 外掛說明文件:https://docs.woocommerce.com/document/woocommerce-social-login/

WooCommerce WordPress 外掛技術支援論壇:https://wordpress.org/support/plugin/woocommerce/

• WooCommerce 社交登入外掛安裝與設定方式

第一步:點擊的連結後會進入到 WooCommerce Social Login 介紹頁面,在右側有購買選項,只要使用 WordPress 帳號登入後就透過信用卡付費,並取得檔案下載權限。

WooCommerce 帳戶社交登入

 

第二步:在 WordPress 後台安裝外掛介面中選擇下載的檔案將外掛上傳安裝。

WooCommerce 帳戶社交登入

 

第三步:安裝並啟用外掛後,在 WooCommerce 設定頁面中或多出 Social Login 的頁籤,選擇進入。

WooCommerce 帳戶社交登入

 

第四步:在基本設定中要選擇社交按鈕在哪裡顯示,預設是在結帳(check out)與我的帳號頁面(My Account),如果要讓使用者在登入時就能自行選擇是否使用社交帳號登入,那麼 My Account 這個項目一定要選擇。

WooCommerce 帳戶社交登入

 

第五步:以下說明圖中欄位:

  • Display “Link Your Account” button on Thank You page:如果網站有設置註冊完成後會跳轉感謝頁,勾選此項就會在感謝頁中顯示連結社交帳號的按鈕。
  • Checkout Social Login Display Text:在結帳頁面中顯示的社交按鈕文字,可修改為網站主要語言。
  • Non-Checkout Social Login Display Text:在非結帳頁面其他位置,社交按鈕顯示的說明文字,可修改為網站主語言。

WooCommerce 帳戶社交登入

 

如下圖所示,可以直皆將欄位中的文字翻譯為繁體中文。

WooCommerce 帳戶社交登入

 

第六步:SSL 是指如果網站有安裝加密憑證(https),那麼此項目就要勾選。在圖中下方可以各別設定要啟用哪些社群媒體來提供給使用者做網站登入,在下一小節會以 Facebook 設定做說明。

WooCommerce 帳戶社交登入

 

• 以 Facebook 示範如何連結社交帳戶

第一步: Facebook 開發人員網站中註冊好應用程式,會取的如下圖所標示編號與密鑰,將其複製起來。詳細申請流程可以參考:FaceBook 登入 / 註冊 網站會員功能 – 詳細設定步驟教學

WooCommerce 帳戶社交登入

 

第二步:在 Facebook 設定頁中,將 Enbale 勾選,並將編號與密鑰分別填入到 App ID 與 App Secret 欄位中。

WooCommerce 帳戶社交登入

 

第三步:Button text 的內容文字可以自行更改,最下方 Redirect URL 選項如果在 FB 申請應用程式時有確實將轉址網址填入,請直接勾選即可。

WooCommerce 帳戶社交登入

 

第四步:回到網站前台,在登入畫面中就會出現 FB 登入按鈕。

WooCommerce 帳戶社交登入

 

第五步:點選後會跳出給使用者的提示,網站將收到使用者的姓名與電子郵件地址,接者點選繼續按鈕,如果直接跳轉到已登入帳戶編輯畫面,就表示設定完成了。

WooCommerce 帳戶社交登入

 

第六步:對完全沒有註冊過網站的使用者,在結帳頁面會顯示可以使用社交帳戶登入的選項,也就是在第一小節中所說明的,必須要將 Checkout 加入到顯示按鈕選項,在結帳頁面才會顯示社交按鈕。

WooCommerce 帳戶社交登入

 

結語:

WooCommerce 社交登入外掛本身其實並不複雜,比較麻煩的是 Facebook 申請應用程式的步驟,比如說如果網站沒有 SSL 加密憑證,Facebook 是不會通過社交登入功能的申請,還有一些小細節與版本差異的設定,相對而言會比較麻煩,建議在設定時可以參考 FB 的開發人員說明網頁,操作起來才會比較順利。

今天的教學到這裡告一段落了,不要忘記在右側訂閱鵠學苑電子報,確保收到最新 WordPress 教學文章,如果有網頁設計相關需求,或者想了解最新網站知識,也可以到 鵠崙設計 做線上免費諮詢喔!我們下次的教學見~

WooCommerce 教學相關文章:

WooCommerce 訂單教學 – 變更訂單狀態與訂單內容修改操作方式

WooCommerce 教學(電子郵件設定) – 通知設定與進階選項

WooCommerce 教學(付款、帳號)- 付款方式、帳戶操作、隱私權設定

WooCommerce 教學(運送方式)-運送區域、選項、類別

WooCommerce 教學(一般設定) – 商店地址、貨幣選項

WooCommerce 教學(商品設定) – 商店頁面、庫存管理及可下載商品

網站架設知識推薦閱讀:

Site Kit WordPress Plugin – Google SEO 整合工具外掛介紹

Google 搜尋 新增簡易指令:before: & after 快速篩選搜尋結果

WordPress 市佔率再創新高,2019 年成長至 33.4%!

分享在 facebook
Facebook
分享在 skype
Skype
分享在 pinterest
Pinterest
分享在 email
Email
鵠學苑

鵠學苑

我們是由一群熱愛 WordPress 網站架設的同好所組成的團隊,希望可以將這套 頂尖的 CMS 管理系統推廣給想要架站的朋友們,並且能夠在過程中互相交流心得,讓網站架設過程變得更有效率!

訂閱電子報

立即訂閱鵠崙設計(鵠學苑)!我們將不定期發送架站教學文章、最新網站版型介紹以及網頁設計最優惠價格!

熱門文章

最新文章

相關文章

標籤雲

Sign up for our Newsletter

Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit

Scroll to Top