WooCommerce：如何在不編碼的情況下自定義電子郵件模板
已發表: 2021-08-05
每天，您可能會在各種界面中使用拖放操作。 例如，將您的 Gmail 項目拖放到其類別中，將文件上傳到 WordPress 媒體庫，或組織您的手機主屏幕應用程序。
雖然許多頁面構建器平台可以幫助您通過拖放來設計您的網站，但構建 WooCommerce 交易電子郵件仍然被認為是一項複雜的任務。
默認情況下，WooCommerce 電子郵件設置僅允許您更改基本顏色配置文件和文本。 為了進一步定制，您將不得不修改主題代碼。
如果您是非技術人員並且不想破解 wp-content/plugins/woocommerce/templates/emails/email-styles.php 左右腳本之間的代碼，請使用拖放式電子郵件構建器框架是最好的解決方案。
介紹 YayMail
YayMail 是為 WooCommerce 部署的電子郵件構建器平台。
它的開發以易用性為主要目標，但已針對最大的 Web 瀏覽器和電子郵件客戶端兼容性進行了測試，同時關注響應能力。
您可以從 WordPress.org 免費下載和使用它。 此開源代碼永遠免費，您無需升級到任何高級版本即可完全自定義所有默認的 Woo 電子郵件模板。
現在您已經安裝並激活了它，前往WooCommerce >電子郵件定制器以訪問電子郵件編輯器。
使用拖放電子郵件生成器設計電子郵件
作為類似於 Elementor 頁面構建器的拖放編輯器，YayMail 在同一屏幕上提供了所有選項和設置。
1.上部工具欄
在這裡，您將找到所有可用 WooCommerce 電子郵件模板的第一個下拉列表。 根據您當前站點上的活動 WooCommerce 插件，您將在此處看到新模板。
如果使用 WooCommerce 會員插件，您將擁有額外的電子郵件模板，例如會員 - 歡迎、會員提醒、會員過期等。
第二個下拉菜單“樣品訂單”允許您選擇任何真實訂單，以查看電子郵件的動態字段在特定購物者端的顯示方式。
在這個上部工具欄上，您還可以找到最常用的操作按鈕，包括：
- 簡碼：從此處複製簡碼，然後將其粘貼到電子郵件設計的相應塊中。
- 發送測試電子郵件：一鍵將測試消息發送到任何電子郵件地址，以查看您設計的電子郵件在收件箱中的外觀。
- 空白：清除所有電子郵件塊，以便您可以擁有一個完全空白的畫布，然後您可以開始為自己的目的進行設計。
- 複製模板：從以前設計的模板複製並將其粘貼到當前的電子郵件正文中。 然後你可以做一些小調整，以免從頭開始。
- 重置模板：此選項將您的模板重置為初始狀態，這意味著您仍然擁有默認的電子郵件塊。
- 預覽：立即在桌面和移動視圖上查看您的自定義電子郵件。
- 保存：隨時保存您的編輯。
2.可折疊側板
YayMail WooCommerce 電子郵件定制器的側面板由兩個選項卡組成：元素和設置。
所有元素都是可拖動的，並包括大量的自定義選項。 例如，標題塊允許您編輯其填充、背景顏色、文本顏色、字體系列和其他視覺選項。
雖然元素選項卡中的更改僅適用於所選塊，但設置中的調整對整個電子郵件模板生效。
因此，一些常用的功能包括：
- 電子郵件容器寬度
- 周邊背景顏色
- 隱藏/顯示產品圖片和 SKU
- 導出/導入電子郵件模板
3.電子郵件預覽
由於它是基於塊的電子郵件生成器，因此您可以向上/向下移動任何塊或使用手柄拖放它。
在右上角，您將有一些選項，例如：
- 複製電子郵件塊
- 將塊複製到另一個模板
- 刪除塊
使用 YayMail，您可以通過更改電子郵件設計和佈局進行無窮無盡的自定義，如果您修改主題代碼文件或使用 WordPress 定制器，則不會發生這種情況。
案例研究：自定義 WooCommerce 訂單確認電子郵件
要開始自定義訂單確認電子郵件，請轉到 WooCommerce > 電子郵件定制器 > 要顯示的電子郵件。 從那裡，您可以選擇Processing order或Completed order 。
從那時起，您可以開始添加您想要的任何元素。 我將要使用的一些元素包括：
- Logo : 上傳透明的 logo 圖像並調整其大小以使其與電子郵件容器寬度對齊
- 社交圖標：輕鬆選擇社交網絡圖標並添加每個平台的 URL
- 標題：編輯標題文本、標題字體、文本顏色和背景顏色
- 圖像：添加自定義圖像並使用滑動條調整其寬度
- 頁腳：添加您的網站鏈接，例如我的帳戶、客戶支持等。
在任何時候，您都可以單擊“預覽”按鈕以在彈出窗口中查看桌面/移動設備上的電子郵件外觀，而無需離開或刷新當前頁面。
然後，您可以輕鬆關閉預覽器以返回編輯器。
要查看 YayMail 的運行情況，請查看本教程視頻，了解它如何幫助您完成工作。
集成
交易電子郵件是一種很好的營銷方式。 特別是當您通過 WooCommerce 提供訂閱或會員模式時，您應該自定義電子郵件通知，以使您的品牌資料定制和一致。
案例研究 1：WooCommerce 會員插件
默認情況下，這是您的受眾在您網站的會員資格到期時收到的信息。 您可以編輯主題、標題和自定義消息的文本。
為什麼不將此電子郵件模板轉變為號召性用語，以確保觀眾會回到他們的會員套餐？
對於這個額外的內容，我將使用多個列來表示“即將到期的會員資格”電子郵件。
步驟如下：
- 將 2 列塊拖放到電子郵件上
- 以百分比編輯列寬，即 70/30
- 添加背景顏色或圖像（可選），這裡我使用白色作為背景顏色
- 為第一列選擇一個文本塊
- 為第二列選擇一個圖像條
這就是我為會員電子郵件消息實現多列電子郵件模板的方式。
案例研究 2：WooCommerce 跟進電子郵件插件
使用後續電子郵件模板擴展程序，您可以在完成特定客戶操作後發送額外內容。
有很多商店場景可以發送帶有自定義內容的預定自動電子郵件。
在本節中，我將演示如何創建和自定義使用優惠券後要發送的電子郵件模板。
首先，開始添加一個新的後續：
- 給它一個名字、電子郵件主題和一些內容
- 在後續類型元框中，確保選擇購買電子郵件
- 在底部的框中，選擇觸發為“使用優惠券後”
- 它帶有許多高級選項，因此請隨意探索
然後，讓我們繼續自定義步驟：
- 插入徽標和標題
- 添加圖像框元素
- 插入內容和社交圖標
由於我正在嘗試為我的品牌顏色配置文件設置基調，因此將使用粉紅色作為標題背景顏色以及圖像框元素中的主圖像。
設計塊很容易，所以剩下要做的就是調整電子郵件塊之間的填充，以實現您一直想要的外觀和感覺。
快速說明：請參閱他們的文檔，以確保您為當前活動的 WooCommerce 擴展獲得正確的 YayMail 插件。
案例研究 3：忠誠度獎勵插件
WooCommerce 的積分和獎勵擴展可能會生成 10 多封電子郵件通知，以便與客戶聯繫。
電子郵件模板因您使用的插件而異，但基本上它看起來像一條短信。 從積分通知設置中，您可以使用他們的簡碼在電子郵件描述框中編寫自己的消息。
然後，保存更改並轉到我們的 WooCommerce 電子郵件定制器。 從下拉列表中，選擇積分和獎勵電子郵件以開始自定義模板。
讓我們通過添加更多媒體元素（例如圖像、按鈕和鏈接）來增添趣味。
這種新設計將對所有要發送的積分通知生效。 只有中間通知塊將替換為您剛剛在上一步中編寫的消息。
結論
WooCommerce 電子郵件模板自定義有多種方法，無需編碼。 如果源代碼修改不是您的選擇，那麼您可以嘗試在插件的幫助下自定義電子郵件。
一些插件利用 WordPress 定制器來設計電子郵件模板。 但是，拖放式電子郵件構建器將幫助您使用高級選項創建更靈活的佈局。
今天，您可以通過從 WP 存儲庫下載 YayMail 來試用它，並完全無風險地使用它，因為它可以與所有 WordPress 主題無縫協作。