WooCommerce 訂單信件客製化：YayMail Email 模板

WooCommerce 交易信件讓顧客查閱訂單與下一步行動，值得和網站一起維護品牌識別。通知信不是交易成立或收款的唯一證明；設計之外，也要確認訂單狀態、實際金流與信件是否正確觸發。

這一篇要回答的核心問題只有一個：怎麼用 YayMail 把 WooCommerce 預設的系統信件，改造成客人願意點開、願意信任、甚至願意回購的品牌接觸點。答案我先講在前面：你不需要懂 PHP，也不需要碰 WooCommerce 模板檔（那些 customer-processing-order.php 之類的東西），只要裝好 YayMail、把品牌色票與 Logo 準備好，用拖拉區塊調整目前版本支援的交易信件；額外外掛模板、條件式內容與物流變數需另外核對授權及相容性。

為什麼你該把通知信當成品牌門面，而非系統附屬品

很多店長把心力全砸在商品頁、購物車、結帳流程，卻把訂單信件丟給系統預設值。這個落差值得停下來想一下。

W3Techs 的統計可反映 WooCommerce 使用程度，不能證明所有商店共用同一外觀或顧客一定無法辨識寄件人。先讓店名、訂單識別、金額與客服方式清楚，再依品牌需要調整版面。

一般 Email 行銷統計不能直接代表你的交易信件開信率或投資回報。交易信件也有寄送、設計及維護成本，應以實際通知需求、寄送紀錄和客服問題決定投入。

WooCommerce 交易信件的首要工作是清楚告知訂單與下一步；一致的品牌視覺可協助辨識，但不能保證開信或回購。

訂單、退款與帳號通知是客人持續接觸商店的管道。將寄件名稱、Logo、訂單資訊與客服方式保持一致，有助於客人辨認寄件者並完成下一步。交易信件的首要工作仍是準確傳達狀態，品牌視覺應服務這個目的。

WooCommerce 會寄哪些信：先盤點實際啟用的模板

開始改之前，先盤點你要改的到底是什麼。WooCommerce 在「WooCommerce > 設定 > 電子郵件」這一頁底下，預設會寄出好幾封交易信件。我把實務上最該關注的幾封列成這張表，你會發現它們的「投資優先級」天差地遠。

以上是常見例子，不是核心永遠只有八封信。保留、取消、帳號及擴充外掛的郵件也要盤點；依商店實際寄送量與任務重要性排優先級，不應只憑假設的開信率忽略密碼重設等關鍵功能。

如果你的站還搭配了願望清單、社群登入這類功能，相關的通知信也會進到這個清單裡，建議你在改信件之前，把站上所有「會自動發信」的外掛一次列出來，否則改完 WooCommerce 已啟用的核心信件，才發現願望清單外掛寄出來的信還是預設樣式，功虧一簣。你可以回頭參考WooCommerce 願望清單的設定教學跟社群登入設定，確認這些外掛各自會發哪些信。

改信件之前，先把這四項品牌資產備齊

每次要改信件，第一個動作不是打開 WordPress，而是先開一個資料夾，把這四樣東西丟進去。工欲善其事，先把自己準備好，否則你會在 YayMail 編輯器裡面邊想邊改，改到一半發現 Logo 解析度不夠、顏色跟網站對不起來，整個流程卡住。

1. 透明底 Logo：準備 適當解析度的 PNG 等格式，設定顯示尺寸並在目標郵件客戶端驗證；使用 SVG 前另測支援。信件頂部的 Logo 是品牌辨識線索之一，解析度不夠在手機上會糊成一片。
2. 品牌色票三色：主色、輔助色、背景色。很多店主在信件裡把品牌色全塗上去，結果整封信五顏六色像促銷傳單。正確做法是主色只用在一個地方（按鈕或標題列），背景保持白或極淺灰，讓資訊喘息。
3. Footer 資訊架構：公司全名、統一編號、客服聯絡方式、退換貨政策連結、社群帳號。依商店適用義務與客服需求提供資訊；一般通知信不能代替法定發票或其他應交付文件。
4. 一組字體層級：標題用什麼、內文用什麼、數字（金額）用什麼。多數信件用系統預設字體就夠了，但金額那一行如果換成等寬字體或加粗，客人掃視時一眼就能對到數字。

把這四樣東西備齊，你後面在 YayMail 裡的每一步都有明確依據，不會淪為「感覺對了就調一下」的無止境微調。

原生信件設定與 YayMail 怎麼選

