建立會員註冊功能

如果你的購物網站需要客戶註冊會員之後，才可以進行購買流程；或者我們希望客戶可以加入網站會員以利後續的客戶管理、維繫以及促銷等..。因此，我們需要為網站增設一個 "註冊頁面" ，包括了：登入/註冊 、登出 、我的帳號 頁面。

課程摘要
1
新增 "登入/註冊" 頁面
表格編輯
2
新增 "登出" 頁面
3
編輯主選單項目
步驟 1：編輯及設定主要頁面 (關於我們、最新消息、聯絡我們)
步驟 2：編輯及設定會員註冊相關頁面 (登入/註冊、登出、我的帳號)
4
其它設定
主選單優化 - 我的帳號
購物車圖標優化

新增 "登入/註冊" 頁面

  • 前往 WordPress 後台 >> 頁面 >> 新增頁面。
新增頁面
  • 1. 輸入頁面名稱： "登入/註冊"。
  • 2. 點擊 "發佈" 按鈕。
  • 3. 點擊 "Launch Thrive Architect" 按鈕。
新增登入註冊頁面
  • 選擇頁面模板，這裡選擇 "Completely Blank Page" 為範例。
新增登入註冊頁面-選取模板
  • 1. 點擊 "田"，將工具列打開。
  • 2. 在搜尋欄位中輸入 " login" ，此時會顯示出 "Login & Registration Form" 工具按鈕。
  • 3. 點擊並長按點擊 "Login & Registration Form" 工具按鈕，將它拖曳至編輯頁面裡面。
新增登入註冊頁面-拖曳工具
  • 選擇表格模板，這裡選擇 "Login 04" 為範例。
新增登入註冊頁面-選擇註冊表格

表格編輯

  • 1. 點擊表格。
  • 2. 點擊 "Edit Form Elements" 按鈕。
新增登入註冊頁面-編輯表格

編輯 Registration Form (註冊頁面)

  • 在編輯頁面下方，點擊下拉清單，選擇 "Registration Form"，開始編輯。
新增登入註冊頁面-編輯註冊頁面
編輯文字 (翻譯成中文)
  • 1. 基本上所有的表格內容皆已經設計好了，我們只需要將英文文字更改成中文即可 (點擊文字即可修改)。
  • 2. 左邊編輯欄位可以修改文字的顏色、字體、大小..等，可以依照自己需求進行編輯。
  • 3. 最後，記得點擊 "Done" 按鈕。
新增登入註冊頁面-修改文字成中文
基本設定

左邊編輯欄位 >> Main Options

  1. 1
    Type：選擇 "Both"。
  2. 2
    Default state：選擇 "Register" (註冊)，也就是說，當訪客進入此頁面時會呈現 Register (註冊) 表格。
  3. 3
    將表格置中 (或左、右)，也可調整表格大小。
新增登入註冊頁面-設定

Submission action(s) >> After successful login：客戶完成登錄之後的網頁呈現設定。

  1. 1
    選擇 "Redirect to Custom URL"。
  2. 2
    Target URL：輸入要將客戶導向哪個網頁 (建議輸入購物網站主頁)，也就是說，當訪客完成登錄時會將頁面導向購物網站主頁。
  3. 3
    Show success message：將英文字翻成中文，也就是說，當訪客完成登錄時會跳出一個訊息視窗 "已經登錄成功！"。

Submission action(s) >> After successful registration：客戶完成註冊之後的網頁呈現設定。

  1. 1
    選擇 "Redirect to Custom URL"。
  2. 2
    Target URL：輸入要將客戶導向哪個網頁 (建議輸入購物網站主頁)，也就是說，當訪客完成註冊時會將頁面導向購物網站主頁。
  3. 3
    Show success message：將英文字翻成中文，也就是說，當訪客完成登錄時會跳出一個訊息視窗 "註冊成功！"。
新增登入註冊頁面-行為設定

編輯 Login Form (登入頁面)

同上面步驟，點擊 "Edit Form Elements" 按鈕之後，在編輯頁面下方，點擊下拉清單，選擇 "Login Form"，開始編輯。

