內容目錄
歡迎回到鵠學苑 — WordPress 網頁設計超詳細攻略 – WooCommerce 教學（電子郵件設定） 主要是說明在 WooCommerce 基本設定頁面中要如何對電子郵件發送做設定，並且能夠懂得如何變更電子郵件顯示內容與外觀，能做設定的電子郵件通知項目並不難，運用一些 WooCommerce 內建的代碼，就能為整體下單流程帶出全自動的電子郵件通知方式，不僅是向商家通知有新訂單的訊息，同時也會向顧客發送已購買的商品資訊內容，更重要的時如果是以轉帳付款下單，也會將轉帳付款帳號同樣顯示在通知電子郵件中，相當方便。
另外在第二小節中也會簡單介紹 WooCommerce 基本設定中最後的進階選項，會簡單解說如何指定或變更網站電子商務系統的重要頁面，接下來就進入教學內容。接下來跟著鵠學苑的腳步，讓我們開始學習吧！
WooCommerce 下載點
https://tw.wordpress.org/plugins/woocommerce/
WooCommerce 官方說明文件
https://docs.woocommerce.com/
WooCommerce WordPress 外掛技術支援論壇
https://wordpress.org/support/plugin/woocommerce/
商家收取訂單與顧客下單行為使用電子郵件通知設定方式
第一步：進入 WooCommerce 設定後，點選電子郵件頁籤選項。
第二步：在電子郵件設定介面中，最左方打勾的符號代表此通知方式是啟用的狀態 ; 電子郵件下方是會發送電子郵件通知的動作 ; 收件者則是會收到此通知的電子郵件信箱，如果顯示為顧客，則代表會傳送到顧客下單購買或帳號註冊時所提供的電子信箱。而最後一列的管理按鈕則是可以對電子郵件發送內容做詳細設定。
第三步：以新訂單的電子郵件通知項目為例，以下說明：
- 啟用/停用：勾選擇啟用通知。
- 收件者：要收到新訂單通知的電子信箱地址，預設是網站建置時申請的電子信箱，可以直接做變更。
- 主旨：[{site_title}]：新訂單 #{order_number} 這組設定為系統預設，也就是會在通知電子郵件中顯示 [網站名稱]：新訂單 #訂單編號，網站名稱是在 WordPress 後台一般>設定中所填入的網站標題，而訂單編號則是 WooCommerce 對每一筆訂單自動生成的編號，另外也能使用{order_date} 來顯示訂單日期。也就是説此欄位提供 {site_title}、{order_number}、{order_date} 三種代碼。
- 電子郵件標題：與主旨的設定方式相同，預設會顯示為新訂單：#1234。
第四步：下圖是收到新訂單的電子郵件內容，以上一步使用預設的方式對照的話，鵠崙設計 – 購物網站範例 等於 {site_title}、748 等於 {order_number}、 2019-04-21 等於 {order_date} ，參照後就能了解該如何設定欄位值。
第五步：電子郵件發送選項中可以自訂寄件者名稱與電子郵件地址，按照本身需求輸入即可，而下方電子郵件樣板則可以根據自己喜愛的樣式來改變信件內容與外觀，一般來說頁首圖片都會使用網站 Logo 或品牌標誌，讓顧客更了解是在商品是在哪一個網站購買的，設定方式要輸入圖片位址，可以在媒體庫中點選圖片後將圖片網址複製並貼上即可，格式為 https://www.design-hu.com.tw/wp-content/uploads/年份/月份/圖片名稱.png。
頁尾文字指的是顯示在電子郵件內容最下方的內容，可以使用 HTML 元素來編輯，如果不懂如何改，只需要變更網址即可。另外下方則是設定電子郵件所要顯示的顏色，點選色塊按鈕後可以直接以色彩樣盤選擇想要的顏色。
第六步：下圖是點選預覽電子郵件樣板的文字後可以先查看設定後的電子郵件外觀樣式如何，下圖為預設的樣式。
電子商務系統頁面指定與網址名稱
第一步：在 Woocommerce 設定中選擇最後的進階頁籤，在下圖標示處可以看到這裡分別設定 Woocommerce 各頁面的位置， Woocommerce 在安裝完成後就會自動建立這些頁面，在沒有重新建立這些頁面的情況下，只需要根據選項一一選擇對應的頁面即可。
在安全結帳中如果網站沒有申請 SSL (https)，如果勾選強制使用的話在結帳時會出現問題，因此如果網站網址是以 http 開頭，則不要勾選此項目。
第二步：在沒有客製化結帳流程的狀態下，這些名稱都不需要變動，也不要隨意更改名稱，有很大的機會造成結帳問題。
結語：
電子郵件通知的設定非常重要，尤其是在向顧客通知的郵件，一定要啟用並且正確設定內容，在確保每一個以不同付款方式下單的顧客都能收到訂單通知郵件的狀態下，建議在金流物流建立好之後，自行在網站中嘗試下單，測試在不同條件狀態下購買商品是否都能正確收到對應的郵件通知，這樣也是一種比較保險的驗證做法，
今天的教學到這裡告一段落了，不要忘記在右側訂閱鵠學苑電子報，確保收到最新 WordPress 教學文章，如果有網頁設計相關需求，或者想了解最新網站知識，也可以到 鵠崙設計 做線上免費諮詢喔！我們下次的教學見～
woocommerce相關文章：
網站架設知識推薦閱讀
Google One 介紹 – 全新雲端硬碟方案，擴充更多儲存空間！
Site Kit WordPress Plugin – Google SEO 整合工具外掛介紹
Google 搜尋 新增簡易指令：before: & after 快速篩選搜尋結果
