YayMail 外掛:banner

如何編輯+客製化 WooCommerce 預設信件模板?(YayMail 教學)

這是一篇關於「 WooCommerce 信件模板客製化 」的分享。

WooCommerce 預設在顧客訂購完商品後,系統會自動發送通知信件到站長信箱,或是站長切換訂單狀態,系統也會自動寄送信件給顧客。更多 WooCommerce 電商教學

但比較困擾的是,WooCommerce 預設信件的版型,對於某些站長來說不是很美觀,或許會有想客製化設計的需求。

那這篇文章,我們將會用「 YayMail 外掛 」協助你達成此目標,好處是它是免費的。

話不多說,趕快開始教學吧。本文章節如下:


1. YayMail 是什麼?

YayMail 外掛:免費設計精美 EDM
YayMail 外掛:免費設計精美 Email 模板

YayMail 是由 YayCommerce 開發的「 WooCommerce 信件模板客製化 」,算是一款滿新的外掛。更多 YayMail 完整教學

目前總共有三個版本,分別是 YayMail Free(免費版)、YayMail Pro、YayMail Premium Addons,我們將會針對免費版分享。

YayMail 可客製化設計 WooCommerce 預設的信件模板,且範圍非常的廣泛,像是新訂單信件、已取消訂單、訂單確認信等 ..,高達 11 種預設模板,都能讓站長客製化修改!

YayMail 外掛:可設計預設的 11 種模板

不論是文字&背景顏色、字體選擇等 ..,信件主視覺風格的調整,都難不了它。

加上擁有 20 多個元素可以設計信件,這些元素包含: LOGO 、圖片、文字等 ..,甚至張貼影片也沒有問題。

YayMail 教學:WooCommerce 電子報多種設計元素
YayMail 教學:WooCommerce 電子報多種設計元素

YayMail 的設計自由度很高,使用方式類似 Elementor 頁面編輯器,拖曳想呈現的元素到信件上,就可以直接顯示出來。

如果你也覺得 WooCommerce 預設信件版型不是很美觀,而想要自己客製化修改,那這款外掛應該會幫助到你!


2. YayMail 安裝+啟用教學

首先,先到 WordPress 的後台,找到「 外掛 > 安裝外掛 」,搜尋「 YayMail 」安裝+啟用。

安裝 YayMail 外掛

接著,我們來看如何使用它吧:)


3. 功能面板一覽

YayMail 啟用後,可前往到 WooCommerce > Email Customizer,就會看到相關功能設定了。

首先,我們先一起熟悉面板區塊&位置。

WooCommerce 信件模板客製化:功能面板一覽
WooCommerce 信件模板客製化 :功能面板一覽

將版面依照上圖的編號,分成三個區塊

① 元素功能區:放置各種可以拖曳到「 視覺呈現區 」的元素功能,同時也可設定 Email 的整體視覺顏色。

② Email 控制區:選擇現在要設計的電郵模板、訂單預視、開始啟用此模板、存檔等功能。

③ 視覺呈現區:立即呈現設計模板的視覺效果,可直接在此處編輯元素。

如果你是打算自行設計+製作電子報,並發送給顧客進行行銷,我有整理多個 WordPress 最佳 EDM 行銷外掛,可從中挑選你愛的使用。

如果你想知道哪一款最好用,可參考 MailChimp 教學,裡面有完整的使用分享:)


4. YayMail 實例教學

這個章節,我會簡單介紹一些 YayMail 的功能,並且圖例操作設計一封「 寄給客戶的訂單確認信件 」,幫助大家理解使用方式。

如果你也有設計需求,也可以跟著我的步驟直接做一次,就可以產出第一份完整的客戶訂單確認信囉!

Step 1:確認修改模板

在開始設計模板之前,要先確認自己是在設計哪封 Email 模板,千萬不要搞錯啦,不然寄錯模板會很尷尬的!

同時紅框中的按鈕需要開啟,這樣 WooCommerce 系統寄出的才會是你設計製作的 EDM 模板。

因為我們是要設計「 給客戶的訂單確認 Email 」,所以這邊選擇「 處理中的訂單 」。

WooCommerce 信件模板客製化 :確認製作 EDM 模板
WooCommerce 信件模板客製化 :確認製作 EDM 模板

小提醒:

在開始之前,需先確認你製作的模板,在設計結束後,如果打算讓此模板上線,也要記得打開「 啟用模板 」按鈕唷!

Step 2:更改 LOGO 圖片

那麼,確定好我們正在製作的模板之後,接著就是變更 LOGO 圖片。

這裡有兩個方法可以更改,之後的元素更改與新增也可以比照這個步驟:

第一種,我們直接拖曳「 Logo 」按鈕到想新增的位置。

YayMail 實例教學:拖曳按鈕可直接在「視覺呈現區」新增按鈕

第二種,如果「 視覺呈現區 」已經有此模板,可以直接點選「 Logo 」區塊的位置進行更改。

YayMail 實例教學:點擊「視覺呈現區」中的區塊可直接編輯

那這邊我把步驟,以及左列的功能表詳細拆解:

  • Align 字排:調整字體位置。我選擇「 置中 」你可以依據自己喜好選擇。
  • Padding 長寬高調整:輸入數值調整區塊的長寬高,這邊我選擇的是維持原本的比例。
  • Image 圖片:這邊你可以選擇輸入 URL 調整圖片,或選擇「 Change image 」來更換你的 Logo 圖片。
  • Width 圖片大小:拖曳圓點調整 Logo 的大小。
  • Background Color 背景顏色:可調整區塊的顏色。

都調整完之後,我們有了一個漂亮的 Logo 區塊!太好啦!

Step 3:TEXT 文字元素,新增+運用

再往下兩個區塊,可以「 訂單編號 」跟「 感謝訂單與確認訂單資訊 」的文字區塊,這都是使用「 Text 」元素功能製作的。

預設模板會自動出現這兩個區塊(如果沒出現,也可拖曳元素按鈕新增)。

一樣點選區塊變更,我先以「 訂單編號 」為例,點選該區塊之後,會跳出左列的詳細設定。

YayMail 實例教學:「 Text 」按鈕編輯

那由上到下分別的設定項是:

  • Padding 長寬高調整:調整區塊長寬高。
  • Background Color 背景顏色:可調整區塊的顏色,這裡我選擇的是淺黃色,你也可以輸入喜歡的色號來調整。
  • Text Color 文字顏色:可調整文本在 Email 顯示的顏色,這裡我選擇的是橘色。
  • Font Family 圖片:可以調整文本的字體。

在圖中第三點紅框處,會看見 YayMail 預設好的短代碼,如果你想要顯示的是「 訂單號碼 」,直接維持預設就可以了,至於前面的文字也可修改。

Step 4:訂單明細

在 WooCommerce 區塊裡,是放置電商相關的顯示元素。

如果要添加訂單細節功能,可拖曳「 Order Item 訂單明細 」元素,或是「 Billing Shipping Address 帳單 / 運送地址 」元素,就可以囉:)

YayMail 實例教學:「 WooCommerce 」列表按鈕編輯

Step 5:折價券(搭配雙欄位佈局)

YayMail 也有佈局元素,可讓排版更加的豐富。

選擇「 General > Two Columns(雙欄位)」,放到想顯示的位置即可。

YayMail 實例教學:拖曳「 Two Columns(雙欄位)」按鈕

接著,會看到出現兩個欄位的區塊,分別有兩個「+」號,表示可以加入其他的元素!

我們也能針對欄位,進行相關的樣式調整。

YayMail 實例教學:「 Two Columns(雙欄位) 」按鈕編輯
  • Column Width:輸入數值調整欄位的寬度,它是百分比計算,兩數值不能超過 100 ,如沒特別需求維持預設就可以了。
  • Padding:調整區塊的內距。
  • Background Color:調整區塊背景的顏色。
  • Background Image:在區塊背景填入圖片。

如果想製作「 左圖右文 」的折價券,可拖曳「Basic > Image(圖片)」到欄位內。

YayMail 實例教學:拖曳「 Image(圖片)」到左欄位

成功拖曳,就可以在欄位裡設定圖片的細節啦!

YayMail 實例教學:「 Image(圖片)」拖曳成功!

我們可以用一樣的方式,拖曳「 Text 」到右欄位,設定折價券標題及內文細節,這樣折價券就 OK 了!

Step 6. 新增社群按鈕

最後一個步驟,如果你有 Facebook 粉專 或是任何社群軟體,該如何嵌入在信件模板當中呢?

拖曳「 Basic > Social Icon 」元素,就能設定社群分享的按鈕。

YayMail 實例教學:拖曳「 Social Icon 」

相關設定如下。

YayMail 實例教學:「 Social Icon 」設定
  • Styles Theme:按鈕的樣式設定,可調整顏色&風格。
  • Socials:編輯顯示的社群媒體,可設定連結網址。

設定完成之後,恭喜你有了一個完美的社群分享區塊啦:)

Step 7:Email 背景以及連結顏色

除了自由編排 WooCommerce 信件區塊,我們還可以調整背景顏色,跟連結文字顏色。

切換到「 Setting(一般設定)> Email Settings(Email 設定)」,就可以進行調整。