新增登入註冊頁面- login form編輯
編輯文字 (翻譯成中文)
  • 1. 基本上所有的表格內容皆已經設計好了，我們只需要將英文文字更改成中文即可 (點擊文字即可修改)。
  • 2. 左邊編輯欄位可以修改文字的顏色、字體、大小..等，可以依照自己需求進行編輯。
  • 3. 最後，記得點擊 "Done" 按鈕。
新增登入註冊頁面- login form 中文編輯

相同的方法步驟，我們可以完成另外三個頁面的編輯：Password Recovery Form (找回密碼頁面)、Password Confirmation Form (密碼確認頁面)、Already Logged In (已經登錄頁面)。

編輯 Password Recovery Form  (找回密碼頁面)

將英文的模板內容翻譯成中文內容。

新增登入註冊頁面- 重設密碼

編輯 Password Confirmation Form  (密碼確認頁面)

將英文的模板內容翻譯成中文內容。

新增登入註冊頁面- 重設密碼確認

編輯 Already Logged In (已經登錄頁面)

將英文的模板內容翻譯成中文內容。

新增登入註冊頁面- 已經登錄

新增 "登出" 頁面

  • 前往 WordPress 後台 >> 頁面 >> 新增頁面。
新增頁面
  • 1. 輸入頁面名稱： "登出"。
  • 2. 點擊 "發佈" 按鈕。
新增登出頁面
”

只要新增此登出頁面即可，不需要任何編輯。

編輯主選單項目

步驟 1：編輯及設定主要頁面 (關於我們、最新消息、聯絡我們)

依照上個課程的指引：客製化購物網站模板 >> 編輯商店主頁 >> 編輯 Header，進入 Header 編輯頁面。

”

在此我們選用 Header 為 WooCommerce 05 模板為範例：

Header - WooCommerce 05
  1. 1
    點擊中間主選單欄位。
  2. 2
    確認上方標籤為： Custom Menu。
  3. 3
    點擊並展開左方 Menu Source 欄位，選擇 "Custom"。
  4. 4
    點擊並展開左方 Menu Items 欄位。
Header_編輯主選單_Custom menu
  • 展開 Menu Items 之後，點擊 "修改符號" (下圖)。(若欄位不夠可以點擊上方 "Add new" 按鈕新增，或點擊 "修改符號" 右邊的 "垃圾桶"符號可以刪除不要的欄位。)
Header_編輯主選單_Custom_menu items
  • 輸入並設定主選單主要頁面：關於我們 (公司簡介)、最新消息、聯絡我們。
  1. 1
    輸入頁面名稱：關於我們 (公司簡介)。
  2. 2
    選擇此鏈結符號。
  3. 3
    輸入頁面網址。
  4. 4
    選擇 "Always"。
  5. 5
    最後，點擊 "APPLY" 按鈕。
Header_編輯主選單_Custom_menu items_關於我們
  • 同上述步驟，將最新消息、聯絡我們頁面，輸入並設定完成。
Header_編輯主選單_Custom_menu items_3pages

步驟 2：編輯及設定會員註冊相關頁面 (登入/註冊、登出、我的帳號)

  • 同上述步驟，繼續編輯及設定登入/註冊頁面，唯一不同之處為：在 Show when 欄位選擇 "Logged out"。(當未註冊的訪客進入網站時或已註冊的訪客登出時，則此欄位會呈現出來。)
Header_編輯主選單_Custom_menu items_signin
  • 繼續新增 Menu Items 欄位並編輯及設定我的帳號頁面。方法和編輯及設定登入/註冊頁面一樣，不同之處為：在此處的 Show when 欄位選擇 "Logged in"。(當顧客已經登入網站時，則此我的帳號欄位會呈現出來。)
Header_編輯主選單_Custom_menu items_my_account
  • 繼續新增 Menu Items 欄位並編輯及設定登出頁面。方法如下：
  1. 1
    輸入頁面名稱：登出。
  2. 2
    選擇最右方的 "錢幣" 符號，之後選擇 "Site" 和 "Logout" (告訴系統當顧客點擊 "登出"時，表示即將離開並登出)。
  3. 3
    勾選 "Redirect after successful logout" 並輸入頁面網址 (購物網站首頁)，此設定為：當已經登入的顧客點擊 "登出" 時，此時頁面會跳轉到指定的頁面，建議將此頁面設定為購物網站首頁即可。
  4. 4
    點擊 "Insert" 按鈕。
  5. 5
    在 Show when 欄位選擇 "Logged in"。(當客戶進入網站並已完成登入時，則此登出欄位會呈現出來。)
  6. 6
    最後，點擊 "APPLY" 按鈕。