WooCommerce 一般 Email 設定可調品牌、主旨、標題及部分內容；目前也提供需另行啟用的 Block Email Editor（alpha），能編輯區塊式交易信件。不能把核心概括為 WordPress Customizer 或只可改色。先確認版本和啟用的編輯器，再比較 YayMail 是否補上需要的能力。

下面按編輯方式比較。原生 alpha 功能和第三方外掛都需要測試，不宜同時讓多套工具接管同一模板：

如果你目前還在比較不同信件外掛，還沒決定要用哪一套，可以先看過我們的信件設計外掛功能比較，那篇把幾套主流方案的定位與適合場景拆得更細。這一篇我直接鎖定 YayMail 往下走，以它的拖拉區塊編輯方式示範如何調整品牌視覺；是否適合你的流程，仍應用實際通知模板確認。

從零裝好 YayMail：安裝與基礎設定

假設你的 WooCommerce 已經跑得起來（如果還沒，這篇從安裝到收款的完整教學可以幫你把底子打好），接下來就是把 YayMail 裝上去。

安裝流程跟絕大多數 WordPress 外掛一樣，從後台「外掛 > 安裝外掛」搜尋 YayMail，或上傳官方下載的 zip 檔，啟用後可從 WooCommerce 相關選單開啟 YayMail 編輯器，實際入口名稱依版本介面確認。如果你對安裝步驟還不熟，WordPress 外掛安裝的三種方法把細節寫得很清楚，這裡不重複。我要特別提醒的是三個裝完立刻要做的設定：

• 確認發信管道：YayMail 負責支援模板的內容與呈現，真正把信寄出去的是 WordPress 底層的 wp_mail。送達受主機、網域驗證、寄件信譽與郵件服務影響，可透過SMTP 發信設定，與日誌檢查發信；SMTP 本身不能保證進入收件匣。
• 備份現有信件設定：改之前，把目前「WooCommerce > 設定 > 電子郵件」每一封的標題、描述、收件人備份下來。YayMail 啟用後會接管顯示層，但這些欄位值你要留底，萬一要回滾才不會手忙腳亂。
• 先用預覽與測試信：YayMail 有「預覽並寄送測試信」的功能，設計階段全程用測試信寄到自己的信箱，再以服務商允許的測試訂單驗證觸發與資料，避免只測靜態版面。

免費版可編輯支援的核心模板；Pro 側重第三方欄位、整合與其他進階能力，第三方 Email 模板也可能另需 addon。條件式內容應核對 Conditional Logic addon，多語則依對應整合要求。修改核心 Email 主旨本身不代表必須付費，先列實際需求再購買。

特別提一下金流這一環。你站的訂單信件觸發時機，跟金流外援回報的狀態直接綁在一起。如果你用RY WooCommerce Tools 接綠界金流，應分別驗證刷卡、失敗與退款事件是否令訂單進入對應狀態，以及該信件是否啟用，等於你的「訂單失敗」「退款」這幾封信的設計，會直接影響到金流卡關那一刻客人收到的體驗。設計這幾封信的時候，務必站在「客人現在很焦慮」的角度去想語氣與按鈕引導。

用區塊編輯器打造第一封品牌信件：以「處理中」為例

進入 YayMail 之後，你會看到一個依信件類型排列的模板清單。挑「Processing Order（處理中訂單）」這一封來實作，它能作為包含品項、金額與地址的設計範例；是否優先仍看商店需求，把它打磨好，其他信件就能沿用同一套設計語言。

第一層：結構區塊先排好

一封品牌信件的骨架，可以分成 Logo、問候與訂單摘要、商品明細、下一步行動、Footer。傳統模板、WooCommerce 的新版郵件編輯功能與 YayMail 可調整的範圍不同，要以目前啟用的編輯器為準。配置時先讓客人看清楚訂單狀態、編號與金額，再放相關操作與客服資訊。

第二層：品牌視覺套進去

結構排好之後，回到你前面備妥的品牌資產。Logo 區上傳透明底 PNG，設定點擊後回到商店首頁；主色套在「下一步行動」那顆按鈕上（例如「追蹤我的訂單」），其餘區塊保持白底深灰字。這裡有一個常見的坑：Logo 圖檔太大會把整封信撐爆，桌面上看正常，手機上卻出現橫向捲軸。應設定適合郵件容器的 Logo 顯示寬度，並以實際收信檢查窄螢幕是否橫向溢出；可用設定依編輯器版本核對。

第三層：動態欄位接上訂單資料

姓名、訂單編號、商品與地址可使用支援的區塊或 shortcode 帶入。出貨追蹤碼與額外結帳欄位並不是所有商店都自動具備；需要先有資料，再確認 Pro 或 addon 的整合支援。每種模板的可用欄位也應在實際訂單驗證。