YayMail 實例教學:Email 其餘色彩設定

到此為止,一份精美又完整的客戶訂單 EDM 就搞定啦!

最後總結

看完 WooCommerce 客戶訂單確認信,相關的客製化設計教學,是不是發現 YayMail 很容易上手呢?

其實 YayMail 的設定很簡單,就是拖曳元素到視覺呈現區,再調整自己喜歡的細節,就可以輕鬆設計 Email 模板啦!


5. 測試發信&正式上線

測試發信

確定整封信件設計完成之後,就可以先發送一封測試郵件給自己,確認是否是自己想要的樣式。

在面板上方的 Email 控制區,點擊「 Send test email(發送測試信)」> 輸入自己的電郵信箱 > 按下發送,就會寄出測試信了。

YayMail 教學:發送測試 Email

接著,可以前往自己的信箱查看測試信件,確認實際閱讀的體驗。

如果確認郵件沒有問題之後,就可以讓該模板正式上線啦!

切換到正式上線

讓模板正式上線的方法,分別有兩種(如下圖)。

第一種:點開「 啟用 」按鈕,直接套用此模板,然後點 Save 儲存。

第二種:找到元素功能區內的「 Settings > Enable / Disable Templates 」列表,這裡可做統一的模板開啟,然後點 Save 儲存。

YayMail 教學:正式開啟 EDM 模板

一切都製作完成後,也可以自己下一筆訂單,確認上線的模板是否有正常顯示唷:)


6. 短代碼功能分享

YayMail 有提供短代碼功能,可依站長的需求斟酌使用。

這些短代碼將會在實際信件中,轉換成相對應的文字(也就是動態文字的概念,會依照不同訂單而改變)。

短代碼的類型很多,像是訂單號碼、客戶資訊(地址、帳號、密碼 ·· )等,可以讓站長方便簡單的複製使用,並放置在信件中。

下面我會跟大家示範,如何使用短代碼:)

Step1:開啟 Shortcodes 列表

在面板上方,點選圖示「 Shortcodes 短代碼 」按鈕,就會跳出非常多可用的代碼。

例如 [yaymail_site_name] 代碼,在實體信件中就會轉換成站長的「 網站名稱 」,用動態帶入的方式會很方便。

YayMail 教學:短代碼功能分享

Step2:短代碼複製+貼上

這邊用上圖的 [yaymail_site_name] 為範例,複製 Yaymail 提供的短代碼,然後可自行新增一個「 Text 」元素,並貼上剛複製的短代碼即可。

這樣,就能成功的顯示相關資訊啦:)

YayMail 教學:短代碼功能分享

以上就是短代碼功能的分享。

YayMail 的完整教學到此章節結束,相信看過完整教學的你,一定學會怎麼製作出精美的客製化 Email 模板了吧!

歡迎在文章底下留言分享你有趣的排版跟使用心得唷~


常見問題

為什麼要用 YayMail 美化 EDM 模板?


因為 WooCommerce 預設的信件模板,對於某些站長來說會比較單調一點,就能使用類似 Yaymail 這款外掛,客製化信件樣式+佈局版型,這樣會來的更加美觀!

我對設計跟配色沒有靈感,該怎麼辦?


小犬網站上有分享網頁設計+網站配色分享內容,像是 如何製作 LOGO 設計+網站配色(網頁設計流程),或許會對你有幫助:)

如果有電子報行銷的需求,也想客製化設計,有推薦的軟體嗎?


可參考 WordPress 電子報外掛推薦,裡面整理了多款熱門的電子報軟體,功能非常的齊全。

如果需要挑一款,也可參考 MailChimp 軟體,有提供 EDM 設計製作、訂閱者匯入匯出、電子報數據分析、自動信件回覆等 ..,多種實用的功能。

MailChimp 也能簡單嵌入到 WordPress 網站中,可參考 MC4WP 教學


WordPress 學習資源

學習 WordPress 網站架設流程中,或許會遇到一些解決不了問題,你可以在下方留言給我,我會盡力協助解答。

或是給我一些鼓勵也可以,讓我更有動力提供學習資源給大家,我會非常感謝:)

我最近也開啟了 YouTube 頻道,裡面有些影片教學,你也能配上 Blog 一起學習,應該會來的更加順手(歡迎訂閱我+開啟小鈴鐺,可收到第一手影片教學通知)。

當然,如果怕問題描述不清楚,也可以加入 WordPress 教學時光屋 – 小犬網站 ,我同步也會在社團中幫忙解惑。

希望這些對你有所幫助,祝架站順利啦。

小犬網站:wordpress教學社團
小犬網站:wordpress教學社團

Leave a Comment

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

回到頂端