Header_編輯主選單_Custom_menu items_logout

恭喜！會員註冊功能已經設定完成了！

當訪客進入到我們購物網站時，Header 呈現如下：

Header_編輯主選單_Custom_menu_completed_signup

當顧客登入時或訪客進入到我們購物網站並完成註冊後，Header 呈現如下：

Header_編輯主選單_Custom_menu_completed_login

其它設定

主選單優化 - 我的帳號

當顧客已經註冊並登入成功後，如何在 Header 顯示客戶專屬的名稱？

Header_編輯主選單_my_account_first_name

方法如下：

前往 WordPress 後台 >> Thrive Dashboard >> Thrive Theme Builder >> Templates >> Default WooCommerce Shop，點擊 "Edit" 後進入 Header 編輯頁面。

(可以參考上個課程：客製化購物網站模板 >> 編輯商店主頁 >> 編輯 Header，進入 Header 編輯頁面。)

  1. 1
    點擊並框選我的帳號文字部分。
  2. 2
    點擊我的帳號欄位左上方 "鑰匙" 圖標，使此圖標變為紅色。(此用意為：只單獨修改此欄位，而其它欄位不變。)
  3. 3
    點擊並展開 "錢幣" 圖標。
  4. 4
    在 Dynamic text 第一個欄位選擇 "User data"，第二個欄位選擇 "Wordpress user first name"。
  5. 5
    點擊 "Insert" 按鈕。
Header_編輯主選單_my_account

當顧客已經註冊並登入成功後，如何在 Header 顯示客戶專屬的頭像 + 名稱？

Header_編輯主選單_my_account_image_first_name

方法如下：

  • 進入 Header 編輯頁面。
  1. 1
    點擊我的帳號欄位。
  2. 2
    點擊並展開 "Display" 欄位選項，選擇 "Image and text"。
Header_編輯主選單_my_account_image_first_name 2
  • 編輯頭像圖片。
  1. 1
    點擊頭像圖片。
  2. 2
    在 "Main Options" 裡，點擊右方的 "Dynamic" 標籤，之後在 "Dynamic source"選擇 "User Image"。
  3. 3
    調整頭像圖片大小及高度。
Header_編輯主選單_my_account_image_first_name 3
  • 調整頭像圖片為圓形。
  1. 1
    在 "Borders & Corners" 裡，調整下方的數值為 16 (大於 16 即會呈現圓形)。
  2. 2
    最後，記得按下 "SAVE WORK" 按鈕。
Header_編輯主選單_my_account_image_first_name 4

恭喜！已完成設定了！顧客登入後成果如下：

Header_編輯主選單_completed

購物車圖標優化

  • 一樣在 Header 編輯頁面，點擊 "購物車" 圖標。
Header_編輯主選單_cart
  • 在左邊的編輯欄位中，選擇你想要的 "購物車" 圖標呈現方式。

Mini Cart Options (比較常用到的編輯功能)

  • Color：選擇顏色
  • Alignment：選擇圖標位置 (置左、置中、置右)
  • Size：選擇圖標大小
  • Icon：只顯示圖標；Amount：顯示圖標 + 金額；Text：顯示圖標 + 文字
  • Show Items on：Click >> 點擊後顯現購物車明細；Hover >> 滑鼠移至圖標時顯現購物車明細
  • Position：Undermeath >> 購物車明細顯現於下方；From the right >> 購物車明細顯現於右方；From the left >> 購物車明細顯現於左方
Header_編輯主選單_cart 2

更換購物車圖標

  • 在 Mini Cart Options 編輯欄位中，點擊 "Edit Design" 按鈕。
Header_編輯主選單_cart icon
  1. 1
    點擊 "購物車" 圖標。
  2. 2
    點擊並展開 "購物車" 圖標列表。
Header_編輯主選單_cart icon 2
  • 選擇 "購物車" 圖標，最後點擊 "SELECT" 按鈕。
Header_編輯主選單_cart icon 3

恭喜！已完成 "購物車" 圖標的優化！成果如下：

Header_編輯主選單_cart icon 4
 我已經完成課程
{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
>