WooCommerce 訂單信件客製化:YayMail Email 模板
教你用 YayMail 免費拖曳編輯器客製化 WooCommerce 訂單確認信、處理中與已完成等交易型 Email 模板,加上 LOGO、品牌色、折價券與社群按鈕,把預設灰底白字信變成建立信任的品牌接觸點。
作者:褚崇名(Sliven)
本頁目錄
- 為什麼你該把通知信當成品牌門面,而非系統附屬品
- WooCommerce 預設會寄哪些信?先把這八張明信片摸清楚
- 改信件之前,先把這四項品牌資產備齊
- 為什麼是 YayMail:原生設定做不到的這六件事
- 從零裝好 YayMail:安裝與基礎設定
- 用區塊編輯器打造第一封品牌信件:以「處理中」為例
- 第一層:結構區塊先排好
- 第二層:品牌視覺套進去
- 第三層:動態欄位接上訂單資料
- 第四層:手機預覽按下去,不要偷懶
- 第五層:寄一封真的測試信,不要只信預覽
- 讓信件「會讀人」:動態內容與個人化的正確用法
- 行動裝置優先:超過一半的信在手機上被打開
- 八封信不等於八倍工時:信件優先級矩陣
- 多語系與在地化:一封信服務不同語言的買家
- 改信件最常見的五個坑:這些都是實務上反覆出現的事故
- 上線前的十項驗收清單
- 下一步行動方案:四步把品牌信件做起來
客人付完錢那一刻,是你跟他之間信任最脆弱的瞬間,而他手上唯一能證明這筆交易成立的,就是那封通知信。WooCommerce 預設卻常以灰底白字、Logo 歪一邊的出廠樣貌把它寄出去,等於把建立信任的關鍵接觸點交給了系統預設值。
這一篇要回答的核心問題只有一個:怎麼用 YayMail 把 WooCommerce 預設的系統信件,改造成客人願意點開、願意信任、甚至願意回購的品牌接觸點。答案我先講在前面:你不需要懂 PHP,也不需要碰 WooCommerce 模板檔(那些 customer-processing-order.php 之類的東西),只要裝好 YayMail、把品牌色票與 Logo 準備好,用拖拉區塊的方式就能把八封預設信件全部統一成同一張臉。
為什麼你該把通知信當成品牌門面,而非系統附屬品
很多店長把心力全砸在商品頁、購物車、結帳流程,卻把訂單信件丟給系統預設值。這個落差值得停下來想一下。
客人在結帳那一刻,跟你之間的信任其實是最脆弱的。錢付出去之後,他手上唯一能證明「這筆交易真的成立」的東西,就是那封通知信。信件長得像詐騙集團的罐頭簡訊,跟信件長得像一個有設計感的品牌在跟他對話,帶來的安心感完全不同。根據 W3Techs 的市佔統計(2026 年 6 月),WooCommerce 在全球電商平台的市占是壓倒性的多數,意思是你跟成千上萬的店家共用同一組預設信件外觀,你不改,客人根本分不清是誰寄的。
更重要的是,根據 HubSpot State of Marketing Report(2025 年),電子郵件在 B2C 品牌的投資回報長期排在所有行銷通道的前段班。通知信不是行銷信,但它每天自動寄出、零邊際成本、開信率遠高於任何電子報。換句話說,這是你手上最便宜、最穩定的品牌曝光管道,而你居然讓它維持出廠預設。
一句話定位:WooCommerce 通知信是你不花廣告費、每天自動曝光幾十次的品牌看板。它現在長什麼樣,就是客人心裡對你品牌的最深印象。
還有一個角度常常被忽略:通知信是你跟客人之間「接觸頻率最高、卻最不被當回事」的溝通管道。客人一個月可能只回你網站兩三次,但他每下一筆單、每改一次密碼、每次退款,都會收到一封信。這些信累積起來的印象,比任何一次性的廣告投放都更深、更持久。你花幾萬塊買廣告流量,客人三天就忘了;但你把每一封交易信件都設計成品牌該有的樣子,那個印象會跟著他每一次互動慢慢固化。這就是為什麼我會把信件設計歸類為「品牌資產」,而非單純的「系統設定」。
WooCommerce 預設會寄哪些信?先把這八張明信片摸清楚
開始改之前,先盤點你要改的到底是什麼。WooCommerce 在「WooCommerce > 設定 > 電子郵件」這一頁底下,預設會寄出好幾封交易信件。我把實務上最該關注的幾封列成這張表,你會發現它們的「投資優先級」天差地遠。
| 信件類型 | 觸發時機 | 客人會不會看 | 設計優先級 |
|---|---|---|---|
| 新訂單(給店主) | 客人下單當下 | 你自己看 | 低,看得懂就好 |
| 處理中(給客人) | 訂單成立、待出貨 | 極高,幾乎必開 | 最高,門面擔當 |
| 已完成(給客人) | 你標記出貨完成 | 高,等收貨的人會反覆點 | 最高 |
| 客戶發票 / 訂單細節 | 付款完成 | 中高,報帳需求會回找 | 高 |
| 訂單失敗 | 刷卡失敗 | 高,但情境是焦慮 | 中,要安撫兼引導重試 |
| 退款 | 你執行退款 | 極高,信任危機點 | 高,語氣要謹慎 |
| 密碼重設 | 客人忘記密碼 | 中,但低頻 | 低,套用主模板即可 |
| 帳號建立 / 歡迎 | 註冊或社群登入完成 | 中 | 中,回購引導點 |
這張表藏著一個多數人沒意識到的事實:八封信的價值並不平均。「處理中」跟「已完成」這兩封是客人主動等、主動開、開了還會存起來反覆看的,它們才是你該花九成心力打磨的對象。相對的,密碼重設、帳號建立這類低頻信,只要套用同一組品牌模板、不要看起來像系統錯誤頁就好,不必為它們單獨做精緻設計。
如果你的站還搭配了願望清單、社群登入這類功能,相關的通知信也會進到這個清單裡,建議你在改信件之前,把站上所有「會自動發信」的外掛一次列出來,否則改完 WooCommerce 原生那八封,才發現願望清單外掛寄出來的信還是預設樣式,功虧一簣。你可以回頭參考WooCommerce 願望清單的設定教學跟社群登入設定,確認這些外掛各自會發哪些信。
改信件之前,先把這四項品牌資產備齊
每次要改信件,第一個動作不是打開 WordPress,而是先開一個資料夾,把這四樣東西丟進去。工欲善其事,先把自己準備好,否則你會在 YayMail 編輯器裡面邊想邊改,改到一半發現 Logo 解析度不夠、顏色跟網站對不起來,整個流程卡住。
- 透明底 Logo:準備 PNG 或 SVG,寬度抓 200 到 300 像素之間。信件頂部的 Logo 是客人第一眼辨識你品牌的唯一線索,解析度不夠在手機上會糊成一片。
- 品牌色票三色:主色、輔助色、背景色。很多店主在信件裡把品牌色全塗上去,結果整封信五顏六色像促銷傳單。正確做法是主色只用在一個地方(按鈕或標題列),背景保持白或極淺灰,讓資訊喘息。
- Footer 資訊架構:公司全名、統一編號、客服聯絡方式、退換貨政策連結、社群帳號。這一塊在台灣法規上尤其重要,發票與交易確認信件附上完整公司資訊,對消費爭議處理是基本防線。
- 一組字體層級:標題用什麼、內文用什麼、數字(金額)用什麼。多數信件用系統預設字體就夠了,但金額那一行如果換成等寬字體或加粗,客人掃視時一眼就能對到數字。
把這四樣東西備齊,你後面在 YayMail 裡的每一步都有明確依據,不會淪為「感覺對了就調一下」的無止境微調。
為什麼是 YayMail:原生設定做不到的這六件事
一定有人會問:WooCommerce 後台的「自訂」按鈕不是也能改信件嗎?老實說,那個按鈕能做的事非常有限。它本質上是 WordPress 的 Customizer,只能改 header 文字、Logo、幾個顏色變數、底部版權聲明,連一個欄位的順序都調不動。如果你曾經想「把訂單明細移到信件最上面、讓客人第一眼看到自己買了什麼」,原生設定就完全幫不了你。
我把原生設定跟 YayMail 的能力落差整理成這張表,你看完就會明白為什麼幾乎所有認真的 WooCommerce 店長最後都會裝一個信件設計外掛:
| 能力 | WooCommerce 原生 | YayMail 區塊編輯器 |
|---|---|---|
| 調整欄位順序 | 不行 | 拖拉任意排序 |
| 新增自訂區塊(圖片、按鈕、社群圖示) | 不行 | 內建數十種區塊 |
| 逐封信件獨立設計 | 只能全域改色 | 每封信獨立模板 |
| 行動裝置即時預覽 | 無 | 桌面/手機/純文字切換 |
| 條件式內容(分眾顯示) | 無 | 依訂單狀態、商品分類動態切換 |
| 需具備 PHP 能力 | 進階客製要改範本檔 | 完全免程式 |
如果你目前還在比較不同信件外掛,還沒決定要用哪一套,可以先看過我們的信件設計外掛實測比較,那篇把幾套主流方案的定位與適合場景拆得更細。這一篇我直接鎖定 YayMail 往下走,因為它的區塊編輯器對「不寫程式但要品牌化」的需求來說,目前是最順手的選擇。
從零裝好 YayMail:安裝與基礎設定
假設你的 WooCommerce 已經跑得起來(如果還沒,這篇從安裝到收款的完整教學可以幫你把底子打好),接下來就是把 YayMail 裝上去。
安裝流程跟絕大多數 WordPress 外掛一樣,從後台「外掛 > 安裝外掛」搜尋 YayMail,或上傳官方下載的 zip 檔,啟用後它會在側邊選單多出一個獨立入口。如果你對安裝步驟還不熟,WordPress 外掛安裝的三種方法把細節寫得很清楚,這裡不重複。我要特別提醒的是三個裝完立刻要做的設定:
- 確認發信管道:YayMail 只負責「設計信件長相」,真正把信寄出去的是 WordPress 底層的 wp_mail。如果你的站還在用 PHP mail 預設值,信件高機率掉進垃圾信箱,你設計得再漂亮客人都看不到。請務必裝好可靠的SMTP 發信設定,這一步是信件能不能被看見的地基。
- 備份現有信件設定:改之前,把目前「WooCommerce > 設定 > 電子郵件」每一封的標題、描述、收件人備份下來。YayMail 啟用後會接管顯示層,但這些欄位值你要留底,萬一要回滾才不會手忙腳亂。
- 測試模式先開著:YayMail 有「預覽並寄送測試信」的功能,設計階段全程用測試信寄到自己的信箱,不要拿真實訂單去驗收。等到全部信件定稿,再正式上線。
這裡順帶回答一個很多人會問的問題:YayMail 要用免費版還是付費版?免費版已經能讓你用區塊編輯器改掉大部分預設信件的外觀,對「先看看這套工具順不順手」的需求來說完全夠用。但你一旦要做到前面講的條件式區塊(依商品分類、訂單金額動態顯示內容)、自訂信件主旨、或是多語系模板切換,這些多半落在付費版的功能範圍。我的建議是先用免費版把「處理中」這一封完整做完,做完之後你會很清楚自己需不需要那些進階能力,再決定要不要升級,不要一開始就為了用不到的功能付費。
特別提一下金流這一環。你站的訂單信件觸發時機,跟金流外援回報的狀態直接綁在一起。如果你用RY WooCommerce Tools 接綠界金流,刷卡成功、失敗、退款這些狀態都會觸發對應信件,等於你的「訂單失敗」「退款」這幾封信的設計,會直接影響到金流卡關那一刻客人收到的體驗。設計這幾封信的時候,務必站在「客人現在很焦慮」的角度去想語氣與按鈕引導。
用區塊編輯器打造第一封品牌信件:以「處理中」為例
進入 YayMail 之後,你會看到一個依信件類型排列的模板清單。挑「Processing Order(處理中訂單)」這一封來實作,因為它是客人開信率最高、最能建立品牌印象的一封,把它打磨好,其他信件就能沿用同一套設計語言。
第一層:結構區塊先排好
一封品牌信件的骨架,我習慣拆成五個區塊,由上到下:Logo 區、問候與訂單摘要、商品明細、下一步行動按鈕、Footer。原生信件的問題在於這五個區塊的順序是固定的、間距是擠在一起的,YayMail 讓你能把它們重新拉開、重新排序。我的建議順序是:Logo 之後立刻接「訂單已成立」這句主訊息,再接訂單編號與金額摘要,讓客人一開信、前三秒就確認「我的錢沒有白付」。
第二層:品牌視覺套進去
結構排好之後,回到你前面備妥的品牌資產。Logo 區上傳透明底 PNG,設定點擊後回到商店首頁;主色套在「下一步行動」那顆按鈕上(例如「追蹤我的訂單」),其餘區塊保持白底深灰字。這裡有一個常見的坑:Logo 圖檔太大會把整封信撐爆,桌面上看正常,手機上卻出現橫向捲軸。解法是在 YayMail 的圖片區塊裡把寬度設成百分比(100% 或 max-width),而非固定像素。
第三層:動態欄位接上訂單資料
YayMail 最有價值的能力,是它內建一整組「動態欄位」,可以把訂單裡的即時資料插進信件。客人姓名、訂單編號、商品清單、金額、收貨地址、出貨追蹤碼,這些全部是變數,不需要你手動填。你只要把對應的欄位區塊拖到定位,系統會在每一封寄出的信裡自動帶入正確的值。
這一點是信件設計能不能「規模化」的關鍵。沒有動態欄位,你改完一封信的外觀,還是得擔心客人姓名有沒有帶對、金額有沒有算錯。有了動態欄位,設計一次、套用千次,而且每一封都精準。
第四層:手機預覽按下去,不要偷懶
YayMail 編輯器右上角有桌面與手機的切換鈕。改到一個段落,務必切到手機模式看一次。很多在桌面上漂亮的設計,到了手機就出問題:按鈕被擠到換行、商品圖片佔掉整個螢幕、Footer 的多欄位資訊疊在一起難以閱讀。這些只有切到手機預覽才看得出來。
第五層:寄一封真的測試信,不要只信預覽
設計到一個段落,YayMail 可以把這封信寄到你自己指定的信箱。這一步千萬不要省。預覽畫面跟真實信箱裡的呈現,永遠會有落差:預覽不會顯示 Gmail 把你信件主旨截斷成什麼樣子、不會顯示圖片被阻擋下載時的破圖、不會顯示 preheader 在不同螢幕寬度下被切掉的尾巴。你唯有真的寄一封給自己、在 Gmail 與 Apple Mail 各開一次、在手機與桌面各看一次,才會知道客人實際收到的是什麼模樣。這個習慣養成之後,你未來改任何一封信都不會再被「上線才發現問題」這種事嚇到。
讓信件「會讀人」:動態內容與個人化的正確用法
把信件變漂亮只是第一步。真正讓信件開始產生商業價值的,是個人化與分眾。這裡有一組很關鍵的數字:根據 HubSpot State of Marketing Report(2023 年),分眾郵件帶來的開信率比不分眾高出 30%,點擊率高出 50%。這組數字講的雖然是行銷電子報,但背後的道理完全適用交易信件:客人愈覺得「這封信是為我量身做的」,他愈願意互動。
在 YayMail 裡落實個人化,有兩個層次可以做:
第一層,欄位級個人化。最基本也最有效。問候語帶客人姓名、訂單摘要帶他實際買的商品名稱與圖片、出貨信件帶追蹤碼。這一層做起來門檻最低,但對客人感知的提升最大,因為它直接消除了「這是一封群發罐頭信」的感覺。
第二層,條件式區塊。YayMail 允許你設定某個區塊只在特定條件下顯示。例如:只有「商品分類包含保養品」的訂單,才在 Footer 上方插一段保養品的使用教學連結;只有「訂單金額超過三千元」的客人,才看到一張下次消費的專屬折扣碼。這就是分眾的雛形,你不需要額外的行銷自動化系統,光靠交易信件本身就能做到差異化溝通。
這裡要誠實提醒一個界線。交易信件的本質是「告知」,不是「推銷」。客人付了錢,他想確認的是訂單有沒有成立、貨什麼時候到,這時候你塞一堆促銷訊息進去,反而會稀釋信任。個人化的正確用法,是讓資訊更清楚(帶商品圖、帶追蹤碼、帶預計到貨日),而非把訂單確認信變成第二次促銷。行銷用途的主動電子報,請交給專門的工具去處理,Mailchimp 訂閱表單或EDM 行銷自動化工具才是它該住的地方,不要硬塞進交易信件裡。
換個方式想:交易信件是「售後服務的延伸」,它的工作是安撫與確認;行銷電子報是「再行銷的起點」,它的工作是誘發下一次購買。兩者用同一張臉(品牌視覺一致),但職責涇渭分明。把它們搞混,是很多店家信件愈改愈亂的根源。行銷電子報那一端的經營,可以接著看怎麼用 Mailchimp 把行銷電子報跑起來。
行動裝置優先:超過一半的信在手機上被打開
前面提過手機預覽的重要性,這裡把它拉成一個獨立的主題來談,因為比例實在高到不能輕忽。2026 年第一季,全球網站流量有 52.27% 來自行動裝置(不含平板;依 Statista 的統計)。你的訂單信件,超過一半是在一個五到六吋的螢幕上被閱讀的。
這代表你在 YayMail 裡的每一個設計決策,都要以手機視角為第一優先,桌面反而是次要。具體來說,我會盯著這幾個檢查點:
- 按鈕大小:按鈕的高度至少 44 像素,這是手指點擊的舒適尺寸。低於這個值,客人要精準戳好幾次才點得到。
- 單欄優先:手機上多欄排版幾乎必崩。商品明細、Footer 資訊預設都做成單欄由上到下閱讀,不要勉強排成兩欄三欄。
- 圖片重量:一封信總圖檔控制在幾百 KB 以內。商品圖太多、太大,在行動網路下載慢,客人等不及就關掉,開信等於沒開。
- Preheader(預覽文字):信件列表上標題旁邊那行預覽文字,是決定開信率的第二關鍵(第一是標題)。YayMail 可以單獨設定 preheader,不要讓它預設帶出「在瀏覽器中檢視」這類系統字串,要寫一句對客人有意義的話,例如「您的訂單 #1234 已成立,預計 3 個工作天出貨」。
- 字級與行距:手機上的正文字級建議不要低於 14 像素,行距拉開到 1.5 倍以上。字太小、行距太擠,客人在捷運上單手滑信件會直接放棄閱讀,等於你設計的內容完全沒有被看見。
做個對比:HubSpot Marketing Statistics(2025 年)顯示,業界平均的電子郵件點擊率約落在 2.5%。這個數字看似不高,但它衡量的是「客人點了信件裡的連結」這個動作。你的交易信件如果在手機上排版崩壞、按鈕點不到,這 2.5% 的點擊機會就被你自己抹掉了,而你完全不知道。
八封信不等於八倍工時:信件優先級矩陣
這一段是我最想跟每一個第一次改信件的店長說的話。
以一個美妝保養品牌的 WooCommerce 站為例,狀況常跟多數站長一樣:八封信全想改,結果前兩封「處理中」與「已完成」還沒打磨完,工時就耗掉大半,後面六封只好草草套用同一組配色交差,反而讓退訂、重設密碼這類低頻信件看起來與品牌調性脫節。這個教訓值得用一套「優先級矩陣」來分配工時,不再無腦平均分散。
矩陣的兩個軸是「客人開信頻率」與「商業價值」。開信頻率高、又直接關係到收款與信任的,投入最高規格設計;頻率低、但僅做品牌一致性的,套用主模板統一管理即可。我把它寫成這張行動表:
| 信件 | 開信頻率 | 商業價值 | 投入程度 |
|---|---|---|---|
| 處理中、已完成 | 極高 | 建立信任、引導回購 | 單獨精修,每封 1 到 2 小時 |
| 客戶發票、退款 | 高 | 報帳、危機處理 | 精修語氣與結構 |
| 訂單失敗 | 高(焦慮情境) | 挽回訂單 | 重視引導重試的按鈕 |
| 帳號建立、密碼重設 | 低 | 功能性 | 套主模板,不單獨設計 |
這張表的核心觀念是:設計資源要集中在客人感受最強的那幾個瞬間。前兩封信做扎實,客人對你品牌的印象就立住了;後面六封只要維持視覺一致,不要出現破綻(例如字體跑掉、顏色不對),就足以撐起整體品牌感。把省下來的工時拿去優化商品頁或結帳流程,對整體轉換率的幫助會大得多。
講到結帳流程,信件設計跟結帳體驗其實是連續的兩段旅程。客人填完結帳表單、送出訂單的那一刻,緊接著收到的就是「處理中」這封信。如果結帳頁用了欄位編輯器調整過欄位,或加了縣市下拉選單優化地址填寫,這些欄位帶出來的資料會直接出現在信件的收貨資訊裡。你的信件設計要預留好這些動態欄位的顯示位置,否則欄位一多就會把版面撐亂。
把矩陣記在心裡,還有一個附帶好處:它幫你擋掉「完美主義」這個隱形成本。很多店長卡在信件設計做不完,不是因為不會做,而是因為想八封一次到位、每一封都要獨一無二。這種心態會讓你永遠停在「還沒做好」的狀態,一封都上不了線。矩陣的價值在於它給你一個明確的「夠用」標準:高優先級的信做到精修,低優先級的信做到品牌一致,只要兩端都到位,整個信件系統就算完成,可以正式上線,而非無止境地打磨下去。先上線、再迭代,永遠比完美才上線來得實際。
多語系與在地化:一封信服務不同語言的買家
如果你的店同時賣給台灣與海外買家,信件的多語系就會浮上來成一個真實問題。WooCommerce 預設信件只會用站點的預設語言寄出,但你的買家可能習慣讀英文或日文。一封品牌信件如果能在不同買家手裡自動切換成他的語言,那種「被照顧到」的感覺會直接轉成信任。
實務上有兩個層面要處理。第一是字串翻譯,也就是信件裡那些固定的標籤文字(「訂單明細」「收貨地址」「商品」),這要用Loco Translate之類的工具把字串檔備齊多語版本,YayMail 才有辦法在對的語言下帶出對的文字。第二是信件模板本身的多語切換,這部分要看你用的多語外掛(例如 Polylang 或 WPML)與 YayMail 之間的整合狀況,進階方案通常需要付費版才支援依語言套用不同模板。
給一個務實的起點:先把單一語言(繁體中文)的信件做到位、做到品牌一致,這是 80% 的價值來源。多語系是那剩下的 20%,等你的海外訂單真的穩定成長了再投入,不要一開始就為了可能根本不存在的海外市場把流程弄得太複雜。把基礎語言版本打磨到極致,遠比同時維護三個語言卻每一個都半調子來得有價值。
改信件最常見的五個坑:這些都是實務上反覆出現的事故
信件設計的坑,多半不是出在 YayMail 本身,而是出在「設計與實際發信環境脫節」。這五個情境在實務裡反覆出現,每一個都值得你在動工前就知道。
第一個坑:改完設計,卻沒有用真實金流跑過一次完整觸發。很多人只在 YayMail 裡按「寄送測試信」,測試信是用假資料生成的,看起來完美。但真實客人下單時,金流外援回報的狀態順序、商品名稱的長度、變動商品(variable product)的規格字串,都可能跟測試資料差很多。結果是設計沒問題、上線後第一封真實信件卻爆版。正確做法是改完之後,用自己的測試帳號走完一次刷卡(用小額或測試卡號)、一次退款、一次失敗訂單,把真實觸發的信件全部收一次。
第二個坑:動態欄位帶出空白或預留位文字。這通常發生在客人帳號資料不完整時。例如客人用社群登入快速結帳,沒填姓名欄位,信件裡的問候語就會出現「親愛的 ,」這種尷空白,或直接顯示變數名稱 {customer_first_name}。防範方法是給每一個動態欄位一個「兜底值」(fallback),當欄位為空時顯示「親愛的顧客」之類的中性稱呼,而非留白。
第三個坑:只在桌面預覽,手機上完全崩掉。前面已經強調過行動裝置的佔比,這裡補一個更細的點:不同郵件用戶端對 HTML 與 CSS 的支援程度差很多。Gmail 會主動移除某些 style、Apple Mail 對媒體查詢(media query)的處理跟 Outlook 又不同。你設計的圓角按鈕、漸層背景,在某些用戶端會被降級成陽春方塊。YayMail 會在區塊上標示相容性提示,看到警告就要有心理準備,不要假設所有人看到的都跟你預覽的一模一樣。
第四個坑:把促銷內容塞進交易信件。前面提過這個界線,這裡把它講得更狠一點。訂單確認信裡塞一整區促銷商品、塞大張折扣碼圖片,是很多店長直覺會做的事,因為「開信率這麼高,不利用可惜」。但交易信件的信任基礎是「這封信只講我這筆訂單的事」,一旦客人感覺到「這封信也在推銷」,信任就會打折。真正聰明的做法,是讓交易信件乾淨到位,把促銷與回購引導留給獨立的行銷流程,靠訂閱表單與電子報系統去做。
第五個坑:YayMail 跟原生設定打架。YayMail 啟用後,原生「WooCommerce > 設定 > 電子郵件」裡的標題、描述、收件人欄位仍然有效,它們控制的是信件的主旨與邏輯層,而 YayMail 控制的是顯示層。如果你改了 YayMail 的視覺,卻沒回頭檢查原生那邊的主旨列(客人收到信時列表上顯示的那行字),就會出現「信件內容很品牌化、主旨卻還是英文預設值」的斷層。主旨是開信率的第一關,它跟信件內容必須一起改、一起測。
上線前的十項驗收清單
信件設計改完,不要直接上線。這張清單是上線前一定會跑過一遍的檢查項目,照著走可以擋掉八成的事故:
| 序號 | 檢查項目 | 為什麼重要 |
|---|---|---|
| 1 | 每一封信都寄一封測試信到自己信箱 | 實際收一次,比任何預覽都準 |
| 2 | 確認 SMTP 發信正常、未進垃圾信箱 | 設計再美,進垃圾信等於零 |
| 3 | 手機預覽逐封信看過一次 | 超過一半收信者在手機上 |
| 4 | Logo 在行動裝置上清晰、不變形 | 品牌辨識的第一線 |
| 5 | 動態欄位全部帶出正確值(姓名、金額、訂單編號) | 帶錯資料的信比沒設計更糟 |
| 6 | 按鈕可點擊、連結導向正確頁面 | 引導下一步動作的關鍵 |
| 7 | Preheader 文字有意義、非系統預設字串 | 影響開信率的第二因素 |
| 8 | Footer 公司資訊完整(統編、客服、退換貨) | 法規與消費爭議的基本防線 |
| 9 | 暗色模式(dark mode)下可讀性檢查 | 許多郵件用戶端預設暗色 |
| 10 | 退訂與帳號相關信件語氣得體 | 危機情境的文字最容易翻車 |
這十項跑完,信件才算真正具備上線條件。其中第 9 項特別容易被忽略:不少郵件用戶端(Gmail、Apple Mail)會自動把信件轉成暗色背景,如果你的 Logo 是深色字體、沒有考慮反白版本,在暗色模式下會直接隱形。YayMail 允許你針對暗色模式單獨調整,值得多花十分鐘處理。
下一步行動方案:四步把品牌信件做起來
看完這麼多,比起記住細節,更重要的是立刻動手。我給你一個可以今天執行的四步行動方案:
- 盤點:打開你的 WooCommerce 信件設定頁,把目前寄出的每一封信列成清單,標註哪些信件你曾經被客人抱怨過、哪些你自己也覺得醜。這張清單就是你後續投入工時的依據。
- 備料:把前面講的四項品牌資產(Logo、色票、Footer、字體層級)整理進同一個資料夾。這一步不做,後面每改一封信都會卡。
- 攻堅一封:只挑「處理中」這一封,用 YayMail 從結構、視覺、動態欄位、手機預覽四個層次完整做完,寄一封測試信到自己手機上實際收一次。這一封做完,你的品牌信件就立住了八成的視覺基礎。
- 橫向展開:把這一封定下來的模板與設計語言,套用到「已完成」「發票」這幾封高優先級信件,低頻信件則維持同一套模板不做單獨設計。用優先級矩陣分配工時,而非平均分散。
這四步走完,你會得到一個非常具體的成果:一封客人收到會願意多看兩眼、會願意存起來、會願意拿去跟朋友說「你看這家店連信件都做得這麼用心」的品牌信件。而那種「用心」的感覺,是你花多少廣告費都買不到的東西,它只能靠這種一封一封打磨的笨功夫累積出來。
品牌信件需要隨商品、政策與顧客需求持續維護。先建立一致的版型與內容規則,之後調整換季視覺、新商品線或海外版本時,就能在既有結構上更新;但仍應定期測試行動版、連結、訂單欄位與寄送結果。若顧客確實偏好其他通知方式,可再評估LINE 推播或簡訊訂單通知,並確認同意、費用與個資處理要求。
如果你在信件設計的過程中,同時也在思考整個 WooCommerce 站點的品牌定位與開店平台選擇,可以回頭參考主流電商平台的比較分析,確認你選對了地基;如果想用 Divi 主題把整個網站的視覺一起拉起來,Bloom 訂閱表單搭配 Divi 的做法也跟信件品牌化是同一條設計軸線上的事。網站、信件、表單三者用同一張臉,你的品牌辨識度才會真正立得起來。
常見問題
顧客收到的訂單確認信對應哪個模板?
YayMail 免費版什麼時候才真的不夠用?
YayMail 能用來發電子報嗎?
操作步驟
- 選對模板:在 Email 控制區切換到「處理中的訂單(Processing Order)」,確認啟用開關已打開。
- 放 LOGO:拖 Logo 元素到信件頂部,或點現有區塊用 Change image 更換,可調 Width 與 Padding。
- 文字與短代碼:在 Text 元素內使用 [yaymail_site_name] 等動態短代碼,自動帶入網站名稱、訂單號等資料。
- 訂單明細:拖 Order Item 與 Billing/Shipping Address 元素,顯示交易細節與帳單運送地址。
- 佈局與折價券:用 Image + Text 元素以單欄由上到下排列放折價券,券碼用純文字呈現,避免手機上多欄崩版。
- 社群按鈕:拖 Basic > Social Icon,設定各平台連結與按鈕樣式。
- 整體配色:到 Settings > Email Settings 改 Email 背景與連結顏色,避免按鈕色跟品牌色打架。
- 手機預覽:切到行動裝置模式逐區塊檢查按鈕大小、單欄排版與圖片寬度,完成後按 Save 並發測試信驗證。