這一點是信件設計能不能「規模化」的關鍵。沒有動態欄位，你改完一封信的外觀，還是得擔心客人姓名有沒有帶對、金額有沒有算錯。有了動態欄位，設計一次、套用千次，但仍需測試空值、長商品名、變體、退款與不同付款方式。

第四層：手機預覽按下去，不要偷懶

YayMail 編輯器右上角有桌面與手機的切換鈕。改到一個段落，務必切到手機模式看一次。很多在桌面上漂亮的設計，到了手機就出問題：按鈕被擠到換行、商品圖片佔掉整個螢幕、Footer 的多欄位資訊疊在一起難以閱讀。手機預覽可先找出版面問題，仍須寄送到主要郵件客戶端實際檢查。

第五層：寄一封真的測試信，不要只信預覽

設計完成後，用 YayMail 寄測試信到指定信箱，檢查主旨、前置摘要、圖片阻擋與手機版面。編輯器預覽未必和收件端相同，應在顧客常用的郵件服務及裝置驗證；再以測試訂單確認實際資料、觸發和附件，不能只靠一封預覽信排除所有問題。

讓信件「會讀人」：動態內容與個人化的正確用法

行銷郵件基準可提供分眾構想，但不能把其開信與點擊增幅直接套在交易信件。先讓每位顧客取得正確訂單資訊，再用實際樣本評估個人化內容是否有幫助。

在 YayMail 裡落實個人化，有兩個層次可以做：

第一層，欄位級個人化。最基本也最有效。問候語帶客人姓名、訂單摘要帶他實際買的商品名稱與圖片、出貨信件帶追蹤碼。這一層做起來門檻最低，但對客人感知的提升最大，因為它直接消除了「這是一封群發罐頭信」的感覺。

第二層，條件式區塊。YayMail 的 Conditional Logic addon 可依其支援條件控制區塊顯示；先確認授權及版本，而不是預設免費或 Pro 本體已含全部功能。例如：只有「商品分類包含保養品」的訂單，才在 Footer 上方插一段保養品的使用教學連結；只有「訂單金額超過三千元」的客人，才看到一張下次消費的專屬折扣碼。這就是分眾的雛形，你不需要額外的行銷自動化系統，光靠交易信件本身就能做到差異化溝通。

這裡要誠實提醒一個界線。交易信件的本質是「告知」，不是「推銷」。客人付了錢，他想確認的是訂單有沒有成立、貨什麼時候到，這時候你塞一堆促銷訊息進去，反而會稀釋信任。個人化的正確用法，是讓資訊更清楚（帶商品圖、帶追蹤碼、帶預計到貨日），而非把訂單確認信變成第二次促銷。行銷用途的主動電子報，請交給專門的工具去處理，Mailchimp 訂閱表單或EDM 行銷自動化工具才是它該住的地方，不要硬塞進交易信件裡。

換個方式想：交易信件是「售後服務的延伸」，它的工作是安撫與確認；行銷電子報是「再行銷的起點」，它的工作是誘發下一次購買。兩者用同一張臉（品牌視覺一致），但職責涇渭分明。把它們搞混，是很多店家信件愈改愈亂的根源。行銷電子報那一端的經營，可以接著看怎麼用 Mailchimp 把行銷電子報跑起來。

行動裝置驗收：以實際收信環境檢查

全球網站流量統計量的是網站瀏覽，不是 Email 開信裝置，因此不能推論你的訂單信超過一半在手機閱讀。仍應測試主要手機與桌面郵件客戶端，並注意開信追蹤受到隱私功能影響。

這代表你在 YayMail 裡的每一個設計決策，都要以手機視角為第一優先，桌面反而是次要。具體來說，我會盯著這幾個檢查點：

• 按鈕大小：按鈕的高度至少 44 像素，這是手指點擊的舒適尺寸。這是設計目標，實際還要看寬度、間距與客戶端呈現。
• 單欄優先：多欄在窄螢幕需有可讀的堆疊或縮排方式。商品明細、Footer 資訊預設都做成單欄由上到下閱讀，不要勉強排成兩欄三欄。
• 圖片重量：一封信總圖檔控制在幾百 KB 以內。商品圖太多、太大，在行動網路下載慢，客人等不及就關掉，開信等於沒開。
• Preheader（預覽文字）：信件列表上標題旁邊那行預覽文字，可協助顧客辨識內容。依所用版本檢查 preheader 設定，不要讓它預設帶出「在瀏覽器中檢視」這類系統字串，要寫一句對客人有意義的話，例如「您的訂單 #1234 已成立，預計 3 個工作天出貨」。
• 字級與行距：手機上的正文字級建議不要低於 14 像素，行距拉開到 1.5 倍以上。字太小、行距太擠，客人在捷運上單手滑信件會直接放棄閱讀，等於你設計的內容完全沒有被看見。

