當然，WooCommerce 訂單電子郵件通常是例行更新。但它們也為您的企業提供了與客戶直接聯絡的渠道。每封郵件都能讓您建立信任、強化品牌，並給客戶留下深刻印象，讓他們流連忘返。
遺憾的是，預設的 WooCommerce 電子郵件模板並不能達到大多數企業想要的效果。它們通用的設計和有限的自定義選項讓人感覺不倫不類，無法代表您品牌的獨特身份。如果不進行定製，您就會錯失與客戶建立有意義聯絡的機會。
幸好，您可以自定義 WooCommerce 訂單電子郵件，讓它們與眾不同。有多種方法可以做到這一點。使用內建設定、依賴外掛或編寫自定義程式碼。無論選擇哪種方式，您都可以設計出看起來更專業的電子郵件，並提供更好的整體客戶體驗。
本文將向您展示如何讓您的電子郵件從基本到卓越。我們將介紹可快速見效的基於外掛的解決方案和可完全控制的自定義程式碼選項。
WooCommerce預設電子郵件設定
WooCommerce 自帶一套標準電子郵件模板，旨在處理關鍵的客戶互動，如訂單確認、發貨更新和退款。這些模板使用佔位符動態插入客戶姓名、產品資訊和價格等訂單詳細資訊。雖然這些內建電子郵件涵蓋了基本內容，並能向客戶提供相關資訊，但它們在設計和品牌方面還有很多不足之處。
預設的 WooCommerce 電子郵件模板採用了簡單實用的設計。它們採用簡單的佈局、最少的配色方案和基本的內容格式。雖然這種方法確保了大多數電子郵件客戶端的相容性，但也限制了您創造令人難忘的客戶體驗的能力。這些電子郵件無法反映您品牌的獨特風格，也無法靈活地新增個性化元素。
WooCommerce 附帶的預設電子郵件模板
這些限制使您很難在客戶收件箱中脫穎而出，尤其是在競爭激烈的市場中。這就是為什麼定製 WooCommerce 電子郵件如此重要。它能讓您提升溝通效果，與受眾建立更緊密的聯絡。
讓我們來探討一下如何使用 WooCommerce 的內建設定面板自定義這些模板。
如何使用設定面板自定義WooCommerce訂單電子郵件
WooCommerce 提供內建自定義選項，讓您無需外掛或自定義程式碼即可快速調整訂單電子郵件。您可以透過 WordPress 儀表盤訪問這些設定，重點關注品牌元素，如徽標、顏色和基本文字。雖然這些選項是一個很好的起點，但它們也有侷限性，可能會讓你有更多的需求。
訪問設定面板
首先，進入 WordPress 面板中的 WooCommerce>Settings>Emails。在這裡，您會看到一個電子郵件型別列表，如新訂單、取消訂單和已完成訂單。這些都是 WooCommerce 根據不同情況向您或您的客戶傳送的不同電子郵件。
您可以傳送與 WooCommerce 商店功能相關的多種型別的電子郵件。
點選任何電子郵件型別的 Manage 按鈕，可定製具體細節，但要進行整體電子郵件設計，請向下滾動這些電子郵件，以獲得模板選項。
可用的自定義選項
滾動到 Email template 標題後，您就可以對預設電子郵件模板的外觀進行一些更改。
預設 WooCommerce 電子郵件的自定義選項
在這裡，您可以自定義電子郵件的主色調、背景顏色和正文顏色等屬性。這些小改動可以幫助你的電子郵件與品牌配色方案相匹配。也就是說，電子郵件至少會與您的網站相匹配。
您還可以自定義頁首圖片和頁尾文字，您可以在其中加入 Slogan、企業名稱或聯絡資訊。這些小改動可以讓你的郵件感覺更專業、更個性化。
內建設定的侷限性
雖然這些工具可以實現基本的品牌塑造，但它們並不能讓你完全控制創意。例如
- 電子郵件的佈局是固定的，因此您無法重新排列元素或新增新的部分。
- 除了網站使用的預設樣式外，字型無法自定義。
- 無法加入動態元素，如產品推薦或追加銷售連結。
這些限制使設定面板成為小幅調整的不錯選擇，但對於希望提供高度品牌化體驗的企業來說就不那麼理想了。如果互動性是你的目標，那就別想了。
使用外掛或擴充套件對WooCommerce訂單郵件進行高階定製
如果內建的 WooCommerce 設定無法提供您所需的靈活性，外掛或 WooCommerce 擴充套件工具可以幫助您建立具有高階功能的精美定製訂單電子郵件。採用這種方法可以幫助您超越基本的品牌，建立自定義佈局，幷包含諸如追加銷售連結和產品推薦等動態元素。
外掛也會帶來一些挑戰。有些外掛可能會與其他 WooCommerce 擴充套件、外掛或主題產生衝突，導致功能問題。
WooCommerce 或 WordPress 的更新有時也會破壞外掛的功能。另外，如果出了問題，除錯外掛可能會很耗時，尤其是如果你不熟悉這類故障排除工作的話。
以下是三個用於定製 WooCommerce 訂單電子郵件的流行外掛和擴充套件，以及它們的主要功能：
1. Email Customizer for WooCommerce
Email Customizer for WooCommerce 擴充套件
Email Customizer for WooCommerce 擴充套件為 WooCommerce 新增了一個用於定製電子郵件佈局的拖放編輯器。您可以新增徽標、文字、圖片和按鈕等元素，從而完全控制電子郵件的設計。
主要功能包括預先設計的模板、包含上架銷售優惠或個性化資訊等自定義內容的選項，以及即時預覽功能，讓你在更改時一目瞭然。
2. Kadence WooCommerce Email Designer
Kadence WooCommerce Email Designer 外掛
Kadence WooCommerce Email Designer 外掛提供了一種設計更精美電子郵件的直接方法。它能與 WooCommerce 完美配合，讓你可以編輯字型、顏色和佈局。
一些值得注意的功能包括即時電子郵件預覽以檢查您的更改，超簡單的頁首、頁尾和正文內容定製，以及支援匯入或匯出設計以便在不同網站上重複使用。
3. YITH WooCommerce Email Templates
YITH WooCommerce Email Templates 外掛
YITH WooCommerce Email Templates 外掛專注於提供專業設計的電子郵件模板庫。如果您想擁有光鮮亮麗的外觀，而又不想在設計上花費太多時間，它就是您的理想選擇。它提供了多種模板樣式供您選擇，還提供了包含社交媒體圖示、品牌和動態內容的選項，並可與其他 WooCommerce 擴充套件工具一起使用。
如何使用外掛定製WooCommerce訂單電子郵件
本教程以 Kadence WooCommerce Email Designer 外掛為例。下面介紹如何安裝和使用該外掛來定製電子郵件：
安裝並啟用外掛
進入 WordPress 面板，導航至外掛>安裝新外掛。搜尋“Email Customizer for WooCommerce”，點選“立即安裝”，然後啟用外掛。
安裝 Kadence WooCommerce Email Designer 外掛
自定義電子郵件模板
進入儀表盤中的 WooCommerce>Email Customizer。使用編輯器自定義電子郵件佈局。您可以新增徽標等品牌元素，更改顏色以匹配您的品牌，還可以加入個性化文字。您還可以從預建模板中進行選擇。
在 Kadence WooCommerce Email Designer 外掛中選擇一個預製模板
新增動態元素
新增追加銷售連結以鼓勵重複購買。例如，您可以加入一個推廣相關產品的按鈕。
此時，您還可以插入社會證明，如客戶評論或信任徽章，以建立可信度。
儲存並測試您的電子郵件
儲存您定製的電子郵件設計，並使用內建預覽工具檢查其外觀。將電子郵件傳送給自己進行測試，以確保一切顯示正確。單擊自定義器底部的“Send Preview Email”進行測試。
使用 Kadence 傳送測試電子郵件
外掛提供了增強訂單電子郵件的強大方法，但如果您經常遇到相容性問題，自定義程式碼可能會提供更可靠的長期解決方案。
接下來，我們將探討如何使用自定義程式碼定製 WooCommerce 電子郵件，以實現最大程度的控制。
如何使用自定義程式碼定製 WooCommerce 訂單電子郵件
如果您需要完全控制 WooCommerce 訂單電子郵件，那麼自定義程式碼就是您的不二之選。與依賴預置功能的外掛不同（預置功能仍會讓您感到有些束手束腳），自定義程式碼讓您可以自由設計與品牌完美匹配的電子郵件，幷包含適合您業務的特定功能。這也是一種可擴充套件性更強的解決方案，因為您不會受到第三方軟體的束縛，隨著時間的推移，這些軟體可能會變得不相容或過時。
您需要使用 WooCommerce 的內建鉤子和模板來建立自定義電子郵件。這樣，您就能定製電子郵件的方方面面，從頁首和頁尾到個性化產品推薦等動態資料驅動元素。最終結果如何？
完全定製的電子郵件體驗，既能體現您的品牌，又能保持客戶的參與度。讓我們從一個基本例子開始。
基於程式碼的基本WooCommerce訂單電子郵件示例
WooCommerce 提供了多個鉤子和過濾器，您可以用來定製電子郵件內容。例如，您可以使用 woocommerce_email_headers 和 woocommerce_email_footer 過濾器來修改電子郵件頁首、頁尾或其他任何您想做的內容。
下面是一個在訂單電子郵件中新增自定義頁尾的快速示例：
add_filter('woocommerce_email_footer_text', 'custom_email_footer_text');
function custom_email_footer_text( $footer_text ) {
$footer_text = 'Thank you for shopping with us! Check out our latest deals at <a href="https://yourwebsite.com">yourwebsite.com</a>.';
return $footer_text;
}
您可以將該程式碼段新增到子主題的 functions.php檔案中。
重要提示：如果您要將該程式碼段新增到主題的 functions.php 檔案中，最好在子主題中新增，以免主題更新時丟失您的更改。
使用HTML和CSS增強電子郵件設計
如果您想讓您的電子郵件看起來更精緻、更有視覺吸引力，使用 HTML 和 CSS 編輯 WooCommerce 電子郵件模板是一個不錯的選擇。WooCommerce 會將其電子郵件模板儲存在您的主題 woocommerce/email 資料夾中。如果您修改了這些模板，就可以對佈局、排版和設計進行微調，從而製作出適合您店鋪的電子郵件。
例如，要在“Customer Completed Order”電子郵件中新增自定義標題，可以編輯 woocommerce/emails 資料夾中的 customer-completed-order.php 檔案。
具體方法如下：
首先，將 customer-completed-order.php 檔案複製到主題的 woocommerce/emails 資料夾中。這樣可以確保在 WooCommerce 更新時不會覆蓋你的更改。
然後，在檔案頂部新增自定義標題內容。
例如，您可以新增以下內容
<div> <img src="https://yourwebsite.com/logo.png" alt="Your Logo"> <h2>Your Order is Complete!</h2> </div>
此程式碼片段可將您的 Logo 新增到電子郵件的頂部中央，併為標題區域新增黃色背景色：
使用 HTML 和 CSS 為郵件設計自定義標題
電子郵件客戶端通常會剝離外部樣式，因此使用內聯CSS以確保相容性非常重要。這能確保您的設計在所有裝置和電子郵件平臺上都保持一致。
使用 HTML 和 CSS 增強電子郵件的效果，讓您可以精確控制電子郵件的外觀。只需確保在需要時使用基於百分比的寬度和媒體查詢等響應元素，保持設計對移動裝置友好即可。
在WooCommerce訂單電子郵件中新增動態元素
動態元素可以使您的 WooCommerce 訂單電子郵件更加吸引人。這樣做可以使它們更加個性化，在某些情況下還具有互動功能。WooCommerce 的鉤子和過濾器可讓您輕鬆地將這些元素直接包含在電子郵件模板中，並創造機會提高參與度。
舉例說明：新增個性化產品推薦
您可以使用 WooCommerce 鉤子，針對每位客戶的訂單新增相關或追加銷售產品推薦。例如，您可以根據客戶購物車中的專案顯示補充產品。首先，使用鉤子新增動態內容，如下所示：
add_action('woocommerce_email_after_order_table', 'add_related_products_to_email', 10, 4);
function add_related_products_to_email( $order, $sent_to_admin, $plain_text, $email ) {
if ( $email->id === 'customer_completed_order' ) {
echo '<h3 style="font-family: Arial, sans-serif;">You might also like:</h3>';
// Loop through order items
foreach ( $order->get_items() as $item ) {
$product_id = $item->get_product_id();
// Get related products
$related_products = wc_get_related_products( $product_id, 2 ); // Fetch 2 related products
foreach ( $related_products as $related_id ) {
$related_product = wc_get_product( $related_id );
if ( $related_product && $related_product->is_visible() ) {
echo '<p style="font-family: Arial, sans-serif;">
<a href="' . esc_url( $related_product->get_permalink() ) . '">' . esc_html( $related_product->get_name() ) . '</a>
</p>';
}
}
}
}
}
此程式碼段與 woocommerce_email_after_order_table 動作掛鉤，可在客戶“Completed Order”電子郵件的訂單詳情下方顯示相關產品。
示例： 新增動態評論請求連結
在電子郵件中嵌入個性化連結，鼓勵客戶留下評論。例如：
add_action('woocommerce_email_footer', 'add_review_request_to_email');
function add_review_request_to_email() {
// Safely output HTML for the review request
echo '<p style="text-align: center; font-family: Arial, sans-serif;">
We'd love your feedback! <a href="' . esc_url('https://yourwebsite.com/review') . '">Leave a review here</a>.
</p>';
}
此程式碼段在電子郵件頁尾新增了一個簡單的 CTA，邀請客戶分享他們的想法。
示例：嵌入社交媒體按鈕
您還可以加入社交媒體按鈕，與客戶建立電子郵件以外的聯絡。新增以下程式碼即可在電子郵件頁尾顯示可點選的圖示：
add_action('woocommerce_email_footer', 'add_social_media_links');
function add_social_media_links() {
// Safely output HTML for social media links
echo '<div style="text-align: center; margin-top: 20px;">
<a href="' . esc_url('https://facebook.com/yourbusiness') . '" style="margin-right: 10px;">
<img src="' . esc_url('https://yourwebsite.com/facebook-icon.png') . '" alt="Facebook" style="width: 20px;">
</a>
<a href="' . esc_url('https://instagram.com/yourbusiness') . '">
<img src="' . esc_url('https://yourwebsite.com/instagram-icon.png') . '" alt="Instagram" style="width: 20px;">
</a>
</div>';
}
如何測試您的自定義
自定義 WooCommerce 訂單電子郵件後，測試將確保所有內容都能在多種裝置上按照您的預期正確顯示。全面的測試過程可以幫助您在客戶看到之前捕捉到格式錯誤、斷開的連結或丟失的元素。
以下是一些可以派上用場的工具：
- WP Mail Logging：WP Mail Logging 是一款流行的外掛，可跟蹤 WordPress 網站的所有外發郵件。用它來驗證你的定製郵件傳送是否正確，並檢視其內容。
- Preview Emails for WooCommerce：該外掛可讓您直接在 WordPress 儀表板中預覽 WooCommerce 電子郵件。這是一種在不下達真實訂單的情況下檢查自定義內容的快速方法。
- Email客戶端測試工具：Litmus 或 Email on Acid 等平臺可讓你跨不同客戶端（如 Gmail 和 Outlook）和裝置預覽電子郵件。
WP Mail Logging 可幫助你跟蹤網站傳送的郵件。
您還可以在儀表板中預覽電子郵件。使用 Preview E-mails for WooCommerce 外掛檢查自定義模板的佈局、顏色和內容。確保徽標、文字和動態內容等所有元素都按預期顯示。
使用 Preview Emails for WooCommerce 外掛預覽電子郵件。
然後，向自己或暫存賬戶傳送測試郵件，看看它們在真實收件箱中的效果如何。檢查是否存在連結斷開、圖片丟失或格式錯誤等問題。
有效定製WooCommerce郵件應遵循的最佳做法
定製 WooCommerce 訂單電子郵件可提升客戶體驗。或者至少可以……。遵循最佳實踐，可以幫助您構建有效、易用且跨平臺相容的電子郵件設計，從而更接近這一目標。
以下四個步驟可確保您所做的任何電子郵件定製都符合當前的最佳實踐：
1. 保持設計的移動友好性和易讀性
一半以上的電子郵件是在移動裝置上開啟的，因此響應式設計是必不可少的。使用內聯 CSS 控制佈局，並確保字型、按鈕和圖片比例適當。堅持採用簡潔明快的設計，優先考慮可讀性，避免雜亂無章。
2. 測試電子郵件客戶端的相容性
不同的電子郵件客戶端（如 Gmail 和 Outlook）會以不同的方式呈現 HTML 電子郵件。在不同的平臺和裝置上測試你的郵件，以發現格式、顏色或響應速度上的不一致。
3. 包含明確的CTA
每封訂單電子郵件除了確認購買外，還應有其他目的。使用 CTA 來鼓勵使用者採取行動，如留下評論、瀏覽相關產品或註冊訂閱通訊。讓您的 CTA 顯眼並易於點選，即使在移動裝置上也是如此。
4. 使用平實語言避免過度格式化
以易於理解的對話語氣撰寫電子郵件。在電子郵件中加入過多的圖片、粗體字型或複雜的版式會分散注意力，導致載入速度減慢。
常見錯誤和故障排除技巧
即使經過精心策劃，對 WooCommerce 訂單電子郵件的定製有時也會出錯。無論是郵件無法傳送、版面設計被破壞，還是動態內容無法更新，瞭解常見問題的故障排除方法都能為您節省時間，減少挫折感。
以下是三大問題及解決方法：
1. 自定義後無法傳送電子郵件
如果您的郵件在更改後停止傳送，問題很可能與您的郵件伺服器或配置有關。您可以透過以下方法解決：
- 檢查電子郵件伺服器設定：確保您的託管環境支援事務性電子郵件。
- 驗證 SMTP 配置：使用像 WP Mail SMTP 這樣的外掛，為傳送電子郵件設定一個可靠的 SMTP 伺服器。測試連線以確認郵件傳送正常。
WP Mail SMTP 提供了測試電子郵件的便捷方法。
2. 主題衝突或佈局損壞
有時，自定義會導致 WordPress 主題與電子郵件佈局發生衝突，從而造成故障。要解決這個問題：
- 清除 WooCommerce 的模板快取：轉到WooCommerce>Status>Tools，然後單擊 Clear template cache（清除模板快取）。這將強制 WooCommerce 載入更新的模板。
- 除錯程式碼問題：檢視自定義程式碼是否有錯誤。使用 PHP 除錯工具或檢視瀏覽器的開發人員控制檯，找出問題所在。
- 檢查主題過載：如果您的主題覆蓋了 WooCommerce 電子郵件模板，請確保這些模板是最新的，並且與您的 WooCommerce 版本相容。
3. 電子郵件內容不更新
如果您對電子郵件內容所做的更改沒有顯示出來，問題可能與覆蓋模板或程式碼位置不正確有關。除錯方法如下
- 檢查主題中被覆蓋的電子郵件模板：進入主題的
woocommerce/emails資料夾，驗證模板是否與您的更改一致。如有必要，從 WooCommerce 外掛目錄中複製新模板，然後重新應用您的自定義設定。 - 確保片段在正確的檔案中：將 PHP 程式碼段新增到子主題的
functions.php檔案或自定義外掛中，確保主題更新時的相容性。
小結
定製 WooCommerce 訂單電子郵件是強化品牌和改善客戶體驗的最簡單方法之一。定製這些電子郵件以反映您的風格，是建立信任和鼓勵長期回頭客的另一種方式。
本文探討了幾種定製 WooCommerce 訂單電子郵件的方法。無論您是選擇基於外掛的解決方案以方便使用，還是深入研究自定義程式碼以實現完全控制，這兩種方法都能幫助您實現令人驚歎的效果。
評論留言