如何自定義 WooCommerce 電子郵件 + 發送前預覽
已發表: 2022-04-15為如何自定義 WooCommerce 電子郵件而苦惱?
WooCommerce 已經為新訂單、已處理訂單和新帳戶等 10 多種操作提供了自動交易電子郵件。 但是,您可能希望自定義這些電子郵件以使它們成為您自己的。
在這個分步教程中,您將學習如何使用 WooCommerce 中的內置設置自定義 WooCommerce 電子郵件,以及一些免費或付費插件,您可以使用這些插件來更好地控製商店的電子郵件。
目錄:
為什麼要自定義 WooCommerce 電子郵件?
- 從默認的 WooCommerce 紫色更改為更適合您品牌的顏色。
- 向電子郵件模板添加個性化和品牌聲音。
- 更改“發件人”名稱或“發件人”地址等設置。
- 添加媒體元素,如徽標、標題圖像或動畫 GIF。
- 停用一些不適合您的操作的自動消息。
- 鏈接到支持頁面、追加銷售或促銷。
- 在 HTML 和文本電子郵件類型之間切換。
- 在打開電子郵件進行自動化之前預覽電子郵件的外觀。
如何自定義 WooCommerce 電子郵件
只需 WooCommerce 中的內置設置,您就可以自定義 WooCommerce 電子郵件的多個部分,包括:
- 電子郵件發件人選項️
- 一般電子郵件主題
- 特定的電子郵件內容
我們將在下面向您展示如何自定義這些內置設置。 然後,在那之後,我們還將分享一些 WooCommerce 電子郵件自定義插件,如果需要,它們可以為您提供更大的靈活性。
第 1 步:轉到 WooCommerce 中的電子郵件設置
在您的 WordPress 儀表板中,導航到WooCommerce > 設置 > 電子郵件。 在這裡,您將看到電子郵件通知的標題,以及 WooCommerce 已經為您配置的默認通知電子郵件的列表。

第 2 步:自定義電子郵件發件人選項和模板
滾動瀏覽電子郵件通知列表,找到名為“電子郵件發件人選項”的部分。
您將看到兩個字段:
- “發件人”名稱:客戶在收到電子郵件時看到的名稱——堅持企業名稱,或者如果他們是您的品牌戰略的一部分,則可能是真實的人。
- “發件人”地址:用戶在回復自動電子郵件時可以聯繫的“發件人”電子郵件地址。
根據需要修改這些字段。

在電子郵件模板部分下,您可以開始自定義元素,例如:
- 標題圖片
- 頁腳文本
- 基本顏色
- 車身背景顏色
- 正文文本顏色
如果要向電子郵件添加自定義標題圖像,請將圖像的 URL 粘貼到“標題圖像”字段中。 您可以在 WordPress 媒體庫中託管圖像並從那裡獲取圖像 URL。
我們還建議從頁腳中刪除“使用 WooCommerce 構建”文本。 歡迎您在頁腳中添加您想要的任何其他內容。

在電子郵件模板區域的下方,您會找到一般 WooCommerce 電子郵件模板的顏色設置。 如前所述,WooCommerce 會自動添加其默認的紫色作為基色,這不是您在運行在線商店時想要的。
選擇與您的品牌相對應的顏色作為基礎顏色,並在需要時考慮更改其他顏色字段。
完成後單擊保存更改。

第 3 步:自定義特定的 WooCommerce 電子郵件
從新訂單電子郵件到已完成訂單電子郵件,WooCommerce 提供預設模板,這些模板會自動發送給網站管理員和客戶,讓每個人都了解訂單。 但是,您需要自定義其中一些電子郵件以包含您自己的內容並刪除一些不必要的 WooCommerce 默認值。
通過單擊要編輯的電子郵件旁邊的管理來完成這些單獨的電子郵件自定義。 從“處理訂單”和“已完成訂單”電子郵件開始並不是一個壞主意,因為這些是客戶最常查看的。

根據您的需要瀏覽以下字段:
- 啟用/禁用
- 主題
- 電子郵件標題
- 附加內容
我們建議您啟用所有 WooCommerce 電子郵件,除非您有特殊情況不需要其中任何一封,或者您打算為交易電子郵件使用單獨的插件。
主題、電子郵件標題和附加內容等字段決定了您的整體電子郵件內容,因此請根據需要進行調整。

點擊“?” 圖標以查看哪些動態佔位符可插入到內容字段中。 例如,您可以使用佔位符讓 WooCommerce 在每封電子郵件中填寫指向您網站的鏈接。