一般 Email 點擊基準不是這間商店的預期點擊率。交易信可能在不點擊的情況下已完成告知；評估時應同時看資料是否正確、顧客能否完成下一步，以及客服問題是否改善。

按任務安排信件設計優先級

這一段是我最想跟每一個第一次改信件的店長說的話。

以一個美妝保養品牌的 WooCommerce 站為例，狀況常跟多數站長一樣：所有信件都想一起改，結果前兩封「處理中」與「已完成」還沒打磨完，工時就耗掉大半，其他信件只好草草套用同一組配色交差，反而讓退款、重設密碼這類低頻信件看起來與品牌調性脫節。這個教訓值得用一套「優先級矩陣」來分配工時，不再無腦平均分散。

先依信件任務、實際寄送量與錯誤風險分配工時。下表是規劃建議，沒有預設任何信件的開信率或固定製作時間：

可以沿用同一套品牌基礎，但每種信件的資料與動作都要驗收。視覺完成不等於信件功能完成，也不能直接保證品牌印象或轉換率提升。

講到結帳流程，信件設計跟結帳體驗其實是連續的兩段旅程。客人填完結帳表單、送出訂單的那一刻，收到哪封信取決於付款方式和狀態，可能是保留、處理中或其他通知。如果結帳頁用了欄位編輯器調整過欄位，或加了縣市下拉選單優化地址填寫，需核對這些欄位是否保存並由目前模板輸出，額外欄位未必自動出現在收貨資訊。你的信件設計要預留好這些動態欄位的顯示位置，否則欄位一多就會把版面撐亂。

把矩陣記在心裡，還有一個附帶好處：它幫你擋掉「完美主義」這個隱形成本。很多店長卡在信件設計做不完，不是因為不會做，而是因為想八封一次到位、每一封都要獨一無二。這種心態會讓你永遠停在「還沒做好」的狀態，一封都上不了線。矩陣的價值在於它給你一個明確的「夠用」標準：先建立共用視覺，再逐封驗證觸發、資料與連結；完成適用的功能驗收後才上線，而非無止境地打磨下去。先上線、再迭代，永遠比完美才上線來得實際。

多語系與在地化：一封信服務不同語言的買家

多語信件要看網站、訂單語言、多語外掛與模板整合。不能把所有 WooCommerce 郵件都概括為固定使用站點預設語言，也不能只翻譯文字就保證會依買家語言寄送。

實務上有兩個層面要處理。第一是字串翻譯，也就是信件裡那些固定的標籤文字（「訂單明細」「收貨地址」「商品」），這要用Loco Translate之類的工具把字串檔備齊多語版本，但翻譯檔本身不負責選擇每筆訂單的語言，仍需對應整合。第二是信件模板本身的多語切換，這部分要看你用的多語外掛（例如 Polylang 或 WPML）與 YayMail 之間的整合狀況，進階方案通常需要付費版才支援依語言套用不同模板。

先支援實際顧客需要的語言，建立可維護的基礎模板，再測試不同語言下單、退款與帳號信件。沒有商店數據，不宜用固定的 80／20 比例評估多語價值。

改信件最常見的五個坑：這些都是實務上反覆出現的事故

信件設計的坑，多半不是出在 YayMail 本身，而是出在「設計與實際發信環境脫節」。這五個情境在實務裡反覆出現，每一個都值得你在動工前就知道。

第一個坑：改完設計，卻沒有用真實金流跑過一次完整觸發。很多人只在 YayMail 裡按「寄送測試信」，YayMail 可選樣本訂單或實際訂單填入預覽資料；即使預覽無誤，仍需另以測試訂單核對實際觸發與付款狀態。但真實客人下單時，金流外援回報的狀態順序、商品名稱的長度、變動商品（variable product）的規格字串，都可能跟測試資料差很多。結果是設計沒問題、上線後第一封真實信件卻爆版。正確做法是改完之後，先依金流商規則以 Sandbox 或測試帳號走完付款；正式小額驗收也須符合服務商規則、一次退款、一次失敗訂單，把真實觸發的信件全部收一次。

