WooCommerce 快速預覽電子郵件的設計

電子商務交易的電子郵件通知信也是網站整體形象的一個很重要部分，千萬不要以為把 WooCommerce 內預設的電子郵件通知信的顏色改一改就以為沒問題了，如果是你個人自己賣些小東西的話，那也就可以不用這麼計較。

通知信的設計應該要和網站的色調及感覺一致，基本上設計不用太花俏，只需要把重點放在好閱讀及簡潔感就可以，但難的地方就是看起來越簡單的設計其實就越難，若一開始沒靈感的話，可以先從網站的主色調另搭配一或兩個子色系著手，再把字體調整至適當的大小或是改變字型，這樣子很快就能把通知信的設計輪廓給勾略出來。

設計通知信的另一個重點，就是要預覽設計的結果，相信每個人都很討厭這個步驟，不是因為有什麼高難度的技巧，而是因為要一直把信寄出，再來回到信箱中查看，天啊! 這是多麼沒效率和消磨熱情的一件事情，更別說還要進行交易的程序還有等待收發信的時間，說到這痛處時你一定也在苦笑吧!?

沒關係，好在@learnwithmattc 終於忍受不了這件鳥事了，所以寫了一支用瀏覽器就能快速預覽通知信的 PHP 片段碼來解救眾生。

WooCommerce Preview Emails

特點

能快速的檢視所有的訂單通知信設計，以及查看所有的歷史訂單記錄，有沒有覺得從天上降下了一道署光!?

安裝步驟

1. 到 github 下載壓縮檔或是 點我 直接下載。

2. 解壓縮後，把 emails 資料夾上傳到下方看起來綠綠的路徑中。也許你已有修改過 email-header.php 和 email-footer.php 這兩個檔案，若是怕被覆蓋，在上傳之前先比對不同的地方再自己手動修改即可。

your-child-themes/woocommerce/

3. 開啟主題中的 functions.php，把下方又是綠綠的的片短碼寫入後存檔。

require_once( ( get_stylesheet_directory() ) . '/woocommerce/emails/woo-preview-emails.php' );

使用方式

上面步驟都完成之後，在進入 WooCommerce 設定中的電子郵件，就能看見開啟預覽的連結。

用力點下連結之後，人生從此豁然開朗。預覽通知信的使用方式如下:

最後，如果你喜歡這個片段碼或者它對你的工作有幫助的話，請別吝嗇移駕你的貴手到作者的 github 上，幫他按個 Star 報答一下人家的恩情吧!