這是一篇關於「 WooCommerce 信件模板客製化 」的分享。
WooCommerce 預設在顧客訂購完商品後,系統會自動發送通知信件到站長信箱,或是站長切換訂單狀態,系統也會自動寄送信件給顧客。更多 WooCommerce 電商教學。
但比較困擾的是,WooCommerce 預設信件的版型,對於某些站長來說不是很美觀,或許會有想客製化設計的需求。
那這篇文章,我們將會用「 YayMail 外掛 」協助你達成此目標,好處是它是免費的。
話不多說,趕快開始教學吧。本文章節如下:
1. YayMail 是什麼?
YayMail 是由 YayCommerce 開發的「 WooCommerce 信件模板客製化 」,算是一款滿新的外掛。更多 YayMail 完整教學。
目前總共有三個版本,分別是 YayMail Free(免費版)、YayMail Pro、YayMail Premium Addons,我們將會針對免費版分享。
YayMail 教學:編輯+客製化 WooCommerce 預設信件模板。
YayMail 可客製化設計 WooCommerce 預設的信件模板,且範圍非常的廣泛,像是新訂單信件、已取消訂單、訂單確認信等 ..,高達 11 種預設模板,都能讓站長客製化修改!
不論是文字&背景顏色、字體選擇等 ..,信件主視覺風格的調整,都難不了它。
加上擁有 20 多個元素可以設計信件,這些元素包含: LOGO 、圖片、文字等 ..,甚至張貼影片也沒有問題。
YayMail 的設計自由度很高,使用方式類似 Elementor 頁面編輯器,拖曳想呈現的元素到信件上,就可以直接顯示出來。
如果你也覺得 WooCommerce 預設信件版型不是很美觀,而想要自己客製化修改,那這款外掛應該會幫助到你!
2. YayMail 安裝+啟用教學
首先,先到 WordPress 的後台,找到「 外掛 > 安裝外掛 」,搜尋「 YayMail 」安裝+啟用。
接著,我們來看如何使用它吧:)
3. 功能面板一覽
YayMail 啟用後,可前往到 WooCommerce > Email Customizer,就會看到相關功能設定了。
首先,我們先一起熟悉面板區塊&位置。
將版面依照上圖的編號,分成三個區塊
① 元素功能區:放置各種可以拖曳到「 視覺呈現區 」的元素功能,同時也可設定 Email 的整體視覺顏色。
② Email 控制區:選擇現在要設計的電郵模板、訂單預視、開始啟用此模板、存檔等功能。
③ 視覺呈現區:立即呈現設計模板的視覺效果,可直接在此處編輯元素。
如果你是打算自行設計+製作電子報,並發送給顧客進行行銷,我有整理多個 WordPress 最佳 EDM 行銷外掛,可從中挑選你愛的使用。
如果你想知道哪一款最好用,可參考 MailChimp 教學,裡面有完整的使用分享:)
4. YayMail 實例教學
這個章節,我會簡單介紹一些 YayMail 的功能,並且圖例操作設計一封「 寄給客戶的訂單確認信件 」,幫助大家理解使用方式。
如果你也有設計需求,也可以跟著我的步驟直接做一次,就可以產出第一份完整的客戶訂單確認信囉!
Step 1:確認修改模板
在開始設計模板之前,要先確認自己是在設計哪封 Email 模板,千萬不要搞錯啦,不然寄錯模板會很尷尬的!
同時紅框中的按鈕需要開啟,這樣 WooCommerce 系統寄出的才會是你設計製作的 EDM 模板。
因為我們是要設計「 給客戶的訂單確認 Email 」,所以這邊選擇「 處理中的訂單 」。
小提醒:
在開始之前,需先確認你製作的模板,在設計結束後,如果打算讓此模板上線,也要記得打開「 啟用模板 」按鈕唷!
Step 2:更改 LOGO 圖片
那麼,確定好我們正在製作的模板之後,接著就是變更 LOGO 圖片。
這裡有兩個方法可以更改,之後的元素更改與新增也可以比照這個步驟:
第一種,我們直接拖曳「 Logo 」按鈕到想新增的位置。
第二種,如果「 視覺呈現區 」已經有此模板,可以直接點選「 Logo 」區塊的位置進行更改。
那這邊我把步驟,以及左列的功能表詳細拆解:
- Align 字排:調整字體位置。我選擇「 置中 」你可以依據自己喜好選擇。
- Padding 長寬高調整:輸入數值調整區塊的長寬高,這邊我選擇的是維持原本的比例。
- Image 圖片:這邊你可以選擇輸入 URL 調整圖片,或選擇「 Change image 」來更換你的 Logo 圖片。
- Width 圖片大小:拖曳圓點調整 Logo 的大小。
- Background Color 背景顏色:可調整區塊的顏色。
都調整完之後,我們有了一個漂亮的 Logo 區塊!太好啦!
Step 3:TEXT 文字元素,新增+運用
再往下兩個區塊,可以「 訂單編號 」跟「 感謝訂單與確認訂單資訊 」的文字區塊,這都是使用「 Text 」元素功能製作的。
預設模板會自動出現這兩個區塊(如果沒出現,也可拖曳元素按鈕新增)。
一樣點選區塊變更,我先以「 訂單編號 」為例,點選該區塊之後,會跳出左列的詳細設定。
那由上到下分別的設定項是:
- Padding 長寬高調整:調整區塊長寬高。
- Background Color 背景顏色:可調整區塊的顏色,這裡我選擇的是淺黃色,你也可以輸入喜歡的色號來調整。
- Text Color 文字顏色:可調整文本在 Email 顯示的顏色,這裡我選擇的是橘色。
- Font Family 圖片:可以調整文本的字體。
在圖中第三點紅框處,會看見 YayMail 預設好的短代碼,如果你想要顯示的是「 訂單號碼 」,直接維持預設就可以了,至於前面的文字也可修改。
Step 4:訂單明細
在 WooCommerce 區塊裡,是放置電商相關的顯示元素。
如果要添加訂單細節功能,可拖曳「 Order Item 訂單明細 」元素,或是「 Billing Shipping Address 帳單 / 運送地址 」元素,就可以囉:)
Step 5:折價券(搭配雙欄位佈局)
YayMail 也有佈局元素,可讓排版更加的豐富。
選擇「 General > Two Columns(雙欄位)」,放到想顯示的位置即可。
接著,會看到出現兩個欄位的區塊,分別有兩個「+」號,表示可以加入其他的元素!
我們也能針對欄位,進行相關的樣式調整。
- Column Width:輸入數值調整欄位的寬度,它是百分比計算,兩數值不能超過 100 ,如沒特別需求維持預設就可以了。
- Padding:調整區塊的內距。
- Background Color:調整區塊背景的顏色。
- Background Image:在區塊背景填入圖片。
如果想製作「 左圖右文 」的折價券,可拖曳「Basic > Image(圖片)」到欄位內。
成功拖曳,就可以在欄位裡設定圖片的細節啦!
我們可以用一樣的方式,拖曳「 Text 」到右欄位,設定折價券標題及內文細節,這樣折價券就 OK 了!
Step 6. 新增社群按鈕
最後一個步驟,如果你有 Facebook 粉專 或是任何社群軟體,該如何嵌入在信件模板當中呢?
拖曳「 Basic > Social Icon 」元素,就能設定社群分享的按鈕。
相關設定如下。
- Styles Theme:按鈕的樣式設定,可調整顏色&風格。
- Socials:編輯顯示的社群媒體,可設定連結網址。
設定完成之後,恭喜你有了一個完美的社群分享區塊啦:)
Step 7:Email 背景以及連結顏色
除了自由編排 WooCommerce 信件區塊,我們還可以調整背景顏色,跟連結文字顏色。
切換到「 Setting(一般設定)> Email Settings(Email 設定)」,就可以進行調整。
到此為止,一份精美又完整的客戶訂單 EDM 就搞定啦!
最後總結
看完 WooCommerce 客戶訂單確認信,相關的客製化設計教學,是不是發現 YayMail 很容易上手呢?
其實 YayMail 的設定很簡單,就是拖曳元素到視覺呈現區,再調整自己喜歡的細節,就可以輕鬆設計 Email 模板啦!
5. 測試發信&正式上線
測試發信
確定整封信件設計完成之後,就可以先發送一封測試郵件給自己,確認是否是自己想要的樣式。
在面板上方的 Email 控制區,點擊「 Send test email(發送測試信)」> 輸入自己的電郵信箱 > 按下發送,就會寄出測試信了。
接著,可以前往自己的信箱查看測試信件,確認實際閱讀的體驗。
如果確認郵件沒有問題之後,就可以讓該模板正式上線啦!
切換到正式上線
讓模板正式上線的方法,分別有兩種(如下圖)。
第一種:點開「 啟用 」按鈕,直接套用此模板,然後點 Save 儲存。
第二種:找到元素功能區內的「 Settings > Enable / Disable Templates 」列表,這裡可做統一的模板開啟,然後點 Save 儲存。
一切都製作完成後,也可以自己下一筆訂單,確認上線的模板是否有正常顯示唷:)
6. 短代碼功能分享
YayMail 有提供短代碼功能,可依站長的需求斟酌使用。
這些短代碼將會在實際信件中,轉換成相對應的文字(也就是動態文字的概念,會依照不同訂單而改變)。
短代碼的類型很多,像是訂單號碼、客戶資訊(地址、帳號、密碼 ·· )等,可以讓站長方便簡單的複製使用,並放置在信件中。
下面我會跟大家示範,如何使用短代碼:)
Step1:開啟 Shortcodes 列表
在面板上方,點選圖示「 Shortcodes 短代碼 」按鈕,就會跳出非常多可用的代碼。
例如 [yaymail_site_name] 代碼,在實體信件中就會轉換成站長的「 網站名稱 」,用動態帶入的方式會很方便。
Step2:短代碼複製+貼上
這邊用上圖的 [yaymail_site_name] 為範例,複製 Yaymail 提供的短代碼,然後可自行新增一個「 Text 」元素,並貼上剛複製的短代碼即可。
這樣,就能成功的顯示相關資訊啦:)
以上就是短代碼功能的分享。
YayMail 的完整教學到此章節結束,相信看過完整教學的你,一定學會怎麼製作出精美的客製化 Email 模板了吧!
歡迎在文章底下留言分享你有趣的排版跟使用心得唷~
常見問題
為什麼要用 YayMail 美化 EDM 模板?
因為 WooCommerce 預設的信件模板,對於某些站長來說會比較單調一點,就能使用類似 Yaymail 這款外掛,客製化信件樣式+佈局版型,這樣會來的更加美觀!
我對設計跟配色沒有靈感,該怎麼辦?
小犬網站上有分享網頁設計+網站配色分享內容,像是 如何製作 LOGO 設計+網站配色(網頁設計流程),或許會對你有幫助:)
如果有電子報行銷的需求,也想客製化設計,有推薦的軟體嗎?
可參考 WordPress 電子報外掛推薦,裡面整理了多款熱門的電子報軟體,功能非常的齊全。
如果需要挑一款,也可參考 MailChimp 軟體,有提供 EDM 設計製作、訂閱者匯入匯出、電子報數據分析、自動信件回覆等 ..,多種實用的功能。
MailChimp 也能簡單嵌入到 WordPress 網站中,可參考 MC4WP 教學。
聯絡犬哥網站
在網站架設+網路行銷的過程中,或許會遇到一些解決不了問題,可以在下方留言給我,我會盡力協助解答!
接下來,額外分享 2 個實用資源,可有效幫助大家解決問題。
資源一:犬哥網站(專業 WordPress 網頁設計&SEO 行銷公司)
如果你沒時間自己架站,或是遇到網站沒有流量、Google 網站排名不理想。歡迎洽詢 犬哥網站(WordPress 網頁設計&SEO 行銷公司),請專家協助你會更容易!
我們有多年網頁設計、SEO 網站排名經驗,加上上百個高質感作品、SEO 實戰案例,絕對能滿足您的需求!
資源二:WordPress+SEO 超強線上課程
這門 WordPress 高手架站課 濃縮了犬哥多年在網頁設計的實戰經驗,從網頁設計觀念、WordPress / WooCommerce 後台操作、熱門主題.外掛教學、品牌網站 / 部落格 / 電商網站,3 大類型網站建置方法等豐富內容,一次教會你。
課程內容非常的紮實(長度超過 20 小時)。如果你剛學習自架網站,這門課程可以讓你用最快的速度,就學會這項技能!
網站建立完畢後,但卻沒有流量怎麼辦?或是只能靠花錢投廣告才會有訂單?
這門 SEO 排名飆升課,教你掌握關鍵字策略、SEO 文章撰寫、多種實戰 SEO 技巧、透視對手 SEO 策略、SEO 必備軟體教學、最新 AI SEO 應用等,大幅提升行銷能力。
帶你衝上 Google 排名第一頁,大量提升網站營收和訂單!