第二個坑：動態欄位帶出空白或預留位文字。這通常發生在客人帳號資料不完整時。例如客人用社群登入快速結帳，沒填姓名欄位，信件裡的問候語就會出現「親愛的 ，」這種尷尬的空白，或直接顯示變數名稱 {customer_first_name}。先確認所用欄位或整合是否支援預設值；不支援時可用不依賴姓名的中性問候，並以缺值的測試訂單核對最終輸出。

第三個坑：只在桌面預覽，手機上完全崩掉。前面已經強調過行動裝置的佔比，這裡補一個更細的點：不同郵件用戶端對 HTML 與 CSS 的支援程度差很多。Gmail 會主動移除某些 style、Apple Mail 對媒體查詢（media query）的處理跟 Outlook 又不同。你設計的圓角按鈕、漸層背景，在某些用戶端會被降級成陽春方塊。依目前編輯器可用提示與官方文件檢查，並實際收信驗證，不要假設所有人看到的都跟你預覽的一模一樣。

第四個坑：把促銷內容塞進交易信件。前面提過這個界線，這裡把它講得更狠一點。訂單確認信裡塞一整區促銷商品、塞大張折扣碼圖片，是很多店長直覺會做的事，因為「開信率這麼高，不利用可惜」。但交易信件的信任基礎是「這封信只講我這筆訂單的事」，一旦客人感覺到「這封信也在推銷」，信任就會打折。真正聰明的做法，是讓交易信件乾淨到位，把促銷與回購引導留給獨立的行銷流程，靠訂閱表單與電子報系統去做。

第五個坑：YayMail 跟原生設定打架。YayMail 啟用後，原生「WooCommerce > 設定 > 電子郵件」裡的標題、描述、收件人欄位仍然有效，它們控制的是信件的主旨與邏輯層，而 YayMail 控制的是顯示層。如果你改了 YayMail 的視覺，卻沒回頭檢查原生那邊的主旨列（客人收到信時列表上顯示的那行字），就會出現「信件內容很品牌化、主旨卻還是英文預設值」的斷層。主旨是開信率的第一關，它跟信件內容必須一起改、一起測。

上線前的十項驗收清單

上線前逐項記錄測試結果，涵蓋版面、資料、連結與觸發；這份清單不能保證攔下固定比例的問題：

暗色模式的處理會隨 Gmail、Apple Mail、Outlook 等客戶端與版本不同。請測試 Logo、文字與按鈕對比，必要時調整圖片底色及保守樣式；不要假設 YayMail 有一個設定就能統一控制所有客戶端的暗色結果。

下一步行動方案：四步把品牌信件做起來

看完這麼多，比起記住細節，更重要的是立刻動手。我給你一個可以今天執行的四步行動方案：

1. 盤點：打開你的 WooCommerce 信件設定頁，把目前寄出的每一封信列成清單，標註哪些信件你曾經被客人抱怨過、哪些你自己也覺得醜。這張清單就是你後續投入工時的依據。
2. 備料：把前面講的四項品牌資產（Logo、色票、Footer、字體層級）整理進同一個資料夾。這一步不做，後面每改一封信都會卡。
3. 攻堅一封：只挑「處理中」這一封，用 YayMail 從結構、視覺、動態欄位、手機預覽四個層次完整做完，寄一封測試信到自己手機上實際收一次。用這一封建立可沿用的版型，再依不同通知的用途調整。
4. 橫向展開：把這一封定下來的模板與設計語言，套用到「已完成」「訂單詳細資料」這幾封高優先級信件，低頻信件則維持同一套模板不做單獨設計。用優先級矩陣分配工時，而非平均分散。

完成後，應得到內容清楚、不同裝置可讀、動態訂單資料正確的通知信。是否減少客服詢問或改善後續互動，仍要從實際回覆與使用情況確認，不以視覺改版保證顧客反應。

品牌信件需要隨商品、政策與顧客需求持續維護。先建立一致的版型與內容規則，之後調整換季視覺、新商品線或海外版本時，就能在既有結構上更新；但仍應定期測試行動版、連結、訂單欄位與寄送結果。若顧客確實偏好其他通知方式，可再評估LINE 推播或簡訊訂單通知，並確認同意、費用與個資處理要求。

如果你在信件設計的過程中，同時也在思考整個 WooCommerce 站點的品牌定位與開店平台選擇，可以回頭參考主流電商平台的比較分析，確認你選對了地基；如果想用 Divi 主題把整個網站的視覺一起拉起來，Bloom 訂閱表單搭配 Divi 的做法也跟信件品牌化是同一條設計軸線上的事。網站、信件、表單三者用同一張臉，你的品牌辨識度才會真正立得起來。