WordPress 購物網站教學 2024｜如何自己架設 WooCommerce 電商網站賣東西
你想知道如何用最簡單、最低的成本的方法，快速架設出一個可以透過網路賣東西的購物網站嗎？
在這個免費的《WordPress 購物網站架設教學》，我會一步步帶你從零開始在網路開店。從架站平台推薦、WordPress 主機註冊、域名註冊、WooCommerce 電商外掛設定，到網站設計與金流 / 物流設定，都會有詳盡的解說。
不用任何經驗、不用會任何程式語言，任何架站新手都可以輕鬆上手！
我會不藏私地免費把如何架設購物網站的方法鋪成階梯。
你只要跟著這篇文章的 6 個章節 操作，你的 WordPress 購物網站將會擁有 以下12 大功能：
- 購物車
- 販賣實體商品 / 數位服務
- 信用卡付款 / 超商代碼繳費
- 超商取貨 / 宅配
- 優惠券 / 折扣碼
- 自動計算稅金
- 自動寄出 Email 訂單通知
- 客戶會員帳號登入
- 商品評價
- 部落格
- 客製化排版設計
- 響應式網頁設計
如果你偏好用影片學習，歡迎觀看下方 YouTube 影片。
如果你喜歡透過圖文學習，請繼續往下閱讀吧 ！
圖文版會比較詳細、方便快速瀏覽，還會持續更新與補充內容。
#1 架設 WordPress 購物網站流程與介紹
在這個《WordPress 購物網站架設教學》我會跟你分享：如何從零開始架設一個設計好看而且功能強大的購物網站。
讓你透過網路販賣實體或數位商品，發展你的網路事業。
在這篇圖文教學，我會示範架設一個賣家具的購物網站。
👉 範例購物網站
正式的教學開始之前，我來和你介紹做出來的購物網站有什麼功能，再來講解整個架站流程跟費用。
WordPress 購物網站：12 個強大功能
第 1 項功能：購物車。
你的購物網站會有商品彙整頁面。
客人點選「商品」後，會進到單項商品頁面。
點擊「加入購物車」按鈕後，就可以到購物車頁面進行「前往結帳」。
第 2 項功能：販售實體商品 / 數位服務。
你的網站除了能像各大電商平台販售實體商品。
還可以販售數位服務，像是線上諮詢服務。
第 3 項功能：信用卡付款 / 超商代碼繳費。
客人可以在網路使用各大銀行信用卡，進行刷卡付款。
客人也可以選擇在下單後，到各大超商的機台輸入代碼，以現金繳費。像是 7-11 的 ibon、全家的 FamiPort … 等等。
第 4 項功能：超商取貨 / 宅配。
客戶在結帳後，可以選擇超商取貨或是宅配：
- 超商取貨：各大超商都有支援。
- 宅配：可以選擇黑貓宅配、郵局宅配 … 等等。
第 5 項功能：優惠券 / 折扣碼。
你的購物網站可以設定優惠券功能。
客人只要在購物車輸入你自訂的折扣碼，就可以套用優惠。
第 6 項功能：自動計算稅金。
你的購物網站可以擁有自動計算稅金的功能。
客戶在總計裡就能看見購買的商品含有多少營業稅。
第 7 項功能：自動寄出 Email 訂單通知。
客人在下單後，網站會自動寄出 Email 訂單通知，知道有成功下單可以讓顧客安心許多。
第 8 項功能：會員帳號登入。
客人在第一次結帳時，能讓他們註冊購物網站會員，結帳後就能在會員系統裡即時瀏覽訂單狀態。
第 9 項功能：商品評價。
許多網購的人在下單前會習慣參考評價，我們的購物網站也能開啟商品評價功能，增加客人的下單意願。
第 10 項功能：部落格。
你的購物網站會有部落格功能可以發佈文章，讓客人能夠更了解你或你的商品。
第 11 項功能：客製化排版設計。
你的購物網站可以進行客製化排版設計，能夠隨時自訂喜歡的排版、顏色 … 等等。
第 12 項功能：響應式網頁設計。
你的購物網站擁有響應式網頁功能，在電腦裝置、平板、手機等行動裝置都能自訂不一樣的排版設計，讓客人在使用不同裝置瀏覽購物網站都能保持美觀。
有這樣強大功能的客製化網站，花錢請別人做 (外包) 可能要花費 10 萬元以上，自己架設的話，就能省下一大筆錢。
你可能會覺得：「要有這些功能應該很難透過自學達成吧？」
但其實真的不會！
只要跟著這篇圖文教學一步一步操作，點點看、玩玩看，相信你一定可以架設好屬於自己的購物網站。
自己架設網站需要什麼東西？
一開始我會先跟你分享，用 WordPress 架設購物網站前需要知道的事情。
如果你想直接開始架設購物網站可以點擊下方按鈕。
架設網站主要需要 3 個東西，分別是：架站軟體 、域名、主機。
如果把網站比喻成一棟房子的話：
- 主機：是可以蓋房子的土地。
- 架站軟體：是可以幫助你快速蓋房子的工人。
- 域名：是房子的門牌。
主機，也稱作伺服器，是存放網站資料的地方
我們需要租用主機，才能把 WordPress 安裝在主機上，儲存網站上的文字、圖片、外掛 … 等等。
研究顯示：購物網站只要多 1 秒的加載時間，就會讓轉換率下降 7%。
也就是說：網站速度過慢、會讓你的收入變少。
所以在這個教學中，我們會使用速度超快的 Cloudways 主機來架設購物網站。
架站軟體，也就是架設網站的平台
在這個教學裡，我們會使用免費的 WordPress 軟體作為網站架設平台 (電商平台)。
全世界有 43.2% 的網站都是使用 WordPress 架設的，而且這個數字還在逐年升高中！
⭐ 更多免費筆記
域名，就是網站的網址
我們需要註冊一個自己的域名，像 Apple 公司的網站的域名就是 Apple.com。
在這個教學中，我們會去 Namecheap 註冊域名，因為 Namecheap 的域名註冊費跟續約費都很便宜。
你可以跟著我一起去 Namecheap 註冊域名，並使用 Cloudways 主機來架設購物網站，這樣我們的介面會是一樣的，方便你跟著同步操作。
當然，你也可以選擇自己喜歡、習慣的域名或主機。
但要注意，這樣我們操作介面就會有點不一樣！
⭐ 更多免費筆記
域名是什麼 (詳細版)
WordPress 購物網站架設費用
備註：以下的美金匯率，我都先用 30 元台幣做估算。
剛剛有提到，自己架設網站主要需要：架站軟體、域名、主機。
架站軟體 (WordPress) 的費用
這篇教學使用的架站軟體 WordPress 是免費的，它是由世界各地的專業人士共同開發、貢獻的，不需要任何費用。
域名 (Namecheap) 的費用
這篇教學我們會去 Namecheap 網站註冊。
- 域名註冊費：是第 1 年的費用。是 13.98 美金、大約 419 台幣。
- 域名續約費：是第 1 年後，每年的續約費用。每年 14.58 美金，大約是 437 台幣。
在 第 2 章，我也會跟你分享讓「域名註冊費」變更便宜的方法。
主機 (Cloudways) 的費用
這篇教學我們會使用速度快的 Cloudways 主機 來架設購物網站。
費用最低是每個月 11 美金，大約 330 台幣。
我會建議：先使用最便宜的方案開始架設購物網站。
等你的購物網站流量變大後，Cloudways 主機很方便，可以直接在後台做階段性升級。
這樣在學習、架設購物網站的階段，或是網站的初期階段就不會花到冤枉錢，我們可以用多少、花多少。
在 第 2 章，我也會跟你分享我去跟 Cloudways 公司爭取的「諾特斯觀眾專屬優惠」，讓我們的主機費用可以再便宜一點！
後面的章節我也會陸續跟你分享，我研究過後發現免費且功能強大的軟體和服務，像是：網站主題、電商外掛、頁面編輯器、Email 服務… 等等。
希望能讓你用最低的必要成本，和我實驗後發現的優質服務來架設購物網站！
WordPress 購物網站架設流程
這個《WordPress 購物網站架設教學》共有 6 章。
第 1 章，介紹與流程
我會和你介紹我的教學與流程，也就是你現在看到的內容。
第 2 章，開始架設網站
我會帶你註冊 Namecheap 域名、租用 Cloudways 主機，然後做基本的 WordPress 網站設定。
第 3 章，匯入購物車系統
架設 WordPress 購物網站我推薦安裝 WooCommerce 電商外掛。
我們會安裝免費的 Blocksy 主題，然後匯入含有 WooCommerce 外掛的購物車模板，這樣我們就可以快速擁有一個購物網站的雛型！
之後再根據自己的需求與喜好，變更購物網站的排版設計。
第 4 章，設定購物網站
我會帶你設定購物網站的功能，包含：如何在 WooCommerce 裡面加入自己的商品、更換購物網站貨幣、自動計算稅金、如何設定優惠券、自動寄出 Email 訂單通知 … 等等。
第 5 章，設計網站外觀
我們要設計屬於自己的網站外觀，包含：客製化頁面內容、頁首、選單、Logo、頁尾、商品頁面 … 等等，並和你介紹響應式網頁設計。
第 6 章，設定金流與物流
我會和你一起設定綠界金流與物流，這樣就能開始運作購物網站，並實際收到款項、出貨了！
為什麼要製作免費的教學？
很多人會把這樣的教學當作付費課程販售。網路上有的一堂課可以賣到九千元以上。
但我也曾受到很多人幫忙才學會架設購物網站，所以我想把這樣的內容製作成免費課程，跟你分享。
如果你想要支持我的話，歡迎你透過這個網站提供的連結，購買架設網站需要的軟體與工具，這樣的話我就能獲得一些收益，這可以支持我持續製作更多像這樣的免費教學。
有些軟體或工具，有我特地去幫「諾特斯頻道觀眾」爭取的專屬優惠折扣，希望這也對你有幫助。
好，那我們開始架設購物網站吧！
#2 開始架設 WordPress 網站
這是《WordPress 購物網站架設教學》第 2 章，開始架設網站。
順序是這樣的：
我們要先架設好 WordPress 網站，再一步一步、把它變成 WordPress 購物網站。
所以在這一章，我會跟你講解前面這塊，也就是「先架設好 WordPress 網站」的部分。
我先快速說明架設 WordPress 網站的流程，總共有 3 大步驟：
- 第 1 大步驟，租用 Cloudways 主機。
- 第 2 大步驟，註冊 Namecheap 域名。
- 第 3 大步驟，設定 WordPress 網站。
第 1 大步驟：租用 Cloudways 主機
首先，我們要先了解 Cloudways 是什麼？
Cloudways 是一個雲端主機的代管平台，我們可以透過 Cloudways 租用主機，並在主機上 安裝 WordPress。
Cloudways 會幫我們管理一些高階、速度快的主機，像是：DigitalOcean、Google Cloud Platform… 等等。
我們可以不用程式碼就能設定好主機，Cloudways 還會自動幫我們優化主機的配置、讓主機順暢運作。
為了方便，我就把透過 Cloudways 這個平台租用的主機，直接稱為 Cloudways 主機。
步驟 1：創建 Cloudways 帳戶
我們要先點擊下面的藍色按鈕「免費試用 Cloudways 主機」進到 Cloudways 首頁，註冊一個 Cloudways 帳戶。
註冊時輸入折扣碼「NOTES」，取得專屬前 2 個月 7 折優惠！
在這裡先跟你分享一個好消息：
註冊時，只要輸入折扣碼「NOTES」就可以在試用期結束、決定租用 Cloudways 主機的時候，享有我為大家爭取到的「諾特斯觀眾專屬優惠」，前 2 個月可以打 7 折！
現在 Cloudways 主機可以免費試用 3 天，還蠻不錯的，試用過真的覺得好用，再付費租用主機就好。
接下來，我們點擊右上角的「START FREE」(免費開始) 按鈕。
這邊要填寫自己的基本資料，你可以對照著下圖的中文翻譯填寫。
在「First Name」我們要填名。
在「Last Name」我們要填姓。那我們要怎麼翻譯中文姓名呢？
你可以點擊連結到 外文姓名中譯英系統 去做翻譯，我以「諾特斯」這個名字舉例。
「姓氏」的欄位，輸入「諾」。
「名字」的欄位，輸入「特斯」，然後按「翻譯」。
這個網站提供的 4 種翻譯都是可以使用的，選一個自己看得順眼的就可以了！
我就使用「漢語拼音」的翻譯舉例：
先複製「姓」，貼在 Cloudways 註冊頁的「Last Name」(姓氏) 欄位。
再複製「名」，貼在註冊頁「First Name」(名字) 的欄位。
再來依序填寫「Email」(電子信箱) 欄位，並在「Password」(密碼) 欄位設定自己的密碼。
「I would best describe myself as」欄位，因為我們租用 Cloudways 主機的目的是要架設購物網站，所以我們選「Ecommierce」(電子商務)。
「My monthly hosting spending is」欄位，我們選每個月大概會花 0 到 50 美金。
之後我們點開「Got a Promo Code」(有折扣碼嗎) 的欄位，就能輸入折扣碼「NOTES」。
這樣我們就能在試用期結束、決定租用 Cloudways 主機時，取得「諾特斯觀眾專屬優惠」前 2 個月可以打 7 折！
最後記得勾選「同意條款」，再點「START FREE」(免費開始) 送出註冊資訊。
接下來，我們要到 Email 信箱去收 Cloudways 寄的驗證信。
點進驗證信，我們點「Activate Account」(啟用帳戶)。
Cloudways 會要求我們做手機驗證，在「Enter your phone number」的欄位輸入手機號碼，之後按「SEND SMS」(傳送簡訊) 接收驗證簡訊。
輸入我們收到的驗證碼，按「VERIFY」(驗證) 就完成我們的手機驗證了！這樣就代表我們正式創建好 Cloudways 帳戶囉！
步驟 2：選擇 Cloudways 方案，並安裝 WordPress 軟體
我們可以看到左上角有個 APPLICATION & SERVER DETAILS (應用程式與伺服器詳細資訊)。
點開「WordPress」可以選擇要安裝的 WordPress 版本。
備註：
在看到這個教學的你，可能會看到比 6.2.2 更高的版本，記得選「最新的版本」就對了！
後面這三項，我們「保持預設」就好。
接下來我們要選 Cloudways 幫我們代管的主機，下圖這 5 款主機速度都蠻快的。
而我自己的網站 NotesStartup.com (也就是你正在瀏覽的網站) 就是使用 DigitalOcean 主機，用起來感覺是蠻不錯的，所以我推薦可以選 DigitalOcean 主機。
你也可以另外開一個視窗，點擊這個網站的其他頁面和文章，來體驗看看使用 Cloudways 代管的 DigitalOcean 主機 的實際速度。
接下來「SERVER SIZE」(伺服器大小) 我們不要用預設的 2 GB Premium，因為 2 GB Premium 比較貴，每個月要 28 美金，新手用 1 GB 就已經綽綽有餘了，每個月也只要 11 美金就好。
所以我們要記得把它改成「1 GB」。
提醒視窗也有寫 1 GB 的方案包含什麼東西：
- RAM (內存)：1 GB
- 儲存空間：25 GB
- 頻寬：1 TB
- 處理器：1 核
接下來我們要選主機的位置。
主機的位置跟你的網站觀眾越近，網站讀取的速度就會越快！
因此你的目標觀眾跟我一樣在台灣的話，這邊選「新加坡」會是最快的！所以我們點開「LOCATION」(地點)，然後找到「Singapore」(新加坡)。
選好之後就可以在頁面下方看見顯示的價格，1 個月是 11 美金，也就是大約 330 台幣，而 Cloudways 前三天是可以免費試用的，所以我們還不會被收費。
最後我們按「LAUNCH NOW」(現在發佈)，就會自動安裝 WordPress 軟體了！
提醒你，這個教學我們安裝的是 WordPress.org 的軟體。
如果你不清楚 WordPress.com 跟 WordPress.org 的差別的話，可以看一下我過去製作的比較影片，這裡會詳細地解釋 WordPress.com 和 WordPress.org 的差別！
等安裝時間跑完，就代表我們已經成功在 Cloudways 主機上安裝好 WordPress 軟體了！
接下來，我們來了解一下 Cloudways 的介面。
頁面左上角有個「切換器」，可以切換 SERVERS (伺服器) 和 APPLICATIONS (應用程式)。
在切換器點一下，我們可以從伺服器切換到應用程式。
應用程式的頁面，可以看到我們安裝的 WordPress 軟體。
再點一下切換器，我們又可以從應用程式切換到伺服器。
伺服器的頁面，可以看見我們剛剛安裝完的 DigitalOcean 主機。
步驟 3：開啟 WordPress 網站前台 / 後台
什麼是網站前台？什麼是網站後台呢？
- 前台，是「網站訪客」會看到的頁面，也就是我們的購物網站。
- 後台，是「網站管理員」才能看到的頁面，也就是我們的 WordPress 後台。
那我們要如何開啟網站的前台呢？
我們先把切換器切換到「APPLICATIONS」(應用程式) ，然後點 WordPress LOGO 旁邊的「Your Application」(你的應用程式)。
接著找到畫面中央的 APPLICATION URL (應用程式網址) ，點旁邊的「圖標」，就可以進到我們的網站前台。
這就是網站訪客會看到的畫面。
現在只有 WordPress 預設的空白頁面，我們之後會再把它變得更好看、更強大。
那我們要如何登入 WordPress 後台呢？
我們回到剛剛的 Cloudways 後台，找到畫面中央的 ADMIN PANEL (管理員面板)，點旁邊的「圖標」就可以進到 WordPress 後台的登入頁面。
這邊要填寫使用者名稱跟密碼，那我們的使用者名稱跟密碼是什麼呢？
我們再回到剛剛的 Cloudways 後台，ADMIN PANEL (管理員面板) 下的「Username」就是使用者名稱，「Password」就是密碼，我們可以點一下複製起來。
然後貼到 WordPress 後台的登入介面，按「Log In」(登入)。
接著就能進入網站管理者才能看到的頁面，也就是 WordPress 網站的後台，這樣我們就學會如何開啟購物網站前台和 WordPress 後台了！
步驟 4：設定 Cloudways 主機的付款方式
登入 Cloudways 後台，頁面上方有寫一行英文：「Your trial will expire in 2 days 22 hours」這代表說我們的 Cloudways 主機「試用時間剩下 2 天又 22 小時」。
所以我們可以在 Cloudways 提供的 3 天免費試用期限內，盡情地測試 Cloudways 主機。
當我們確定要租用主機的時候，就能按下旁邊的「UPGRADE MY ACCOUNT」(升級我的帳戶)，把主機從試用版升級成正式版。
但我們需要注意的是：如果在試用期限內忘記升級，網站就會被刪除！
所以當你確定要使用 Cloudways 主機的時候，就可以點擊「UPGRADE MY ACCOUNT」(升級我的帳戶)，填寫支付主機費用的付款資料。
當然，你也可以先跳過這個步驟往後跟著做，只是一定要記得：3 天試用期內要回來填寫付款資料！
那我現在來示範設定付款資料，你可以照著圖片上面的中文翻譯一邊填寫。
點「UPGRADE MY ACCOUNT」(升級我的帳戶) 按鈕。
- 「Card Number」填卡號。
- 「Card Holder Name」填持卡人姓名。
- 「Card Expiry Date」填卡片到期日期。
- 「CVC / CVV / CID」填三碼安全碼。
- 「Address」填地址。
那我們要怎麼把中文地址翻譯成英文地址呢？
我們可以使用 中文地址英譯 系統，你可以點擊連結開啟頁面。
往下滑，要填寫自己或公司的中文地址，那我這邊就舉臺北 101 為例：
- 「縣市」選臺北。
- 「鄉鎮市區」選信義區。
- 「道路」選信義路五段。
- 「號」填 7 號。
最後輸入驗證碼，按「查詢」，頁面下方就會顯示我們中文地址的英文翻譯了！
我們可以按 Ctrl + C (Windows 系統) 或 Cmd + C (Mac 系統) 來複製文字，再用 Ctrl + V (Windows 系統) 或 Cmd + V (Mac 系統) 來貼上。
把「Taipei City」前面的英文都複製起來，貼在「Address」(地址) 欄位。
把「Taipei City」複製起來，貼在「City」(城市) 欄位。
「I am」欄位用預設的就可以了。
填寫好之後，按「AUTHORIZE」(授權) 按鈕。
轉跳到「Thank you」頁面，就代表成功送出付款資料了！
只要在 Cloudways 後台有看見我們填寫的付款資訊，這樣就代表我們成功設定好付款方式了！
第 2 大步驟：註冊 Namecheap 域名
在購物網站前台的網址列，我們可以看到目前的域名是 Cloudways 給的臨時域名，所以我們要到 Namecheap 註冊專屬自己的域名！
步驟 1：創建 Namecheap 帳戶
你可以點擊下方的「註冊 Namecheap 域名」按鈕，可以進入 Namecheap 官方網站。
點擊首頁左上角的「SIGN UP」(註冊)，我們要填寫帳戶資訊。
你可以照著圖片上面的中文翻譯一邊填寫，然後按「Create Account and Continue」(創建帳戶並繼續) 送出，這樣我們就成功創建好 Namecheap 帳戶了！
步驟 2：註冊自己的域名
接下來我們要檢查我們想要使用的域名，有沒有被別人重複使用。
在這篇圖文教學我要示範架設賣家具的購物網站，所以我註冊一個叫做「notesstorepro.com」的域名。
在搜尋欄輸入好之後，按「放大鏡」圖標。
- 域名左側，有出現「打勾符號」就代表這個域名可以使用。
- 域名右側，則會告訴我們每年的費用是 7.88 美金。
- 畫面中央，我框選起來的地方有一組折扣碼，我們可以先把它複製起來或抄下來，等等要在結帳時使用！
接下來我們按「Add to cart」(加入購物車) 按鈕，再點右下角的「Checkout」(結帳)。
然後在「Promo Code」(折扣碼) 的欄位貼上剛剛複製的折扣碼，按「Apply」(使用) 就能套用優惠，再點「Confirm Order」(確認訂單) 按鈕。
接下來，我們要填寫 Account Contact Information (帳戶聯絡資訊) 頁面。
- 如果你是以「公司」名義申請域名的話，我們要保持「I’m registering on behalf of a company」預設的勾勾。
- 如果你是以「個人」名義申請域名的話，我們就把勾勾取消掉。
那我就示範用一個公司名義來申請域名，所以「I’m registering on behalf of a company」的部分保持預設的打勾。
填寫好資料後，按「Continue」(繼續)。
Whois Contact Information (Whois 聯絡資訊) 頁面，都用預設就好，只要滑到最下面將「Save the configuration …」(儲存上方設定 …) 的選項打勾，就能按「Continue」(繼續)。
Payment Method (付款方式) 頁面可以使用信用卡付款，填寫完按「Continue」(繼續)。
Receipt details (收據詳情) 頁面，一樣都用預設就好，並記得滑到最下面將「Save the configuration …」(儲存上方設定 …) 的選項打勾，然後按「Continue」(繼續)。
最後 Order Review (訂單審核) 頁面，我們可以看到多了一筆「ICANN free」、ICANN 這個機構的費用。
備註：ICANN 機構是什麼？
ICANN 是全球互聯網的管理者，負責監督域名和 IP 地址分配。確保網絡穩定運行，促進政策制定和參與，保護網絡安全和開放性，支持互聯網發展。
多這個 0.18 美金的費用是正常的。
這是 ICANN 機構每年在我們註冊、續訂域名的時候強制徵收的費用，所以這邊我們總共要付 7.16 美金。
確定好之後，我們按「Pay Now」(現在付款)。
當我們看到 Thank you for your purchase! (感謝你的購買) 這行字，就代表域名已經註冊成功了！
步驟 3：收取 Namecheap 寄的驗證信
接下來要到 Email 信箱找到 Namecheap 寄的驗證信，我們點進標題寫有「IMMEDIATE VERIFICATION」(馬上驗證) 的信。
往下拉，找到「Click here to verify your email address」(點擊這裡來確認你的 Email 地址) 的連結，點擊它。
順利看到 Success! (成功!) 頁面，就代表我們完成 Email 驗證了！
第 3 大步驟：設定 WordPress 網站
步驟 1：DNS 設定
DNS 是 Domain Name System (網域名稱系統) 的縮寫。
⭐ 更多免費筆記
DNS 是什麼 (未來開放)
對只是想架設網站的新手來說，「DNS 設定」的意思就是「把主機與域名連接起來」，連結好之後，大家才可以直接在瀏覽器輸入你的域名來進到你的網站。
所以我們接下來要連接剛剛註冊好的域名跟 Cloudways 主機、做 DNS 設定。
回到 Namecheap 首頁，找到右上角的「Account」(帳戶)。
在我們註冊的域名右邊，點「MANAGE」(管理)。
之後切換到「Advanced DNS」(進階的 DNS) 分界。
這裡可以看到有兩個預設的紀錄。
我們把 CNAME Record (CNAME 紀錄) 和 URL Redirect Record (網址重新導向紀錄) 這兩個預設紀錄都刪掉。點右邊垃圾桶圖標，然後按「Yes」(是) 就可以刪除。
接下來我們要新增一個 A Record (A 紀錄)。
點擊「ADD NEW RECORD」(添加新的紀錄)，找到 A Record (A 紀錄)。
- 「Host」欄位填一個「@」。
- 「Value」(值) 欄位填自己 Cloudways 主機的 IP 地址。
那我們要怎麼知道自己 Cloudways 主機的 IP 地址是什麼呢？
開啟 Cloudways 後台，我們把切換器切換到 SERVERS (伺服器)，再點選「Your Server」(你的伺服器)。
MASTER CREDENTIALS (主憑證) 內的 Public IP (公開IP) 就是我們 Cloudways 主機的 IP 地址，點一下可以把它複製起來。
回到 Namecheap 頁面，把 IP 地址貼在「Value」(值) 欄位。
這樣我們就能按右邊的勾勾，新增 A Record (A 紀錄)了。
再來，我們要新增第二個 CNAME Record (CNAME 紀錄)。
點擊「ADD NEW RECORD」(添加新的紀錄)，找到 CNAME Record (CNAME 紀錄)。
- 「Host」欄位填三個小寫的「w」。
- 「Value」(值) 欄位填網站的域名。
填好之後，一樣按右邊的勾勾新增 CNAME Record (CNAME 紀錄)。
備註：
如果看到域名後面多出現一個英文的句點，這是正常的、不用擔心。
新增完兩個紀錄，我們回到 Cloudways 後台做最後的設定，點左上角的「Applications」(應用程式)。
再點「Your Applications」(你的應用程式)。
找到左側欄位的「Domain Management」(網域管理)，點進去。
點「ADD DOMAIN」(新增網域) 按鈕。
在「Enter your domain」(輸入你的域名) 欄位，我們要填寫自己註冊的域名，再點右邊的「ADD DOMAIN」(新增網域) 按鈕。
之後勾選我們註冊的網域，再點右側的 3 個點點。
按「Make Primary」(使成為主要)。
彈出的視窗的部分，繼續點「Set as Primary」(設定為主要)。
等它跑完，我們的網站域名就會從臨時域名變更成正式域名了！這樣我們就成功完成 DNS 設定囉！
接下來可以測試在瀏覽器輸入域名，能不能順利轉跳到我們的網站？
我們直接把網站域名複製起來，開一個新的分頁把它貼上，按 Enter。
如果出現「你的連線不是私人連線」是正常的，可以不用擔心，這是因為我們還沒安裝「SSL 憑證」，等我們安裝好就不會出現這個警告頁面了！
所以我們先忽略這個，按「進階」，再點「繼續前往我們域名的網站」。
如果有成功連到我們網站的 WordPress 預設空白頁，就代表 DNS 設定是成功的喔！
我們再看到網址列左側有顯示一個「不安全」警告，這就是我們的網站還沒有安裝 SSL 憑證的意思，安裝好之後就不會出現了！
步驟 2：安裝 SSL 憑證
SSL 是 Secure Sockets Layer (安全通訊端層) 的縮寫。
⭐ 更多免費筆記
SSL 是什麼 (未來開放)
現在你只要知道：SSL 憑證是「數位安全憑證」，有安裝 SSL 憑證的網站網址，會從 http 變成 https。
多了這個「s」就代表這個網站是安全、有加密的！
所以我們在網站上安裝 SSL 憑證後，瀏覽器就會從「顯示這個網站是不安全的」變成「顯示這個網站是安全的」。
跟你說一個好消息：如果我們使用 Cloudways 主機就有免費安裝 SSL 憑證的功能！
所以我們到 Cloudways 後台，找到左側欄位的「SSL Certificate」(SSL 憑證)。
- 「Email Address」(電子信箱地址) 欄位，填寫自己的 Email。
- 「Domain Name」(網域名稱) 欄位，填寫自己的域名。
填寫好之後，按「INSTALL CERTIFICATE」(安裝憑證)。
之後等 Cloudways 幫我們安裝完 SSL 憑證，這樣就完成了！
接下來可以測試，我們安裝的 SSL 憑證有沒有生效？
我們把網站域名複製起來，開一個新的分頁把它貼上，按 Enter，就可以看到左上角的不安全警示，已經變成顯示安全的鎖頭了！
點一下鎖頭，上面會寫著「已建立安全連線」，這就代表我們成功在自己的網站上安裝好 SSL 憑證了！
步驟 3：登入正式域名的 WordPress 後台
登入正式域名的 WordPress 後台有兩種方法：
- 方法 1：從「Cloudways 後台」登入。這個方法會比較慢一點。
- 方法 2：從「瀏覽器」登入，這個方法會比較快一點。
我在 之前的操作 有示範過方法 1，現在我會再示範一次、加深你的印象。
方法 1 ：從 Cloudways 後台進入 WordPress 登入介面。
登入 Cloudways 後台，左上角的切換器切換到 APPLICATIONS (應用程式)，或是也能從最上面的藍色選單，直接選 APPLICATIONS (應用程式) 頁面。
之後點「Your Application」(你的應用程式)。
Username (使用者名稱) 和 Password (密碼) 可以先點一下複製起來，或是點眼睛圖標來看見實際密碼，把它抄下來、記下來。
再來點 URL 欄位右邊的「圖標」，就能轉跳到 WordPress 後台的登入介面。
在這裡貼上剛剛記下來的 Username (使用者名稱) 和 Password (密碼)，再按「Log In (登入)」。
這樣就成功登入 WordPress 後台了！
方法 2：從瀏覽器直接進入 WordPress 登入介面。
首先，要記住或抄下自己的 Username (使用者名稱) 和 Password (密碼)。
然後開啟瀏覽器，直接在網址列打「你的域名 /wp-admin」。
以我的範例購物網站為例，就是在網址列輸入「notesstorepro.com/wp-admin」。
輸入好按 Enter，就會進到 WordPress 後台的登入介面。
方法 2 的好處，就是可以省去「登入到 Cloudways 後台，才能進入到 WordPress 登入介面」的步驟，我們可以在任何裝置的瀏覽器直接輸入「你的域名 /wp-admin」，就能進入 WordPress 的登入介面。
然後再輸入記下來的 Username (使用者名稱) 和 Password (密碼)，就能按「Log In」(登入) 順利進入 WordPress 後台！
大部分情況，我都是使用方法 2 來登入 WordPress 後台的！
步驟 4：WordPress 基本設定
登入後，我們會看到 WordPress 後台的語言是英文的。
我知道很多人不習慣看英文，所以我們第一個設定，就是先把 WordPress 的語言改成中文吧！
點左側選單「Settings」(設定) 的「General」(一般)。
找到 Site Language (網站語言) 的欄位。
點開、往下拉。
選擇「繁體中文」。
選好之後，頁面的最下方有個「Save Changes」(儲存變更) 按鈕，我們點擊它。
這樣我們的 WordPress 後台會就變成中文的囉！
接下來，我們要自訂網站標題跟網站說明。
因為我示範的是賣家具的購物網站，所以我把「網站標題」叫做「諾特斯家具」、「網站說明」改成「高品質、簡約風家具」。
然後在下面找到「時區」的欄位。
點開、往上拉。
選擇「臺北」。
再往下，「日期格式」和「時間格式」欄位，可以選自己喜歡的呈現形式，像我就比較習慣第一個呈現方式，所以改成它。
修改好就能按「儲存設定」。
接下來，我來教你如何更改 WordPress 的密碼。
目前我們的 WordPress 的密碼是 Cloudways 生成的隨機密碼，因為不是自己設定的很容易忘記，所以我們要改成自己容易記得的密碼！
在 WordPress 後台左側的選單，找到「使用者」。
目前只有一個使用者，我們點擊進去。
在「個人資料」的頁面往下滑，找到「新密碼」的欄位，點擊「設定新密碼」按鈕。
把隨機密碼刪掉，改成我們自己想要的密碼。
改好之後滑到最下面，按「更新個人資料」。
這樣子我們就設定好屬於自己的 WordPress 密碼！
我們實際登入一次看看。
點開介面右上角的使用者頭貼，可以選擇「登出」。
- 使用者名稱，是我們的 Email。
- 密碼，是我們剛剛設定的密碼。輸入完按「登入」。
這樣我們就成功用新的密碼登入 WordPress 後台了！
提醒你，修改後的密碼還是得抄下來或記下來，以免之後忘記喔！
#3 匯入購物車系統
架設 WordPress 購物網站我推薦安裝 WooCommerce 電商外掛 (含購物車系統) 。
在第 3 章，我會教你安裝免費的 Blocksy 主題、匯入含有 WooCommerce 外掛的模板網站，讓空白的網站擁有購物網站的雛型。
這樣你就可以快速擁有一個設計漂亮、功能強大的購物網站！
流程我拆解成 4 個步驟：
- 步驟 1：安裝 Blocksy 主題
- 步驟 2：匯入模板網站
- 步驟 3：新增文章與頁面
- 步驟 4：修改與翻譯模板網站。
好！我們開始吧。
步驟 1：安裝 Blocksy 主題
Blocksy 是 WordPress 佈景主題的一種。
而 WordPress 佈景主題，通常會簡稱「主題」。
Blocksy 主題提供許多豐富的網站版型和設計工具可以選擇。
我們能像玩遊戲一樣，動動滑鼠就能輕鬆幫網站換造型、改變網站外觀。
為什麼選用 Blocksy 主題？
我花了幾十個小時，認真研究過超多種 WordPress 主題。
最後發現 Blocksy 主題的免費版本，就可以做到很多 WordPress 付費主題才能達到的效果。所以在這次的 WordPress 購物網站教學，我們要使用 Blocksy 主題來架設購物網站。
只要安裝 Blocksy 主題、匯入他們提供的模板網站後，我們就可以免費又快速地擁有購物車、優惠券、會員帳號登入 … 等等功能。
也能再進階製作客製化排版設計、響應式網站設計 … 等等。
下載 Blocksy 主題
你可以點擊下面的「下載 Blocksy 主題」按鈕，轉跳到 Blocksy 主題下載頁面。
點擊連結優惠即生效！
之後按右上角的「Free Download」(免費下載)。
再點「Download」(下載) 開始下載 Blocksy 主題。
上傳 Blocksy 主題
開啟 WordPress 後台，在左側選單點「外觀」。
再點上方的「安裝佈景主題」按鈕。
同樣的位置，點擊「上傳佈景主題」。
打開剛剛下載完的「Blocksy 主題檔案」資料夾，將檔案拖到方框內。
然後按「立即安裝」按鈕。
再點「啟用」。
安裝 Blocksy Companion 外掛
Blocksy Companion 是 Blocksy 主題開發商提供的免費外掛。安裝之後，可以讓 Blocksy 主題的功能變更強大。
回到「外觀」的頁面，我們會看到頁面上面多出「安裝 Blocksy Companion」的按鈕，可以點擊它安裝。
安裝完畢後，左側的選單會多出一個「Blocksy」的按鈕。
點開看到 Blocksy 的操作頁後台，就代表安裝成功了！
安裝 Blocksy 主題後，網站長怎樣？
我們來安裝完 Blocksy 主題，「網站前台」會有什麼變化？
把滑鼠移到 WordPress 後台最左上角的小房子圖標。
在「造訪網站」的選項點右鍵，再點「在新分頁中開啟連結」，就可以看到現在網站前台的樣子。
雖然網站還是空白的，但已經套用 Blocksy 主題簡約的基本設計了，接下來我們要進入步驟 2。
步驟 2：匯入模板網站
為什麼要用模板？
原本，從一個空白的網站到可以正常運作、排版又好看的購物網站，除了要花很多時間來撰寫程式做網站設定，甚至還要有設計編排的美感，真的得花超多心血才能做到。
我以前就有自己摸索過，投入的時間已經數不出來了，做出來的網站其實也沒有模板網站厲害。
現在，我們只要安裝好 Blocksy 預先幫我們製作好的模板，就可以快速擁有一個漂亮、功能強大的購物網站了！
你可能會想：這樣大家做出來的網站會不會都長一樣？
別擔心，其實不會。
安裝完模板、做完基本設定，我會在 第 5 章 再帶你操作客製化設計與排版，在購物網站加入自己風格的元素。
那我們就來開始安裝模板吧，這絕對可以幫你省下超多時間的！
正式匯入模板網站
開啟 WordPress 後台，選擇左側選單的「Blocksy」，再切換到「Starter Sites」(起始網站) 頁面。
這裡可以看到，Blocksy 提供很多免費模板網站讓我們選擇。
只要點「Preview」(預覽) 就能瀏覽套版的樣式，你可以在這裡找到適合自己的模板網站開始！
在這個圖文教學，我會使用這個叫「Homi」的模板。
我蠻喜歡這個模板的設計，簡約、質感也很好，很難想像這樣的模板也能免費。
Blocksy 主題沒有把重要的功能隱藏在付費的高牆裡，專業版多出來的功能，通常只是錦上添花，這就是我在研究很多 WordPress 主題後，會推薦你使用 Blocksy 主題的原因。
後來我自己有購買專業版，但不是因為有迫切使用付費功能的需求，只是純粹想支持 Blocksy 團隊而已。
接下來我們要正式匯入 Homi 模板網站，點擊「Import」(匯入)。
之後會彈出 Install Child Theme (安裝子主題) 的視窗。
WordPress 主題在更新的時候，常常會把之前的設定蓋掉，如果我們有安裝子主題的話，就不會遇到這個問題。
所以我們要在「Install Child Theme」(安裝子主題) 欄位打勾，然後按「Next」(下一步)。
Choose Page Builder (選擇頁面編輯器) 的步驟，我們要使用「Elementor」這個神奇的 WordPress 外掛。
安裝它的話，我們就可以用滑鼠拖拉的方式直觀地編輯頁面。
所以我們選擇「Elementor」，然後按「Next」(下一步)。
Install & Activate Plugin (安裝與啟用外掛) 的步驟，我們都不用更改、用預設就好，之後按「Next」(下一步)。
Import Content (導入內容) 的步驟，我們也用預設就好，之後就能按「安裝」開始匯入網站模板了！
安裝完，我們可以選擇「View Site」(觀看網站) 來看看網站變成什麼樣子。
你看！我們的網站，已經從剛剛的空白網站，變成一個購物網站了！
如果你在匯入 Blocksy 時出現錯誤，可以參考 這篇文章。
匯入模板後，網站長怎樣？
我簡單展示一下，示範客人要怎麼從我們的購物網站購買商品。
點擊網站上方選單的「Products」(商品)，這裡會顯示全部的商品。
點選「商品圖片」可以進到單項商品頁面。
接下來點「加入購物車」。
再點「查看購物車」進到購物車頁面，
購物車頁面會列出所有「點過加入購物車按鈕」的商品，客人在這裡確定商品品項、數量沒問題後，就會點「前往結賬」。
結帳頁面左側可以讓客人填寫付款資料，右側會列出詳細金額資訊。
只要填寫好付款資料，就可以點擊「下單購買」購買商品！
而實際的金流、物流要怎麼串接，我會在這個系列的 第 6 章 跟你講解。
那示範完畢，我們可以點選單左上角的 Logo 回到首頁，繼續我們的購物網站設定。
除錯： 刪除重複選單項目
匯入模板網站後，「選單」有時候出現一個小 Bug：出現重複的選單項目。所以接下來我們要來除錯。
- 如果你剛好也有出現這個 Bug 的話，可以跟著我操作。
- 如果你沒有遇到這個 Bug，可以 點擊這裡跳過。
我們點擊最上面的「自訂」，進入 Blocksy 自訂器。
左側彈出的選單往下滑，找到「選單」的項目，點擊它。
接著再點「Main Menu」(主要選單)。
我們點開其中一個重複的項目「Home」(首頁)，再點下面的「移除」就可以刪除了。
其他的重複項目，也用同樣的方式刪除。
刪完之後，記得按「發佈」。
等發佈完，就能按「叉叉」關閉 Blocksy 自訂器，這樣我們就完成除錯了！
整理 WordPress 外掛
回到 WordPress 後台，在左側的選單找到「外掛」。
匯入模板網站時，Blocksy 會順便幫我們安裝一些好用的外掛，像是 Elementor、WooCommerce … 等等。
- Elementor 是「頁面編輯器」外掛。
- WooCommerce 是「電商」外掛。
安裝外掛的同時，系統也會幫我們把「沒有用到」的外掛停用，而白色底的外掛，就是「已經停用」的外掛。
為了不讓停用的外掛佔用空間、影響網站速度，我們要把「白色底」的停用外掛都刪除，這樣我們就整理好 WordPress 的外掛了！
步驟 3：新增文章與頁面
新增文章
這個購物網站是附帶部落格功能的。
我們可以寫一些關於商品的文章，或關於你個人品牌的文章放在網站裡，讓我們的購物網站更有內容、更有互動性。
我們先到購物網站前台，文章會被集中放到 Blog (部落格) 的地方，所以點一下選單上的「Blog」(部落格)。
這裡就是文章的彙整頁面。目前有幾篇預設的文章。
接下來我們要做文章「永久連結結構」的設定。
到 WordPress 後台，點左側選單下方「設定」的「永久連結」。
如果文章的永久連結結構使用預設的話，自訂連結時可能會出現一些錯誤。
為了避免這種情況發生，我們要直接將永久連結的結構改成「文章名稱」。
改好就往下滑到底，點「儲存設定」。
接下來我們就能開始新增文章了！
點左側選單「文章」的「新增文章」。
我們可以直接在這裡輸入文章的標題與內容。
我在標題輸入「如何挑選高 CP 值家具」，內容的部分則先貼上幾段假文做示範。
當然，文章裡還可以新增副標題、分類、標籤、圖片、影片等等。
如果你想更深入了解部落格相關的功能，或是想要透過文章為你的網站帶來免費的 Google 搜尋流量，可以參考我之前做的這部影片。
回到教學，我們可以在右側功能欄找到「分類」來幫文章進行分類。
我們也能在右側功能欄的「精選圖片」上傳一張符合文章的圖片，作為能代表文章的預覽圖。
如果想再自訂好記的文章網址，要先點「儲存草稿」。
這樣「網址」欄位的連結，就會變成「文章名稱」，我們點擊連結它，在「永久連結」的欄位修改自己想要的網址。
全都設定完畢，就能按「發佈」來發佈文章。
按第一次發佈，可以設定文章的「可見度」和「發佈時間」。
設定完後再按一次「發佈」。
這樣我們就成功新增一篇文章了！
切換回購物網站前台的 Blog (部落格) 頁面。
我們重新整理頁面，就能看到剛剛新增的文章了！
我們點擊剛剛設定的「精選圖片」來進入單篇文章。
以後大家就可以透過自訂的網址、也就是連結，進到「如何挑選高 CP 值家具」這篇文章！
新增頁面
這裡示範製作一個「品牌故事」頁面。
我們回到 WordPress 後台，在左側選單找到「頁面」的「新增頁面」。
我們可以直接在這裡輸入頁面的標題和內容。
我在標題輸入「品牌故事」，內容的部分就先貼上一段假文。
然後我們也可以在內容中穿插圖片，來增加品牌故事的豐富度。
點左上角藍色的「+」。
在區塊工具找到「圖片」功能，再點「上傳」選擇圖片。
完成頁面內容後，我們同樣也為品牌故事的頁面自訂專屬網址，然後按「發佈」。
設定好頁面的「可見度」和「發佈時間」，再按一次「發佈」。
接下來點「檢視頁面」看看我們製作的品牌故事。
以後大家就可以透過我們自訂的網址進到品牌故事的頁面，這樣我們就成功發佈一個網站頁面了！
步驟 4：修改與翻譯模板網站
目前我們的模板網站文字都是英文，接下來我會示範要怎麼修改這些文字，你可以根據自己的購物網站類型和我一起修改。
在修改翻譯的過程中，你也會更了解整個購物網站的架構。
修改頁面文字
開啟 WordPress 後台，點擊左側選單的「頁面」。
我們要把後面帶有「草稿」字樣的頁面、和重複的頁面都刪掉，而重複的頁面，要選後面「沒有粗體字」的頁面刪除！
全部刪除之後，畫面就會比較乾淨了。
接下來我們要修改頁面標題，點進「About us」(關於我們)。
我們把英文的頁面標題，修改成中文的「關於我們」。
之後按右上角的「更新」。
點擊左上角的「WordPress Logo」可以回到上一頁。
其他的頁面的英文標題，也用同樣的方式把它修改好。
那我們要怎麼修改頁面內容呢？我用「首頁」當作示範。
點進「首頁」。
再點「使用 Elementor 編輯」。
因為我們現在是第一次使用 Elementor 編輯器，得先做基本設定。
點「Recreate Kit」(重新創建套件)。
再點一次「Recreate Kit」(重新創建套件)，之後按「儲存設定」就可以關閉分頁了。
回到「首頁」的編輯頁面，刷新。
這樣就能進入首頁的 Elementor 編輯器了！
在這邊可以玩很多排版設計，但現在我們先專注在文字的修改上面。
- 我們把英文標題，改成「高品質現代家具」。
- 標題上的副標，改成「新系列」。
- 標題下的說明，改成「提供最舒適的居家體驗」。
然後點一下按鈕，把英文改成「現在探索」。
首頁上的所有文字，都能用同樣的方法來修改，我們需要多一點耐心花時間一個個翻譯。
完成之後，點擊 Elementor 編輯器左下角的「更新」儲存我們修改過的地方。
點擊 Elementor 的編輯器邊框的箭頭，可以將編輯器收起來，這樣我們就能瀏覽網站修改好的樣子！
確定都沒問題後，再打開編輯器，按左上角的「圖示」。
之後按「離開」。
再按「套用」。
修改選單文字
接下來，我們切換到購物網站前台，可以看到選單上的項目還是英文的，那我們要怎麼修改呢？
點最上面的「自訂」，可以進入到 Blocksy 主題的自訂器。
左側的自訂器往下滑，找到「選單」的選項。
再點擊「Main Menu」(主要選單)。
我們要把選單的英文名稱，改成中文的「主要選單」。
接著點開是英文的選單項目，就可以從「導覽選單項目標籤」欄位把英文改成中文。
我們可以用同樣的方法，修改全部的英文選單項目。
記得按「發佈」。
再按「叉叉」，關閉 Blocksy 主題自訂器。
這樣我們就把選單文字都修改好了！
修改商品
我們在網站前台的商品彙整頁面，可以看到商品名稱是英文的。
點進去，商品描述也是英文的，我們要來修改它。
切換到 WordPress 後台，點左側選單的「商品」。
點進「Coffee Table」。
我們可以在這裡修改、翻譯商品名稱、描述 … 等等。
下方的「商品資料」區塊，我會在 第 4 章 有更詳細的講解，這裡先以修改、翻譯的操作為主。
改好之後按「更新」。
我們回到所有商品的頁面。
其他的商品，也可以用同樣的方法去做修改。
要新增商品的話，可以點「新增」的按鈕增加賣售的商品，我也會在這個系列的第 4 章更詳細地講解。
修改商品分類
回到單項商品頁面，我們還可以注意到，商品的分類也是英文的。
到 WordPress 網站後台，點左側選單的「商品」，再點「分類」。
我們可以點進「Chairs」的分類。
在「名稱」的欄位，就能將英文翻譯成中文了！
修改好記得往下滑，按「更新」。
其他的英文分類，也用相同的方式修改好。
要新增新分類的話，可以在左側填寫資料。
之後往下滑，按「增加新分類」就完成了！
修改部落格文章
切換到購物網站前台，我們點選單上的「部落格」進到文章的彙整頁面。
點選文章的標題，就會進到單篇文章。
這篇的文章的標題跟內容都是英文的，我們要來修改它。
切換回 WordPress 網站後台，點擊左側選單的「文章」。
按「移至回收桶」可以把不要的文章丟掉。
也可以點擊文章名稱進行修改。
修改好文章標題，貼上幾段假文後，就能按「更新」。
點左上角的「WordPress Logo」回到上一頁。
之後的文章方法都是一樣的，為了示範我這裡就全做了修改。
切換回「部落格」的彙整頁面，重新整理，就可以看到文章都修改好了！
修改文章分類
我們可以注意到文章分類還是英文的，我們點進「USEFUL」(有用) 的分類，進入分類的彙整頁面。
這裡會顯示所有屬於 USEFUL (有用) 分類的文章，接下來我們就來修改英文的文章分類。
切換回 WordPress 網站後台，我們點擊左側選單「文章」的「分類」。
我們點「USEFUL」(有用) 的標題進行修改。
將「名稱」欄位的英文改成中文，記得再按「更新」。
其他的分類也用同樣的方式修改。
要新增分類的話，一樣填寫左邊的資料，然後點「新增分類」就可以了。
切換回購物網站前台刷新，就可以看到文章的分類也修改完成！
修改頁尾文字
滑到最下面，這個黑色的區塊就是頁尾，我們要怎麼修改它呢？
我們點擊上面最上面的「自訂」。
往下滑到頁尾的區塊，用滑鼠點一下想要修改的地方。
可以點「Got it」(我知道了) 跳過提醒通知。
可以在內容框進行修改。
我們先把標題「Contact us」(聯絡我們) 翻譯成中文，下方的內容也要修改成中文，再按「發佈」修改變更。
其他區域也用同樣的方式，進行翻譯和修改！
諾特斯觀眾小默契環節
我來提倡一下，你可以在頁尾的任何地方加上這個「鉛筆」的 Emoji，也就是「諾特斯觀眾的秘密記號」。
我自己的網站 NotesStartup.com、NotesScribe.com 都有加上這個記號。
雖然是放在頁尾這種不顯眼的地方，但是看到網站頁尾有這個「鉛筆」的 Emoji，就代表是自己人、大家可以互相照顧一下，起碼大家都有著一段「看諾特斯的影片或文章架設網站」的回憶。
想像一下，如果以後在 Google 前幾名的搜尋結果，看見網站的頁尾出現這個記號的話，那樣一定很酷！
如果你不會輸入這個 Emoji 的話，可以直接在下方用複製的。
複製： ✏️
那我們現在修改、翻譯好模板網站了。
#4 設定購物網站
你可能不確定要怎麼做 WooCommerce 設定才是對的，很害怕一不小心就把網站搞壞了。
或是你可能在想，有好多購物網站的功能都要額外付費，好貴唷，有沒有免費的方法可以讓購物網站擁有強大的功能呢？
不用擔心，這些煩惱我之前都經歷過，我會一步一步帶你做。
在第 4 章，我會教你如何更換收款貨幣、加入實體商品 / 數位服務、修改結帳頁面、設定自動計算稅金功能、製作優惠券、設定自動寄出 Email 通知功能。
跟著一起操作，你就可以擁有一個功能強大的購物網站了！
步驟 1：更換收款貨幣
在商品彙整頁面，我們可以看到收款貨幣預設是美元。
假設我們主要的客人在台灣，習慣使用新台幣付款的話，我們就應該要把幣別改成「新台幣」，那我們要怎麼更換收款貨幣呢？
我們要到 WordPress 後台，在左側選單點 「WooCommerce」的「設定」。
往下滑，在貨幣的選項點開來，輸入「NT」就可以找到新台幣。
再來，我們把「小數位數」改成 0，就能按「儲存設定」了。
我們切換回購物網站前台，刷新一下頁面，就可以看到我們成功把貨幣從「美元」改成「新台幣」了！
步驟 2：加入實體商品 / 數位服務
加入實體商品
切換回 WordPress 後台，點左側選單的「商品」可以看到所有商品。
接下來，點「新增」。
我先示範販售一個實體商品：原木椅。
- 商品名稱的地方，輸入「原木椅」。
- 商品描述的地方，可以填寫詳細的商品資訊，這裡先貼上假文當範例。
往下滑，看到「商品資料」的區塊。
- 商品原價的地方，我設 2000 元。
- 商品折扣價的地方，可以設定比原價優惠的數字來提高銷量 ，這裡就設 1500 元。
接下來點開下面的「商品簡短說明」區塊。
我們可以在這裡用短短的幾句話形容這個商品，有的時候，簡短描述會被 Google 索引，有機會商品就能在 Google 搜尋裡面曝光。
同樣的，如果我們的商品成功出現在 Google 搜尋的話，就有機會得到免費的自然流量！
那這邊我就打「櫸木原木椅」。
- 原木柔滑觸感
- 天然木質條紋
- 極簡風格設計
往上滑，在右側的選單找到「設定商品圖片」。
接著把商品圖片從自己的資料夾丟到媒體庫，選取後按「設定商品圖片」。
下面「商品分類」的地方，我們選「椅子」。
確定商品的資訊都填寫完畢後，我們記得往上滑按「發佈」。
新增好商品後，我們來模擬一下客人視角的視窗，跑一次購買流程。
打開我們的購物網站，點「商品」。
現在可以看到我們剛剛新增的原木椅了。
上面還有顯示我們設定的優惠，原價 2000 元、折扣價 1500元，換算下來就是「折扣 25% OFF」。
我們繼續點擊原木椅圖片，進入單項商品的頁面。
剛剛設定的「商品簡短說明」會出現在上面。
「商品描述」的部分則會出現在下面。
客人設定完購買數量後，就可以點「加入購物車」。
只要購物車內有商品，就會跳出「查看購物車」的按鈕，我們點擊它。
客人可以在購物車頁面確認商品和價格，沒問題後按「前往結帳」。
在結帳頁面，客人需要在「左側」填寫收貨的詳細資訊，「右側」則能再次確認訂單的金額及數量。
之後就能按「下單購買」送出訂單！
別忘了我們還有「商品評價」功能！
客人在收到商品覺得好用的話，可以再回到單項商品頁面留下五星評分和評價。
那我們要怎麼核准或刪除評價呢？
切換回 WordPress 後台，點左側選單「商品」的「商品評價」，我們可以在這邊核准、刪除評價。
「核准」之後，所有人都可以看到這則評價。
遇到沒有購買商品的惡意評論，或是機器人的垃圾訊息，我們可以點「垃圾桶」把評價刪除。
⭐ 更多免費筆記
加入數位服務
說到數位服務你會想到哪些項目呢？
線上搜尋引擎優化諮詢、營養師諮詢、網站架設、動畫製作 … 等等都是屬於數位服務的範疇，我們可以在購物網站中加入數位服務，達到在家遠端工作的目標。
想當初，我也是透過我的網站 NotesScribe.com 提供手繪動畫製作的服務，發展網路事業。
一開始我也沒想到會有超級多人透過我的網站發現我、發案子給我，所以我覺得在購物網站內提供一項數位服務，是很不錯的選擇！
回到教學，那我就在販售家具的購物網站示範「提供家具配置諮詢」的服務好了。
我們在 WordPress 後台，點左側選單「商品」的「新增」。
- 商品名稱的地方，輸入「家具配置諮詢」。
- 商品描述的地方，我這邊再貼上幾段假文做示範。
往下滑，在「商品資料」的區塊我們要把「虛擬」的選項打勾，代表這個商品不用運送。
而商品原價的地方，我設 1200 元。
接下來點開下面的「商品簡短說明」區塊，輸入「諮詢費用：1200元 / 小時」。
再來，新增一張符合商品的圖片。
然後替我們的虛擬服務增加一個新分類，叫做「諮詢」。
完成之後，記得按「更新」。
我們回到購物網站的商品頁面，刷新一下，就可以看到「家具配置諮詢」的服務出現在我們販售的商品之中了！
加入數位商品 (可下載電子書)
接下來我們要講解怎麼加入「可以下載的數位商品」，像是電子書。
切換回 WordPress 後台，點左側選單「商品」的「新增」。
- 商品名稱的地方，輸入電子書的書名《圖解木質家具》。
- 商品描述的地方，我再貼上幾段假文做示範。
往下滑，在「商品資料」的區塊，我們要把「虛擬」跟「可下載」的選項都打勾。
- 商品原價的地方，我設 399 元。
- 商品折扣價的地方，這次就設 0 元讓客人免費下載，稍後我們也能測試「下載」的部分。
- 可下載檔案的地方，我們點「新增檔案」。
名稱輸入「《圖解木質家具》電子書」，接著點「選擇檔案」。
我們可以直接把電子書檔案，從自己電腦的資料夾丟到媒體庫。
而電子書的檔案通常會上傳「壓縮檔」，這樣容量比較小。
接下來點開下面的「商品簡短說明」區塊，輸入「免費贈閱」。
再來，新增一張符合商品的圖片。
然後替我們的電子書增加一個新分類，叫做「電子書」。
完成之後，記得按「發佈」。
我們回到購物網站的商品頁面，刷新一下，點進我們剛剛加入的電子書。
然後點「加入購物車」按鈕。
再點「查看購物車」。
因為剛剛設定折扣後的價格是 0 元，所以總計的地方會顯示 0 元。
之後點「前往結帳」。
我們在左側輸入訂購資訊，就可以點「下單購買」。
因為結帳金額是 0 元，所以我們能直接點擊「《圖解木質家具》電子書」這個按鈕，來下載我們剛剛上傳的電子書檔案。
點了之後瀏覽器就會自動下載了！
步驟 3：修改結帳頁面
在結帳頁面，我們可以看到「訂購資訊」的順序怪怪的。
通常我們的習慣是先寫姓氏，再寫名字。
地址填寫的順序，也與我們平常使用的習慣不同。
還有一些用字，像是「鄉鎮市」，應該要改成「鄉鎮市區」才是正確的。
為了讓客人在結帳時能順利填寫訂購資訊，我們需要去下載一個叫「Checkout Field Editor」的外掛，協助我們修改結帳頁面。
我們要到 WordPress 後台，點左側選單的「外掛」。
再點左上角的「安裝外掛」。
在右上角搜尋欄，我們用「關鍵字」搜尋，並輸入「Checkout Field Editor」。
之後點「立即安裝」。
再點「啟用」。
啟用 Checkout Field Editor 外掛後，我們點擊左側選單的「WooCommerce」，就會發現多出一個 「Checkout Form」的選項。
在這裡我們可以調整結帳頁面的順序、顯示的文字，也可以刪除不要的項目。
我們點開「姓氏」欄位最右側的「Edit」(調整)。
然後把 Class (類別) 欄位內 form-row-last 的 last 改更 first，再點「Save & Close」(儲存並關閉) 儲存變更了。
接著點開「名字」欄位最右側的「Edit」(調整)。
同樣把 Class (類別) 欄位內 form-row-first 的 first 改更 last，然後點「Save & Close」(儲存並關閉) 儲存變更。
之後點每個欄位最前面的圖標，可以拖曳項目調整前後順序。
我們將「姓氏」的順序調整到「名字」上面。
然後我們用相同的方式，把「鄉鎮市」改成「鄉鎮市區」。
再來把「郵遞區號」、「縣 / 市」、「鄉鎮市區」都往上調整成習慣的順序。
如果想把不必要的欄位刪除，可以在「Edit」(調整) 內把「Enabled」(啟用) 的勾選取消。
全部調整完，一定要記得按右上角的「Save changes」(儲存與變更)。
我們回到購物網站的結帳頁面，刷新一下，就可以看到結帳資訊的順序、文字已經按照我們的設定修改好了！
步驟 4：設定自動計算稅金功能
現在的結帳頁面沒有顯示稅金，為了公司行號的客人，我們要將購物網站也加上稅金的計算。
我切換回 WordPress 後台，點擊左側選單 「WooCommerce」的「設定」。
先確定我們在「一般」的分頁。
往下滑，在啟用稅金的欄位將「啟用稅率及稅額計算」勾選起來，然後按「儲存設定」。
之後上方的選單就會多出現一個「稅金」的分頁。
接著點「標準稅率」的子分頁。
之後「插入列，在「稅率 %」的地方打「5」，再按「儲存設定」。
再來切換回「稅金選項」的子分頁。
一般的購物網站商品售價都會包含稅金，所以我們也建立一個包含稅金的購物網站。
在售價包含稅金的欄位，將選項改成「是，我將輸入包含稅金的售價」。
往下滑。
- 在商店顯示售價的欄位，選擇「含稅」。
- 在購物車及結帳過程顯示價格的欄位，也選擇「含稅」。
全部設定好後，記得按「儲存設定」。
我們回到購物網站的結帳頁面，刷新一下，就可以看到售價後面自動計算出含有多少稅金了！
步驟 5：設定會員帳號功能
我們的購物網站提供客人 2 種註冊會員帳號的方法。
- 方法 1：點擊右上角的「會員標誌」註冊。
- 方法 2：在結帳的過程中，可以直接選擇註冊會員帳號。
切換回 WordPress 後台，點擊左側選單「WooCommerce」的「設定」。
上方有一個「帳號及隱私權」的分頁。
這裡可以根據你的喜好來設定。
我習慣把訪客結帳的欄位：
「允許客戶免帳號下訂單」取消勾選。
「允許顧客在結帳過程中登入現有的帳號」打勾。
建立帳號的欄位：
「允許客戶在結帳過程中建立帳號」打勾。
「允許客戶在我的帳號頁面上建立帳號」打勾。
下面兩項，取消勾選。
之後就能往下滑，按「儲存設定」。
我們回到購物網站的頁面，刷新一下，客人就可以點擊右上角的「會員圖標」來註冊、登入帳號。
同時我們也開啟在「結帳過程註冊會員帳號」的功能。
在結帳頁面往下拉，客人在填寫訂購資訊時就能直接註冊會員帳號了，這樣客人在完成結帳後，就可以直接登入會員、查看訂單進度！
步驟 6：製作優惠券/ 折扣碼
我們可以自訂折扣碼，讓在購物車輸入折扣碼的客人可以獲得折扣！
我們切換回 WordPress 後台，點擊左側選單「行銷」的「折價券」。
點擊「建立第一張優惠券」。
折扣種類的欄位，可以選擇「百分比折扣」、「固定的購物車折扣」、「固定的商品折扣」。
我想讓知道折扣碼的人都可以有 100 元的優惠，所以選擇「固定的購物車折扣」。
折價券金額的欄位，輸入 100 元，代表購物車裡「整筆訂單的總金額」可以折抵 100 元。
然後上面可以自訂折扣碼，或按「產生折價券代碼」讓系統幫我們隨機命名，這裡我就設「NOTES 100」作為我們的折扣碼。
設定好之後，記得按「發佈」。
我們回到購物網站的購物車頁面，刷新一下。
在「優惠券代碼」輸入剛剛設定好的優惠券「NOTES 100」，然後點「使用優惠券」。
我們可以看到右側的購物車總計，100 元的折扣已經生效了！
步驟 7：設定自動寄出 Email 訂單通知
我們使用 WordPress + WooCommerce 外掛，本身就有可以自動寄 Email 訂單通知的功能，但這不是使用 SMTP 的方式寄信，會被 Gmail 或其他信箱判定成「不安全郵件」，造成收件者收不到信，有時候甚至連垃圾信箱都找不到。
備註：什麼是 SMTP？
SMTP 代表「Simple Mail Transfer Protocol」，是用於電子郵件傳送的通信協定。
它負責在網路中傳送電子郵件訊息，將郵件從寄件伺服器傳送至收件伺服器，然後再交由收件人的郵件客戶端處理。SMTP 被廣泛用於互聯網上的電子郵件通信，並確保郵件能夠準確可靠地傳遞。
所以，我們要借助寄信信譽品質比較好，又有通過 SMTP 認證的 Email 服務商幫我們寄信，才不會被 Gmail 擋住，但是這種 Email 服務商通常都是要收費的！
我有研究過很多 Email 服務商，包括：Sendinblue、MailChimp、MailerLite……等等。
其中， Sendinblue 的免費的版本，每天就可以用自動化系統寄 300 封信，而且 Email 送達率也是所有服務商中最高的！
所以我們可以選擇 Sendinblue 來幫我們寄送電子信箱的訂單通知！
我也有寫一篇 Sendinblue 跟 MailChimp 的比較文章，你可以點連結參考看看。
⭐ 更多免費筆記
Sendinblue評價｜比 Mailchimp 更好的免費 WordPress 訂閱電子報 / 表單 / Email 自動化系統
備註：
Sendinblue 後來改名為 Brevo。
註冊 Sendinblue (Brevo)
我們先進入 Sendinblue 的官網，點右上角的「Sign up free」(免費註冊) 註冊帳號。
我們輸入 Email 跟自訂密碼，之後點「Create an account」(創建帳戶)。
之後的步驟得先到信箱啟用驗證信，我們打開 Email 信箱，找到 Sendinblue 寄的信。
之後按「Confirm my email address」(確認我的 Email 地址)。
它會跳出新的視窗讓我們繼續填寫註冊資料，你可以照著中文翻譯填寫就好了。
姓名的欄位，記得使用「姓名中譯英系統」翻譯。
Company Name (公司名稱) 的欄位，如果你沒有註冊公司，可以填寫自己預想的公司名稱，或直接貼上購物網站的域名也可以。
填好之後按「Next」(下一步)。
之後是公司地址的部分。
你可以照著畫面上的中文翻譯填寫，也可以使用「地址中譯英系統」翻譯。
填好之後按「Next」(下一步)。
接下來有 3 個問題：
- 第 1 個問題是：你的團隊有多少人？
- 第 2 個問題是：你有多少個聯絡資料？指的是你的客戶資料，包含姓名、Email 那些。
- 第 3 個問題是：你有在網路銷售嗎？
這些問題都按照你的狀況填寫就好了，之後按「Next」(下一步)。
最後需要驗證我們的手機號碼。
台灣地區的手機區號是「+886」，後面則是輸入自己的手機號碼。之後按「Send verification code」(傳送驗證碼)。
然後輸入手機簡訊收到的驗證碼，按「Verify」(驗證)。
選擇方案的頁面，選 0 元的 「Continue with free plan」(以免費方案繼續) 方案即可。
轉跳到這個頁面我們就註冊好 Sendinblue 了。
提醒你一下，有的時候 Sendinblue 會怕大家濫用免費資源亂寄垃圾郵件，所以可能會出現「需要人工驗證」才能啟用 Sendinblue 帳號的情況發生。
如果遇到這種情形，我們可以根據客服的指示操作就可以了。
如果你不知道要怎麼用英文回答客服的話，可以參考我網站的部落格文章，這裡有我跟客服的對話內容讓你參考。
簡單設定金流 (銀行轉帳)
接下來我們先簡單設定一下金流，主要是為了測試結帳功能，和試試看 Email 是不是可以順利自動寄出。
之後在 第 6 章，我才會帶你進行更詳細的金流設定教學。
切換回 WordPress 後台，點左側選單「 WoCommerce 」的「設定」。
選擇「付款」的分頁。
我們先「啟用」銀行轉帳，然後點「完成設定」。
我們在帳號詳細資料的欄位，點選「新增帳號」，接著輸入收款的銀行帳戶資訊，然後按「儲存設定」。
我們回到購物網站的結帳頁面，刷新一下。
往下滑就可以在右側發現多出一個「銀行轉帳」的選項，之後我們填寫訂購資訊、建立帳號密碼、點選「下單購買」。
在匯款資訊的欄位，可以看到我們剛剛設定的收款銀行資訊！
但是，現在還不能自動寄出 Email 訂單通知。
我們需要下載一個叫做「WP Mail SMTP」的外掛，把我們註冊的 Sendinblue 跟我們的 WordPress 購物網站連接起來！
下載 WP Mail SMTP
切換回 WordPress 後台，點左側選單的「外掛」。
再點左上角的「安裝外掛」。
在右上角搜尋欄，我們用「關鍵字」搜尋，並輸入「WP Mail SMTP」。
看到有這個鳥鳥圖案、300 萬以上下載的，就是我們要的外掛，我們點「立即安裝」。
再點「啟用」。
之後左側的選單會多出「WP Mail SMTP」的選項，我們點擊它。
然後點下面的「啟動設定精靈」按鈕。
之後按「Let’s Get Started」(讓我們開始吧)。
第一步驟，Choose Your SMTP Mailer (選擇你的SMTP郵件程序) 頁面。
我們選擇「Sendinblue」，就能往下滑按「Save & Continue」(儲存與繼續)。
第二步驟，Configure Mailer Settings (設定郵件程序配置) 頁面。
這裡需要填寫 Sendinblue 的 API 金鑰，我們切換回 Sendinblue 的頁面。
點右上角的使用者，再點「SMTP & API」。
新版介面記得要從「SMTP」切換到「API Keys」。
再來點擊右上角的「CREATE A NEW API KEY」(創建一個新的 API 金鑰) 按鈕來生成金鑰。
我們可以隨意取個名稱，我就輸入「WooCommerce API」，之後按「Generate」(產生)。
我們可以按金鑰右側的「複製圖標」把它複製起來。
我們切換回 Configure Mailer Settings (設定郵件程序配置) 頁面，貼上剛剛複製的 API 金鑰。
Sending Domain (傳送網域) 的欄位，輸入我們購物網站的域名。
其他欄位都保持預設就好，之後按「Save and Continue」(儲存與繼續)。
接下來的步驟，全部「保持預設」就好，在最後按「Finish Setup」(完成設置)。
⭐ 更多免費筆記
Brevo + WP Mail SMTP 出現錯誤訊息要如何解決？
收 Email 訂單通知
接下來我們再用客人的視角再跑一次購物流程，成功下單後，Sendinblue 就會自動幫我們寄出訂單通知。
我們開啟 Email 信箱，會看到一封叫做「已收到你的 諾特斯家具訂單」的信，我們點開來看看。
內容是現在訂單的狀態，下面則有匯款資訊跟訂單資訊。
很酷吧！客人下單後，我們什麼都不用做，他就會自動收到 Email 訂單通知了！
#5 設計網站外觀
如果你的網站沒辦法照著你想要的樣子排版，或是覺得套版網站的樣子太死板，很容易跟人重複。
不用擔心，接下來我會跟你講解如何使用 Blocksy 自訂器跟 Elementor 頁面編輯器來修改網站外觀。之後，你就可以自訂網站的排版跟設計，包括首頁、商店設計，和頁首、頁尾設計。
好，我們開始吧！
Blocksy 主題自訂器 vs Elementor 頁面編輯器
Blocksy 是 WordPress 的主題，它是整個網站外觀設計的基礎。
當 Blocksy 的基礎設計功能沒辦法滿足我們的需求時，我們可以使用 Elementor 外掛，去做更進階的頁面排版跟設計。
但是用 Elementor 另外創建的頁面，就不屬於 Blocksy 主題的控制範圍了，沒辦法回頭使用 Blocksy 主題自訂器去編輯。
區分使用範圍
那我們要怎麼區分哪些地方要用 Blocksy 主題自訂器調整，哪些要用 Elementor 頁面編輯器調整呢？
我們到 WordPress 後台，點左側選單的「頁面」。
後面有用粗體標示 Elementor 的，就是使用 Elementor 製作的頁面，其他頁面我們則是使用 Blocksy 自訂器去調整。
以目前的頁面來說：
使用 Elementor 編輯器的頁面有：首頁、關於我們、聯絡我們，這些頁面的排版設計就要使用 Elementor 編輯器去調整。
可使用 Blocksy 編輯器的頁面目前有：頁首選單、商店彙整頁面、單項商品頁面、頁尾……等等，這些頁面的排版設計就可以使用 Blocksy 自訂器去調整。
如何前往 Blocksy 主題自訂器
要到 Blocksy 主題自訂器調整排版、設計，有從網站前台、 WordPress 後台前往 2 個方法。
第 1 個方法：我們在購物網站前台，可以點上面選單的「自訂」，進到 Blocksy 主題自訂器。
第 2 個方法：我們在 WordPress 後台，點左側選單「外觀」的「自訂」，進到 Blocksy 主題自訂器。
如何前往 Elementor 頁面編輯器
要到 Elementor 頁面編輯器調整排版、設計，也是有從網站前台、 WordPress 後台前往 2 個方法。
第 1 個方法：我們在購物網站前台，可以點上面選單的「使用 Elementor 編輯」，進到 Elementor 頁面編輯器。
第 2 個方法：我們在 WordPress 後台，點左側選單的「頁面」。
再點進後面有用粗體標示 Elementor 的頁面。
之後點「使用 Elementor 編輯」，就可以進到 Elementor 頁面編輯器。
步驟 1：自訂頁首設計
「頁首」就是網站前台最上面的區塊，區塊內包含：購物網站 Logo、選單，和搜尋、會員帳號、購物車……等等小圖標。
好，我們點上面選單的「自訂」，前往 Blocksy 自訂器。
我們只要在自訂器左側調整選項，右側就可以即時預覽購物網站前台的變動。
頁首選單
調整「頁首選單」有 2 個方法。
第 1 個方法：我們可以點左側的「頁首」。
之後點下方的「選單 1」進入選單的調整介面。
第 2 個方法：我們可以在右側的預覽介面，直接點擊想要調整的地方
像我把滑鼠移到選單上，就會出現 3 個點點，我們點擊它。
就可以跳到和方法 1 一樣選單的調整介面。
所以，Blocksy 自訂器的項目都可以用這 2 種方法去做調整，而第 2 個方法對新手來說比較直觀，之後的教學我也會 2 種方法搭配著使用。
回到調整選單的部分，我們可以在左側選擇自己喜歡的呈現樣式。
我自己是比較喜歡型式 2，所以選擇它。
頁首項目位置
我們可以在下面的介面調整，用拖曳的方式去改變頁首的排版。
像是，我想要把頁首上的選單置中，就把下面的「選單 1」拖到中間。
前台預覽的部分也會即時做出對應的變動。
接著是調整選單右邊的圖標順序。
我把「搜尋」圖標拖到最右邊，「購物車」圖標拉到最左邊。
頁首元件圖示
我們也能點擊圖標去修改樣式，像是我把「提袋」改成「購物車」，再把圖標尺寸調大一點。
製作子選單
在這個教學裡，我想要製做成像範例圖的效果：當我們把滑鼠移到「商店」的時候，選單下就會跑出商品分類的子選單。
我們先點左上角的「返回」箭頭，回到 Blocksy 自訂器的初始頁面。
往下滑，點「選單」。
再點進「主要選單」。
接著我們按「新增選單項目」的按鈕。
點開「商品分類」。
然後點擊「+」，可以把分類加到選單裡。
這裡我們就把椅子、桌子、沙發、諮詢、電子書、檯燈都加到選單。
再來，我們用拖曳的方式，將這些分類製作成選單的子選單。
我們把「椅子」拉到「商品」下，再稍微往右移一點，就會變成「商品」的「子選單」了。
其他的分類我也用同樣的方法調整好。
調整好之後，記得按「發佈」。
我們重整頁面、把滑鼠移到預覽介面的選單上，就可以看見子選單就出現了。
接下來，我們可以把子選單的「底色」調成和諧一點的顏色，黑色有點太突兀了。
我們點擊左側的「頁首」。
再點下面的「選單 1」。
往下滑，找到「下拉選項」的欄位，切換到「設計」的分頁。
點擊項目背景顏色欄位的「預設狀態」。
把原先的「黑色」改成「顏色 1」，在把滑鼠移到預覽介面的選單上，就可以看到子選單的顏色改變了。
這邊再跟你分享一個小秘訣。
我們可以把下面的「透明度」拉桿往左拉一點、調到 0.96 左右，子選單就會出現「稍微透明」的效果，比單純色塊的層次更豐富一點。
接下來，我們把子選單的「字型大小」調大一點、「行高」改成 1。
這樣我們就完成子選單了！
更換 Logo
我們點 Logo 旁邊的 3 個點點，就可以把預設的 Logo 更換成自己的 Logo。
如果你還沒有自己的 Logo，可以參考我之前製作的教學影片，看要怎麼使用 Canva 製作屬於自己的 Logo。
你可以點擊連結前往 Canva，註冊一個帳號並參考我的影片製作 Logo。
頁首吸附功能
為什麽左側會顯示 2 種 Logo 呢？
這是因為我們有開啟頁首吸附的功能。
舉例來說，當我們把購物網站滑到頂部時，我們可以看到頁首的區塊是透明的。
但當我們往下滑的時候，頁首的區塊會變成白色並維持在最上方，這就是「頁首吸附」的效果。
這個功能看起來蠻高級的，但就是有 2 種不同狀態的頁首，所以才需要上傳 2 種不同的 Logo。
如果想要關閉頁首吸附的功能，我們先點左上角的「返回」箭頭，回到 Blocksy 自訂器的初始頁面。
點「頁首」。
切換到「頁首」的分頁。
點「整體頁首」。
就可以在這裡開啟、關閉「頁首吸附」的功能了。
關起來的話，我們在預覽介面往下滑的時候，頁首就不會吸附在最上面了。
但我覺得「頁首吸附」的效果還蠻好的，所以我還是開啟它。
什麼是響應式網頁設計？
響應式網頁設計 Responsive Web Design，我們通常會直接簡稱 RWD。
響應式網頁設計是一種很棒的網頁設計技術。
有做響應式網頁設計的網站，會自動根據使用者的裝置螢幕尺寸有不同的排版設計，像是文字大小、行距、圖片大小……等等，讓使用者不管是在桌電、平板、手機都可以有很好的體驗。
如果你想讓你的購物網站在所有裝置上都能很美觀、讓人留下好的印象，那記得一定要製作「響應式網頁設計」！
而 Blocksy 主題自訂器跟 Elementor 頁面編輯器都可以讓我們不用寫任何程式碼就做到響應式網頁設計。
響應式網頁設計 (Blocksy)
好，那我先來示範怎麼用 Blocksy 自訂器來製作響應式網頁設計。
剛剛我們調整的狀態都是「電腦裝置」的排版設計，如果想調整「平板」或「手機」等行動裝置的排版，我們要點擊左下角的圖標，切換到「平板」或「手機」的調整介面。
以頁首的排版設計來說，電腦裝置跟平板、手機的排版就差很多。
在平板 / 手機的頁首預覽介面，可以看到右上角有一個「觸發器」。
我們點擊它，就可以看見行動裝置特有的「滑出式區域」。
因為行動裝置的顯示器比電腦裝置窄很多，所以客人在使用行動裝置瀏覽我們的購物網站，選單就會出現在這個「滑出式區域」。
這樣客人利用行動裝置瀏覽我們購物網站的時候，就會覺得畫面比較乾淨。
講解完之後，我們就先來調整平板和手機的「選單字型」大小。
點一下「手機選單」。
切換到「設計」的分頁。
再點「字體」的欄位。
我們可以直接在這裡用「拉桿」來調整字型大小。
我們也可以很方便地點「平板」的圖標，切換到「平板」的調整介面， Blocksy 自訂器下方也已經顯示切換到「平板」的模式了。
平板模式裡我就覺得字體太大了，所以把它調小一點。
OK，我們可以點右下角的「隱藏編輯器」，把下方的面板隱藏起來。
現在來瀏覽一下，不管我們切換到桌電模式、平板模式、手機模式，字體看起來都很舒服了。
接著是行動裝置模式的頁首元件，我覺得位置上可以再更優化、讓它看起來更簡潔。
左邊這裡是「滑出式區域」，右邊這裡是「主要列」。
- 我把 Logo (標誌) 從「主要列」的左側拖曳到中間。
- 然後把會員的圖標，從「主要列」拖進「滑出式區域」。
- 再把購物車圖標，從「主要列」的右側拖到左側。
- 之後我們刪除「滑出式區域」裡的「HTML」。
再來把「社群」拉到最下面，這樣的排版設計就比較好看了！
步驟 2：自訂首頁設計
頁首 vs 首頁
「頁首」跟「首頁」聽起來蠻像的，但兩個完全是不同的意思，我先簡單說明一下差別：
頁首，就是「所有頁面」最上面的「區塊」。
通常包含了網站的Logo、選單……等等，在網站裡「所有的頁面」都可以看到頁首的區塊。
首頁，就是我們在瀏覽器輸入網站域名時會進入的「頁面」。
通常我們會把網站裡最好的內容都展示在這裡，這樣才能讓別人進到我們網站時，就留下深刻的印象。
Elementor 編輯器介紹
接下來我們換使用 Elementor 的編輯器來編輯首頁，我們點擊上方選單的「使用 Elementor 編輯」。
Elementor 編輯器裡面有很豐富元素，可以協助我們優化網站的設計與排版。
因為我們是匯入模板網站，所以網站的首頁已經有幫我們加入很多好看的元素了，如果你想從頭開始設計也可以，Elementor 幾乎能做到任何你想要的頁面排版！
只要肯花時間調整，把首頁裡預設的元素全部刪除就可以開始製作了。
但我覺得這個模板網站的首頁的設計已經蠻好看了，是一個很好的開始，所以我就簡單講解、微調首頁就好，你可以根據自己的購物網站需求去做其他設計與排版。
段 (區段)
我們把滑鼠移到「段」的上面，會出現藍色的欄框和三個選項，我們按「＋」。
然後再點擊桃紅色的「＋」可以新增「新的段」，我們也可以理解成「區段」。
「區段」內可以選擇要幾「欄」，欄裡面可以放置元素。
按右上角很像魔術方塊的圖標，我們可以看到所有能夠加入「欄」內的元素。
這裡有像是標題、圖片、影片、按紐、Google 地圖、圖示、圖片轉盤、計數器、進度條、切換、社交網路服務圖示……等等元素可以選擇，Elementor 真的是超厲害的外掛，有很多元素可以利用。
你可以抱著探索的心情點點看、調整看看，加入屬於自己風格的元素，設計出你的專屬頁面！
那我就先示範影片的品牌故事區段，我們選「1 欄」。
新增標題
接下來，我們把「標題」的元素拖曳到「區段」的「欄」裡面。
輸入「品牌故事」，然後將標題「置中」。
之後點「樣式」的分頁。
再點「排版樣式」欄位右邊的「鉛筆圖標」，調整字體大小的尺寸。
不過，每次新增標題都要手動調整大小的話還蠻麻煩的，在這方面 Elementor 有個很棒的功能，可以直接「複製並貼上樣式」省去重複的步驟，我示範給你看。
我們直接在「分類」的元素上點右鍵，再點「複製」。
之後到「品牌故事」的元素上點右鍵，按「貼上樣式」。
我們可以看到「品牌故事」的元素套用了「分類」元素的樣式設定，這樣就不用一個個調整元素的設定了！
新增影片
接下來我們要新增影片，把「影音」的元素拖曳品牌故事下方。
然後貼上影片的連結。
我們可以看到影片的預設大小太大了，必須調整一下，點「區段」上中間的按鈕。
在左側有一個「寬度」的拉桿，我們把它調到想要的大小。
之後點編輯器邊框的「箭頭」符號，可以收合編輯器、方便我們隨時預覽頁面。
OK ，現在我們就可以在首頁播放我們新增的影片了！
新增按鈕
再來我們要新增一個外連到 YouTube 頻道的按鈕，我們把「按鈕」元素拖曳到影片下方。
然後把按鈕「置中」。
接著把文字改成「YouTube 頻道」，並貼上頻道的網址連結。
點連結欄位右側的「齒輪」圖標，可以勾選「在新視窗中開啟」。
接下來，我們點「圖示」旁邊的「圖示庫」圖標。
在這裡可以選擇許多替換的圖案，我們也能直接在上面搜尋「YouTube」，然後選起來按「插入」。
再來切換到「樣式」的分頁。
點色彩欄位旁的「色塊」圖標，可以把按鈕顏色調整成符合 YouTube 的紅色。
OK，我們要來測試一下成果。
因為要跳轉到編輯器之外的網站，我們無法在編輯器裡預覽，所以我們點左下角的「更新」。
之後在瀏覽器開一個新分頁，輸入我們的域名、前往網站首頁。
往下滑，我們點擊剛剛設定完的按鈕，如果成功跳轉到你設定的頁面，就代表成功了！
響應式網頁設計 (Elementor)
好，那接下來我們來示範怎麼操作 Elementor 編輯器的響應式網頁設計。
我們點編輯器左下角的「響應模式」 圖標。
這樣我們就能在上方隨時切換成電腦裝置、平板、手機的模式了。
接下來我們要來調整排版，有時候在電腦裝置看起來很正常的間距，換到行動裝置時就會看起來會過大。
切換到手機模式，我們點品牌故事的「區段」，並切換到「進階」的分頁。
之後，邊界的欄位要解除「將值連結在一起」。
而「下」指的是「區段」下方的寬度，我們可以調整這裡的數字，找到理想的間距。
OK，這樣子我們就做好「手機」間距的部分了！
記得切換到平板模式，這裡也要用一樣的方法調整適合的間距。
現在你可以利用 Elementor 的響應模式，調整所有東西在不同裝置的排版和設計，這樣客人用各種裝置瀏覽我們的購物網站時，購物網站都能以最完美的設計呈現！
⭐ 更多免費筆記
如何在 Elementor 自訂 / 修改背景圖片
步驟 3：自訂商店設計
好，接下來我們要回到 Blocksy 自訂器，點上面的「自訂」。
整體顏色調色盤
如果我們想更換網站的顏色，每個地方一個個手動調整真的會累死，所以我們要先調整「網站整體色調」再細調「個別」的色彩，這樣在設計網站上會比較會有效率。
Blocksy 自訂器就擁有很棒的「整體顏色調色盤」功能，我們點「顏色」。
可以看到「整體顏色調色盤」，把它點開來。
Blocksy 在這個功能非常貼心，提供很多和諧的配色讓我們選擇。
如果你還想修改調色盤裡的顏色，我們也可以點進去修改「顏色 1、顏色 2、顏色 3」。
我以「顏色 1」舉例：
修改顏色時，原本有使用到顏色 1 的「連結」跟「文字選取」顏色就會一起跟著改變。
這樣，我們就可以快速調整網站的「整體顏色」，不用一個個手動修改。
那我就選回模板網站預設的配色，因為我覺得這組調色盤符合我的預期，蠻好看的。
商品彙整頁面
我們點左上角的「返回」箭頭，回到 Blocksy 自訂器的初始頁面。
接下來我們要調整商品彙整頁面，就是會展示所有商品的頁面。
我們往下滑，找到 WooCommerce 的「商品彙整」，點擊它。
- 商店設定的欄位，我們可以選擇自己喜歡的型式，那我這裡就選擇預設的「型式 1」。
- 列與行的欄位，我們可以調整商品呈現的行列數，那我這裡就改成「3 行、3 列」。
如果我們的商品彙整頁面想要有「側邊欄」，我們可以往下滑，開啟「資訊欄」，資訊欄指的就是側邊欄。
可是開啟後可以看到，資訊欄的部分是空白的，那是因為我們還沒有把小工具放進去。
接下來，我們先按「發佈」儲存現在的設定。
然後回到 WordPress 後台，點左側選單「外觀」的「小工具」。
往下滑，點開「WooCommerce 邊欄」，按「＋」。
再按「瀏覽全部」就能看到所有小工具。
我們可以從這裡選擇想要放什麼工具在資訊欄。
好，那我先選「搜尋」工具，點擊之後就會出現在「WoCommerce 邊欄」。
接下來，我也加入「Product Categories List」(商品分類列表) 工具。
再加入「Social icons」(社交圖示) 工具。
把「Twitter」取消掉。
並搜尋「YouTube」，按「＋」加入工具列。
接下來調整一下顯示順序。
然後打開「以新分頁開啟連結」功能，把標題改成「社交平台」，修改好之後記得點「更新」。
切換回 Blocksy 自訂器，刷新頁面，我們就可以看到商店的資訊欄出現剛剛選擇的小工具了。
那我們要到哪邊填寫社交平台的連結呢？我們點左側選單的「一般」。
然後點「社群媒體帳號」。
在這裡填寫好使用到的社群媒體連結後，記得按「發佈」。
再來按叉叉關閉 Blocksy 自訂器。
接著我們點資訊欄的社交平台的圖示，如果成功轉跳到我們設定的連結，就表示成功了！
接下來我們來調整資訊欄的設計，按上方的「自訂」回到 Blocksy 自訂器。
點「資訊欄」。
我們可以在這裡選擇資訊欄的型式，我就選擇「型式 2」，然後再調整一下資訊欄的寬度。
如果想做出「懸浮吸附」的資訊欄效果，我們要往下滑，開啟「吸附資訊欄」的功能。
然後切換到「設計」的分頁。
點開陰影欄位的「色票」。
我們選擇「黑色」，接著調整一下「透明度」，這樣我們就做好「懸浮吸附」效果的資訊欄了！
單項商品頁面
我們點左上角的「返回」箭頭，回到 Blocksy 自訂器的初始頁面。
往下滑，找到 WooCommerce 的「單項商品」，我們點擊它。
單項商品頁面在哪裡呢？我們在商品彙整頁面，點進「咖啡桌」。
這個「單一的」商品頁面就是「單項商品頁面」，在這裡也可以調整頁面結構。
我們可以點左下角的「箭頭」圖標，收起、開啟 Blocksy 自訂器瀏覽。
我們發現「描述」的文字看起來有點長，把它改窄一點可以讓網站觀眾閱讀時比較舒適。
所以我們打開自訂器，在頁面結構的欄位，改成「較窄的寬度」的型式。
這樣文字看起來就會比較舒服了。
接下來，我們把滑鼠移到商品圖片的地方，可以看到現在有套用放大的效果。
如果你想要開啟、關閉這個功能的話，在左側往下滑，點擊「圖庫選項」。
我們可以在「放大效果」欄開啟或關閉這個功能。但我覺得這個效果還蠻不錯的，所以保留它。
另外，開啟「燈箱效果」的話，點圖片上的「放大鏡」圖標就會展開大圖瀏覽。
步驟 4：自訂頁尾設計
「頁尾」跟「頁首」的調整方法很像，我這裡就簡單微調當作示範。
點左上角的「返回」箭頭，回到 Blocksy 自訂器的初始頁面。
找到「頁尾」，點擊它。
頁尾項目位置
接下來，我們一樣可以用滑鼠拖曳的方式，來調整頁尾元件的顯示順序。我把「有用連結」跟「聯絡我們」的順序對調。
社交平台圖示
接著點「社群」，我們要調整想顯示的社群平台與順序，然後開啟「在新分頁中開啟連結」功能，再把圖示尺寸調大一點。
最後點開「版權」，我們可以輸入想顯示的內容。
諾特斯觀眾小默契
我再來提倡諾特斯觀眾之間的小默契，你可以在頁尾的地方加上鉛筆的 Emoji 符號 ✏。
這個 ✏ 鉛筆的符號，就是諾特斯觀眾的秘密記號。
有加這個秘密記號的人，都有著一段看諾特斯的影片或文章架設網站的共同回憶。
以後看到頁尾有這個秘密記號的網站，就知道是自己人，大家可以互相照顧一下。
如果你的網站有加這個鉛筆的 Emoji 符號 ✏，歡迎留言和大家分享你做的網站。
好，太棒了！
只要順著這 4 個步驟操作，你就已經學會自己調整網站的排版與設計了。之後你可以再自己深入探索 Blocksy 主題自訂器跟 Elementor 頁面編輯器，相信你一定能製作出屬於自己的購物網站！
諾特斯的經驗分享
在這一章的最後，我要來跟你分享一個概念。
「簡單的方法能做好的事，我們就不要用複雜的方法去做了」
在網站設計這方面，我們很容易陷入「追求完美」的陷阱，我自己也曾經迷失在控制各種排版與設計當中。
舉例來說，Blocksy 主題沒有辦法做到的排版設計，可能要花很多的時間用 Elementor 來做。
當 Elementor 還是沒有辦法滿足需求的時候，甚至還需要使用 css 程式去設計。
但是在網站外觀上吹毛求疵，真的是我們需要的嗎？
跟你分享一句話：
「Done is better than perfect 完成比完美更重要」
我們不要追求把網站外觀設計到 100 分，大概有個 80 分，我們就可以去做更重要的事了！
像是「透過網站販售優質的商品」、「傳遞有價值的文章內容」……等等，才會是「購物網站」的主軸！
#6 設定金流與物流
在這一章我會跟你分享如何在 WordPress 購物網站串接金流跟物流，並把步驟拆解開來，你只要跟著畫面操作就可以完成設定！
串接好之後，我們就架設好一個能賣東西的購物網站了，能實際收到錢，也能順利出貨！
因為我的觀眾有 76.3% 是台灣觀眾，所以在這個教學影片，我會特別使用台灣的金流、物流服務來做示範。
如果你是其他地方的觀眾，我也會照顧到你們。
有想要知道什麼其他比較在地化的金流、物流服務也可以留言跟我說，有機會我會再另外做加碼的補充教學！
我們的購物網站會有哪些的金流、物流方式呢？
- 金流的部分，我們會有：銀行轉帳、信用卡、超商條代碼、超商條碼……等等。
- 物流的部分，我們會有：常見的四大超商取貨，包括全家、7-ELEVEN、萊爾富、OK Mart，和提供宅配服務，像是黑貓宅配、郵局宅配……等等。
如何串接金流與物流
這是 WooCommerce 預設的金流。
這是 WooCommerce 預設的物流。
我們可以發現，WooCommerce 預設的選項並不多。
所以在這個教學，我們要使用「RY WooCommerce Tools」外掛來串接「綠界」的金流與物流服務。
不要被「綠界」、「RY WooCommerce Tools」 這些專有名詞嚇到了，我等等會講解它們是什麼。
透過它們串接金流、物流，我們的購物網站可以擁有額外的「信用卡付款」、「超商取貨」……等等好用的功能。
綠界是什麼？
綠界是提供「金流」與「物流」的服務商。
在金流方面：綠界就是在買家、賣家之間，處理收錢、付錢的工作。
它可以提供信用卡繳費、四大超商繳費……等等服務，等綠界收到買家的款項後，賣家只要支付一些手續費，就能很方便地從綠界提領買家付的款項。
在物流方面：綠界整合了四大超商取貨、黑貓宅配、郵局宅配……等等服務，讓賣家可以輕鬆地使用這些常見的物流方式運送商品。
RY WooCommerce Tools 是什麼？
RY WooCommerce Tools 是一個叫 「RY」的自由工作者，根據台灣人的日常使用習慣來開發的 WordPress 外掛。
它可以讓 WooCommerce 的金流、物流服務變得更強大，幫助我們輕鬆串接綠界、藍新……等等好用的金流、物流服務商。
串接好之後，就可以在我們的 WordPress 購物網站上整合這些金流物流公司的服務，讓買家可以順暢的付款、賣家可以輕鬆地寄貨！
為什麼使用 RY WooCommerce Tools 外掛？
有些人可能會好奇：為什麼不直接用綠界官方出的 WordPress 外掛做金流跟物流的串接？而是另外使用 RY WooCommerce Tools 外掛呢？
這是因為，我自己實際使用過後，發現 RY WooCommerce Tools 比綠界官方做的外掛好用很多！
另外，RY WooCommerce Tools 很常更新、優化外掛。
WordPress 外掛其實越常更新越好，這樣才能確保外掛與最新的 WordPress 版本有相容、比較不會有 bug，資安也比較有保障。
在 WordPress 外掛的地方就可以看到，在我錄製教學影片時候 RY WooCommerce Tools 1 週前才剛更新完畢，而綠界官方出的外掛「ECPay Payment for WooCommerce」已經 9 個月沒有更新了！
好，大致了解這些專有名詞之後，我們實際動手開始操作吧！
步驟 1：串接綠界金流與物流
安裝外掛
我們要到 WordPress 後台，點左側選單的「外掛」。
再點左上角的「安裝外掛」。
在右上角搜尋欄，我們用「關鍵字」搜尋，並輸入「RY WooCommerce Tools」。
之後點「立即安裝」。
再點「啟用」。
基本設定
接下來，我們要做 RY WooCommerce Tools 的基本設定。
點左側選單「WooCommerce」的「設定」。
切換到「RY Tools」分頁。
- 金流模組的欄位，要勾選「啟用綠界金流模組」。
- 物流模組的欄位，要勾選「啟用綠界物流模組」。
往下滑，一般選項、地址選項欄位裡的項目，全部選勾起來，之後按「儲存設定」。
更新完再刷新一次頁面，我們可以發現多了「綠界金流設定」和「綠界物流設定」兩個選項。
串接金流
我們先來串接金流，點「綠界金流設定」。
啟用 / 停用的欄位，我們勾選「啟用綠界金流模組」。
往下滑，綠界金流測試模式的欄位，也勾選「啟用綠界金流測試模式」。
接下來我們要填 MerchantID (特店編號) 跟 HashKey、HashIV 這兩個金鑰。
在串接網站金流、物流的時候，通常會先填測試用的介接資料跑測試模式，等整個流程跑順了、確定沒有問題之後，才會改填正式的介接資料、轉成正式模式。
先做過測試後，才不會有消費者已經付款，我們卻沒順利收到錢的情形發生。
好，那我們要先來跑綠界金流的測試模式，測試版的介接資料我們可以在綠界官網找到，你可以點擊連結前往使用。
👉 綠界測試特店資料
在這裡我們要填 C2C 的資料，因為 RY WooCommerce Tools 的免費版只能使用 C2C 模式。
如果你的購物網站要使用 B2C 模式的話，在這裡可以先用 C2C 模式跑跑看，覺得這個外掛做得不錯再付費支持外掛的開發者！
回到教學，我們把「測試特店資料：C2C」的 MerchantID (特店編號)、HashKey、HashIV 填到對應的位置。
接著點「儲存設定」，我們就完成測試用的綠界金流串接了！
串接物流
再來我們要串接物流，點「綠界物流設定」。
啟用 / 停用的欄位，我們勾選「啟用綠界物流模組」。
往下滑，物流單設定的欄位，我們要填寫寄件人姓名、電話、手機、郵遞區號和地址。
再往下滑，綠界物流測試模式的欄位，也勾選「啟用綠界物流測試模式」。
跟剛剛一樣，我們從「測試特店資料：C2C」將 MerchantID (特店編號)、HashKey、HashIV 填到對應的位置。
接著點「儲存設定」，我們就完成測試用的綠界物流串接了！
步驟 2：自訂金流
做跟金流有關的設定，要切換到「付款」的分頁。
啟用付款方式
往下滑，我們可以看到「銀行轉帳、支票付款、貨到付款」是 WooCommerce 預設的金流。
而下面的綠界信用卡、綠界信用卡(分期)、綠界網路ATM、綠界超商代碼、綠界超商條碼」是我們透過 RY WooCommerce Tools 串接綠界後才有的服務。
在第 4 章，我們已經啟用銀行轉帳了。
在這一章，我們要啟用「信用卡、超商代碼、超商條碼」這三個付款方式。
啟用之後，按「儲存設定」，其他的金流就留給你之後自己玩玩看。
編輯金流設定
接下來，我們要編輯金流設定，在綠界信用卡的欄位，點「管理」。
我們把標題欄位裡的「綠界」兩個字刪掉，然後按「儲存設定」。
因為對消費者來說，他們的目的只是用信用卡付款，使用哪種金流服務其實都沒差，但多「綠界」兩個字反而會讓他們產生疑惑。
為了避免消費者誤會，我們就刪除「綠界」兩個字。
有趣的是：
當我們自己動手串接購物網站金流後，以後網購時也會特別注意：他們使用哪種金流服務呢？
我自己的觀察是：
目前台灣的購物網站很多都使用綠界金流服務，所以我才在這個教學特別示範綠界金流。
下次你在網購的時候，也可以觀察、記錄別人是使用哪家金流服務，不斷更新自己對網站工具的知識也是很重要喔！
回到教學，我們按綠界信用卡旁邊的「藍色箭頭」圖標，可以回到上一個頁面。
然後「綠界超商條碼」跟「綠界超商代碼」也用同樣的作法，把「綠界」兩個字刪除後，按「儲存設定」。
網站前台演示
接下來，我們切換到消費者視角的視窗，來演示、檢查目前完成的功能。
在購物網站的商品彙整頁面，我們把商品加入購物車，再來點右上角的「購物車」圖標。
按「前往結賬」。
在結帳頁面往下滑，我們可以在右側欄位、總計的下方看見剛剛啟用的金流，現在有銀行轉帳、信用卡、超商條碼、超商代碼 4 種選擇。
我們等物流設定完畢再跑一次完整的購買流程，這樣你就能更清楚：消費者「下單的實際流程」跟「會看到的介面」。
步驟 3：自訂物流
做跟物流有關的設定，要先回到 WordPress 後台，切換到「運送方式」的分頁。
往下滑，我們點「新增運送區域」的紫色按鈕。
- 區域名稱的欄位，我們輸入「台灣」。
- 區域中的地區欄位，我們輸入「台灣」，然後選擇它。
新增運送方式
再來點「新增運送方式」。
點開選單，我們可以看到現在有很多物流選擇，像是 7-ELEVEN、全家便利店、萊爾富、OK 超商、郵局、黑貓……等等。
那我先示範新增「全家」作為運送方式，選好之後點「新增運送方式」。
把滑鼠移到標題，可以點「編輯」。
標題的欄位，輸入一般消費者習慣看到的「全家」就好，改完之後按「儲存設定」。
接下來，我們看一下購物網站前台有什麼變化，切換到消費者視角的結帳頁面。
- 左側的「運送到不同地址？」欄位要勾選起來。
- 國家/地區或區域的欄位，我們選擇剛剛設定的「台灣」。
之後右側就會出現「全家」這個物流選項了！
設定免運費
大家都喜歡免運、我也喜歡，適當地設定免運可以刺激購物網站的買氣。假設我們要設定「萊爾富滿 199 元免運」的話，要怎麼做呢？
切換回 WordPress 後台，點「新增運送方式」。
點開選單，我們選擇「萊爾富」，選好之後按「新增運送方式」。
把滑鼠移到標題，可以點「編輯」。
- 標題的欄位，改成「萊爾富」就好。
- 如果要免運的話需要..欄位，我們選擇「最小訂購金額」。
最小訂購金額的欄位，我們輸入「199」，之後點「儲存設定」。
接下來，我們切換到消費者視角的視窗，想像一下自己是想要買香氛蠟燭消費者。
在購物網站商品彙整頁面找到「香氛蠟燭」，點進去。
我要買 3 個 99 元的蠟燭金額才會達到免運門檻，所以我把數量調整到 3，按「加入購物車」。
再點「查看購物車」。
在購物車頁面我們可以發現，因為滿足之前設定的「滿 199 免運」條件，當我們的物流選擇「萊爾富」時就不會再被多收運費。
接下來切換回 WordPress 後台。
7-ELEVEN、OK Mart、黑貓宅配、郵局宅配的物流方式，都用同樣的方式新增就好。
新增好之後，我們可以用滑鼠拖曳的方式調整顯示順序，把四大超商放在一起、宅配放在一起，最後按「儲存設定」。
接下來，我們切換到消費者視角的購物車頁面，刷新一下，就可以看到剛剛新增的物流選項了。
步驟 4：測試訂單
接下來我們要模擬消費者的視角測試下訂流程、物流金流功能，所以我先隨意搭配幾種下單模式。
第 1 組試單：信用卡金流 + 全家物流
我們先買 1 個時鐘。
購物車頁面，物流選擇「全家」。
結帳頁面，我們點「選擇超商門市」。
在「正式模式」的話，消費者在這裡就能選擇取貨門市。
但我們目前還在使用綠界的「測試特店」模式，所以無法選擇門市，只能使用預設的選項，我們點「(全家超商)確定門市」。
回到結帳頁面，我們可以看到系統已經套用預設的「全家台醫店」了，左邊的運送地址也自動變成台醫店地址。
然後我們要填寫左側的訂購資訊。
金流的部分，我們選擇「信用卡」，然後點「使用信用卡付款」。
你看！很厲害吧，接下來會出現輸入綠界的信用卡付款頁面。
消費者輸入後我們就可以收到錢了，錢會先進到綠界的系統裡，我們再從綠界提領到自己的銀行帳戶。
但是，因為我們現在在測試模式，我們要使用綠界官網裡提供的「測試卡號」跟「測試安全碼」，你可以從這裡點擊連結前往綠界的網站。
回到綠界信用卡付款頁面。
- 信用卡卡號的欄位，我們輸入綠界提供的測試卡號。
- 卡片有效期限的欄位，我們輸入「比使用當天更晚的時間」就可以了。
- 信用卡安全碼的欄位，我們輸入綠界提供的測試安全碼。
- 手機號碼的欄位，我們要輸入真實的手機號碼，等等會需要用到手機簡訊驗證。
確定有打「紅色星號」的欄位都輸入好之後，我們按「立即付款」。
然後按「確定 Confirm」。
之後輸入手機簡訊收到的驗證碼，然後點「送出驗證」。
跑完傳送交易資料的頁面，我們就成功使用信用卡付款了！
若客人使用「信用卡金流 + 全家物流」就會經過我們剛才的步驟，是不是感覺自己的購物網站變得有模有樣了呀！
第 2 組試單：超商代碼金流 + 萊爾富物流
我們買 3 個香氛蠟燭。
購物車頁面，物流選擇「萊爾富」。
因為結帳金額超過我們設定的 199 元免運門檻，所以免運費。
結帳頁面，我們點「選擇超商門市」。
和剛剛一樣，我們目前只能選擇綠界的預設門市，點「(萊爾富超商)確定門市」。
金流的部分，我們選擇「超商代碼」，然後點「使用超商代碼付款」。
接下來會出現綠界的超商代碼生成頁面，我們往下滑，點「取得繳費代碼」。
跑完傳送交易資料的頁面，我們就生成超商繳費的代碼了！
往下滑，訂單明細會顯示「繳費代碼」和「付款截止日」，因為消費者還沒去繳費，所以付款方式後面也會顯示「尚未付款」。
那消費者要怎麼使用超商代碼繳費呢？
綠界的官網有圖文教學，你可以點擊連結前往綠界的頁面，將這個教學、連結複製起來放到自己的購物網站，附給消費者看，這樣他們就會覺得這個賣家很貼心！
第 3 組試單：超商條碼金流 + 郵局宅配物流
這次我們買 1 張現代沙發。
購物車頁面，物流選擇「郵局宅配」。
結帳頁面，金流的部分，我們選擇「超商條碼」，然後點「使用超商條碼付款」。
接下來會出現綠界的超商條碼生成頁面，我們往下滑，點「取得繳費條碼」。
跑完傳送交易資料的頁面，我們就生成超商繳費的條碼了！
往下滑，訂單明細會顯示「Barcode」三段式條碼和「付款截止日」，因為消費者還沒去繳費，所以付款方式後面也會顯示「尚未付款」。
那消費者要怎麼使用超商條碼繳費呢？
消費者們只要把這個畫面截圖或列印下來，就可以去超商櫃台進行繳費囉！
消費者如何查看訂單？
如果按照這個系列教學操作的話，消費者會 有 2 種 註冊會員帳號的方式。
點右上角的「會員帳號」圖標，進入會員專區。
登入之後，就會看到像這樣的我的帳號頁面。
點擊左側選單的「訂單」。
在訂單頁面，消費者可以看見自己下訂的所有訂單。
動作列的「查看」，可以看到更詳細的訂單資訊。
如何知道有人下單了？
我們開啟 WordPress 後台，點左側選單「WooCommerce」的「訂單」。
這裡會顯示所有消費者的訂單。
如果他已經付款，狀態列會從橘色的「保留」變更成顯示綠色的「處理中」，只要看到這個狀態，賣家就可以準備寄貨了！
另外還有一個方法，就是去綠界後台查詢。
因為目前還在測試特店模式，所以我們要到綠界的測試後台查詢，你可以點擊連結前往綠界的測試後台。
到綠界測試後台的頁面，我們選擇左邊的登入按鈕。
測試用的登入介面上，綠界會提供一組帳號密碼讓我們登入。
我們只要照著輸入就好，之後按「登入」。
在綠界測試店家的頁面，我們選左側選單「一般訂單查詢」的「全方位金流訂單」。
我們先按「查詢」。
往下滑，我們會看到一大堆訂單資料。
因為測試後台是「所有人共用」的，大家都在測試的話就不好找到自己的訂單，所以我們搭配「綠界金流訂單編號」來找到自己的訂單，在正式模式的時候就不用這麼麻煩了。
往上滑，回到「查詢」的區塊，我們把「廠商訂單編號」改成「綠界金流訂單編號」。
然後切換到 WordPress 後台，我們點擊狀態是「處理中」的信用卡訂單。
訂單編號就是畫面上的這一串，我們把它複製起來。
往下滑，確認一下金額是 314 元。
接著回到綠界測試後台，我們將訂單編號貼上，然後按「查詢」。
往下滑，下面就會出現剛剛的信用卡訂單資料，將訂單往右滑確定金額也是 314 元，所以沒錯。
在這裡我們也可以看到訂單的最新狀態，確實在綠界測試後台有找到這筆訂單就對了！
如何列印物流寄貨單？
我們切換回 WordPress 後台，往下滑，在綠界物流資訊的欄位點「列印」，頁面就會轉跳到寄貨單。
我們可以按「列印」按鈕把它列印下來，貼在商品包裝上就可以去超商寄貨了！
如何變更成正式模式？
那我們測試完金流與物流，確定購物網站從下單、收款、到出貨都沒有問題後，要怎麼從「測試特店模式」變更成「正式模式」呢？
首先，我們要在綠界官網註冊一個正式的帳號，你可以點擊下方連結進入綠界官網。
👉 註冊綠界正式帳號
點擊首頁右上角的「註冊」，就可以開始註冊綠界帳號了。
註冊好並登入後，我們可以在綠界首頁的右上角，點「管理後台」。
之後點左側選單「系統開發管理」的「系統介接設定」，就能夠看到正式的介接資訊了。
我們回到 WordPress 後台，點左側選單「WooCommerce」的 「設定」。
切換到「RY Tools」分頁。
點擊「綠界金流設定」。
往下滑，取消綠界金流測試模式的勾選，並刪除原本的測試資料，貼上自己正式的MerchantID (特店編號) 跟 HashKey、HashIV 兩個金鑰，記得要按「儲存設定」。
接下來點擊「綠界物流設定」。
往下滑，一樣取消綠界物流測試模式的勾選、刪除原本的測試資料，再貼上正式的介接資訊後，記得要按「儲存設定」。
這樣我們的購物網站就從「測試特店模式」變更成「正式模式」了！
消費者付款後，錢會先進到你的綠界帳戶，然後你可以再去綠界後台提款，將款項匯入你的銀行帳戶。
太棒了！
只要順著這個系列的 6 章教學操作，你就已經架設好一個好看，而且功能強大的 WordPress 購物網站，可以實際收到貨款並出貨了！
《WordPress 購物網站架設教學》結尾
諾特斯團隊花了很多時間、心力、金錢來製作《WordPress 購物網站架設教學》。
蒐集資料、研究軟體 / 工具、編排課程、製作動畫、剪輯影片、上字幕、圖文教學 … 等等，有記錄的時間，我們總共就花了 572 小時以上。
我們把這些用心製作的內容免費分享給你，希望這樣的教學對你有幫助。
如果你想看其他我製作的免費網站架設教學的話，可以點網站右上角的「開始架站」按鈕。
這裡整理了我製作的所有跟 WordPress 相關的圖文、影片教學，
你可以透過這邊的資源有系統地學習如何用 WordPress 架設網站。
好，這個《WordPress 購物網站架設教學》系列到這裡也要結束了，感謝你看到最後，祝架站順利！
參考資料
- The Complete WooCommerce Tutorial 2021 (eCommerce Tutorial)
- How to Make an E-Commerce Website (2022) Online Shopping Store
- 20 WordPress Statistics You Should Know in 2022
- How To Make a Website – Absolute Beginners – All in One Step by Step – 2019
- Cloudways 官網
- Namecheap 官網
- How to Manage Your Domain DNS Records
- How to Setup Cloudways The Right Way
- How To Make a Website – Absolute Beginners – All in One Step by Step – 2019
- WP Mail SMTP Documentation
- 綠界測試介接資訊
- WordPress 外掛 – RY WooCommerce Tools
- Github – 綠界科技 WooCommerce 模組
- RY WooCommerce Tools 外掛：金物流設定＋使用教學
- Woocommerce購物車整合綠界金流 完整指南
- 測試頁面：綠界廠商管理後台
- 超商代碼 / 條碼：綠界消費者付款問題
製作團隊
撰稿、總編輯、發佈：諾特斯
文字編輯、圖片編輯：蚊子
訂閱
0 則留言