第 4 步:將其設為 HTML 或純文本電子郵件
單擊電子郵件類型字段以查看您的選項。 選擇以下選項之一:
- 純文本:沒有圖像或格式的電子郵件
- HTML:具有豐富內容的電子郵件,例如圖像、表格和格式
- Multipart:這是基於用戶的電子郵件客戶端在純文本和 HTML 之間動態切換,因為某些客戶端不支持 HTML 電子郵件
第 5 步:考慮編輯 HTML 模板
在頁面的最底部,您會看到一個名為“HTML 模板”的部分。 WooCommerce 的電子郵件沒有拖放編輯器,但您可以自定義每封電子郵件的 HTML 代碼。
單擊查看模板按鈕以查看其代碼。

WooCommerce 會鎖定其默認 HTML 模板,因此您無法編輯任何內容。 但是,您可以單擊將文件複製到主題按鈕來覆蓋和編輯模板。


之後,您可以將光標放入文本編輯器並進行更改。 如果您精通 HTML,我們僅建議您使用此部分。

如果您不喜歡直接編輯此代碼,您可能需要聘請 WordPress 開發人員。 或者,您可以嘗試我們將在下一節中分享的 WooCommerce 電子郵件插件之一。
這就是您自定義 WooCommerce 電子郵件的方式! 單擊保存更改按鈕以完成該過程。

如何預覽 WooCommerce 電子郵件
您必須在發送給客戶之前預覽您的交易電子郵件。 這樣,您可以檢查拼寫錯誤、需要更改的 WooCommerce 品牌以及促銷或追加銷售的機會。
這是預覽您的 WooCommerce 電子郵件的方法。
第 1 步:查看常規電子郵件模板的視覺預覽
在WooCommerce > 設置 > 電子郵件下,找到電子郵件模板部分,然後單擊“單擊此處預覽您的電子郵件模板”鏈接。

這將打開一個新的瀏覽器窗口,顯示帶有您指定的常規電子郵件設置的電子郵件。 如果您更改了所有這些,您應該會看到新的顏色、標題圖像和編輯的頁腳。 請記住,模板預覽的內容仍然是通用的。

第 2 步:運行測試事務以查看具有動態內容的單個電子郵件
您很可能希望查看發送給客戶的實際電子郵件,但 WooCommerce 缺乏查看這些視覺預覽的功能。 相反,您必須運行測試事務以將電子郵件觸發到您自己的收件箱。
這是如何做到的:
- 確保您已激活 WooCommerce Payments 和 Stripe 付款方式。
- 將商品添加到購物車並像客戶一樣填寫信息。
- 在電子郵件字段中,添加您的電子郵件地址。
- 在信用卡字段中,使用其中一張 Stripe 測試卡來處理付款。
- 完成退房。
測試交易應向您發送一封訂單處理電子郵件,讓您可以查看電子郵件如何呈現給客戶。 檢查動態標籤是否正確顯示,以及所有品牌和插入的文本是否正確顯示。

要觸發其他電子郵件,請轉到WooCommerce > 訂單,然後將狀態字段調整為其他內容。 例如,您可以將其切換為Completed以觸發來自 WooCommerce 的Completed Order電子郵件。 確保單擊更新按鈕以保存更改。

然後它會發送到您的收件箱供您查看。

為了簡化流程,您可以考慮使用 WooCommerce 電子郵件測試之類的插件。
幫助自定義 WooCommerce 電子郵件的插件
幾個插件提供了高級 WooCommerce 電子郵件自定義工具,它們要么擴展了 WooCommerce 中的當前功能,要么完全覆蓋它們以獲得更加用戶友好(通常是拖放)的體驗。
以下是一些需要考慮的 WooCommerce 定制器插件:
您還可以使用電子郵件營銷服務覆蓋 WooCommerce 交易電子郵件,例如 Omnisend、MailPoet 或 Sendinblue,所有這些都提供電子商務自動化和其他選項,例如廢棄購物車恢復。
立即自定義您的 WooCommerce 電子郵件
在本文中,我們介紹了:
- 為什麼你應該自定義 WooCommerce 電子郵件。
- 如何自定義 WooCommerce 電子郵件的整體設置和設計。
- 如何自定義特定的交易電子郵件。
- 如果您有經驗,如何控制電子郵件 HTML。
- 為 WooCommerce 電子郵件添加更多功能的插件,例如拖放和可視化工具。
大多數初出茅廬的電子商務商店都可以擺脫基本的 WooCommerce 電子郵件自定義,但我們建議最終支付高級電子郵件編輯器的費用,例如我們上面介紹的插件或電子郵件營銷軟件之一。
弄清楚商店的交易電子郵件後,您也可以閱讀我們的 WooCommerce 電子郵件營銷指南,以確定您的營銷電子郵件。
如果您需要有關如何自定義 WooCommerce 電子郵件的任何說明,或者想與其他用戶分享您編輯電子郵件的任何提示,請在評論中給我們留言!