WooCommerce: วิธีปรับแต่งเทมเพลตอีเมลโดยไม่ต้องเข้ารหัส

ในแต่ละวัน คุณอาจใช้การลากและวางในอินเทอร์เฟซที่หลากหลาย ตัวอย่างเช่น ลากและวางรายการ Gmail ของคุณไปที่หมวดหมู่ อัปโหลดไฟล์ไปยังไลบรารีสื่อ WordPress หรือจัดระเบียบแอปบนหน้าจอหลักของโทรศัพท์ของคุณ

ในขณะที่แพลตฟอร์มตัวสร้างเพจจำนวนมากเข้ามาช่วยคุณออกแบบเว็บไซต์ของคุณด้วยการลากและวาง การสร้างอีเมลธุรกรรมของ WooCommerce ยังคงเป็นงานที่ซับซ้อน

ตามค่าเริ่มต้น การตั้งค่าอีเมลของ WooCommerce อนุญาตให้คุณเปลี่ยนโปรไฟล์สีพื้นฐานและข้อความเท่านั้น ในการปรับแต่งเพิ่มเติม คุณจะต้องแก้ไขโค้ดของธีม

หากคุณไม่ใช่ช่างเทคนิคและไม่ต้องการถอดรหัสระหว่างสคริปต์ใน wp-content/plugins/woocommerce/templates/emails/email-styles.php หรือใช้กรอบงานตัวสร้างอีเมลแบบลากและวาง เป็นทางออกที่ดีที่สุด

ขอแนะนำ YayMail

YayMail เป็นแพลตฟอร์มตัวสร้างอีเมลที่ปรับใช้สำหรับ WooCommerce

ได้รับการพัฒนาให้ใช้งานง่ายเป็นเป้าหมายหลัก แต่ได้รับการทดสอบเพื่อความเข้ากันได้สูงสุดของเว็บเบราว์เซอร์และไคลเอนต์อีเมลในขณะที่คอยสังเกตการตอบสนอง

คุณสามารถดาวน์โหลดและใช้งานได้ฟรีจาก WordPress.org โค้ดโอเพนซอร์สนี้ฟรีตลอดไป และคุณไม่จำเป็นต้องอัปเกรดเป็นเวอร์ชันพรีเมียมใดๆ เพื่อปรับแต่งเทมเพลตอีเมลเริ่มต้นของ Woo ทั้งหมด

เมื่อคุณติดตั้งและเปิดใช้งานแล้ว ตรงไปที่ WooCommerce > Email Customizer เพื่อเข้าถึงตัวแก้ไขอีเมล

ออกแบบอีเมลโดยใช้เครื่องมือสร้างอีเมลแบบลากและวาง

ในฐานะเครื่องมือแก้ไขแบบลากและวางที่คล้ายกับตัวสร้างเพจ Elementor YayMail มาพร้อมกับตัวเลือกและการตั้งค่าทั้งหมดบนหน้าจอเดียวกัน

1. แถบเครื่องมือด้านบน

ที่นี่คุณจะพบกับเมนูดร็อปดาวน์แรกสำหรับเทมเพลตอีเมล WooCommerce ที่มีอยู่ทั้งหมด ขึ้นอยู่กับปลั๊กอิน WooCommerce ที่ใช้งานอยู่ในไซต์ปัจจุบันของคุณ คุณจะเห็นเทมเพลตใหม่ที่นี่

หากใช้ปลั๊กอินสำหรับสมาชิก WooCommerce คุณจะมีเทมเพลตอีเมลเพิ่มเติม เช่น สมาชิก – ยินดีต้อนรับ เตือนความจำสมาชิก สมาชิกหมดอายุ และอื่นๆ

เมนูแบบเลื่อนลงที่สองคือ “คำสั่งซื้อตัวอย่าง” ให้คุณเลือกคำสั่งซื้อจริงเพื่อดูว่าฟิลด์ไดนามิกของอีเมลแสดงบนฝั่งของนักช้อปเฉพาะอย่างไร

บนแถบเครื่องมือด้านบนนี้ คุณยังสามารถค้นหาปุ่มการทำงานที่ใช้บ่อยที่สุด ได้แก่:

• รหัสย่อ : คัดลอกรหัสย่อจากที่นี่ แล้ววางลงในบล็อกที่เหมาะสมของการออกแบบอีเมล
• ส่งอีเมลทดสอบ : คลิกเดียวเพื่อส่งข้อความทดสอบไปยังที่อยู่อีเมลใดก็ได้เพื่อดูว่าอีเมลที่คุณออกแบบไว้จะมีลักษณะอย่างไรในกล่องจดหมาย
• ว่างเปล่า : ล้างบล็อคอีเมลทั้งหมดเพื่อให้คุณสามารถมี canva ที่ว่างเปล่า จากนั้นคุณสามารถเริ่มออกแบบเพื่อวัตถุประสงค์ของคุณเองได้
• คัดลอกเทมเพลต : คัดลอกจากเทมเพลตที่ออกแบบไว้ก่อนหน้านี้แล้ววางลงในเนื้อหาอีเมลปัจจุบัน จากนั้นคุณสามารถทำการปรับเปลี่ยนเล็กน้อยเพื่อหลีกเลี่ยงการเริ่มต้นจากศูนย์
• รีเซ็ตเทมเพลต : ตัวเลือกนี้จะรีเซ็ตเทมเพลตของคุณเป็นสถานะเริ่มต้น หมายความว่าคุณยังมีบล็อกอีเมลเริ่มต้นอยู่
• ดูตัวอย่าง : ดูอีเมลที่คุณกำหนดเองได้ทันทีบนเดสก์ท็อปและอุปกรณ์เคลื่อนที่
• บันทึก : บันทึกการแก้ไขของคุณได้ตลอดเวลา

2. แผงข้างพับได้

แผงด้านข้างของเครื่องมือปรับแต่งอีเมล YayMail WooCommerce ประกอบด้วยสองแท็บ: องค์ประกอบ และ การตั้งค่า

องค์ประกอบทั้งหมดสามารถลากได้และมีตัวเลือกการปรับแต่งมากมาย ตัวอย่างเช่น บล็อกส่วนหัวช่วยให้คุณสามารถแก้ไขช่องว่างภายใน สีพื้นหลัง สีข้อความ ตระกูลแบบอักษร และตัวเลือกภาพอื่นๆ

แม้ว่าการเปลี่ยนแปลงในแท็บ องค์ประกอบ จะมีผลกับบล็อกที่เลือกเท่านั้น การปรับเปลี่ยนใน การตั้งค่า จะมีผลกับเทมเพลตอีเมลทั้งหมด

คุณลักษณะบางอย่างที่ใช้บ่อย ได้แก่ :

• ความกว้างคอนเทนเนอร์อีเมล
• สีพื้นหลังของอุปกรณ์ต่อพ่วง
• ซ่อน/แสดงรูปภาพผลิตภัณฑ์และ SKU
• ส่งออก/นำเข้าเทมเพลตอีเมล

3. ตัวอย่างอีเมล

เนื่องจากเป็นเครื่องมือสร้างอีเมลแบบบล็อก คุณจึงสามารถย้ายบล็อกขึ้น/ลงหรือใช้ที่จับเพื่อลากและวางได้

ที่มุมขวา คุณจะมีตัวเลือกบางอย่างเช่น:

• บล็อกอีเมลซ้ำ
• คัดลอกบล็อกไปยังเทมเพลตอื่น
• ลบบล็อค

ด้วย YayMail คุณสามารถปรับแต่งได้ไม่รู้จบโดยการเปลี่ยนการออกแบบและเลย์เอาต์ของอีเมล ซึ่งจะไม่เกิดขึ้นหากคุณแก้ไขไฟล์โค้ดธีมหรือใช้เครื่องมือปรับแต่ง WordPress

กรณีศึกษา: ปรับแต่งอีเมลยืนยันคำสั่งซื้อของ WooCommerce

หากต้องการเริ่มปรับแต่งอีเมลยืนยันคำสั่งซื้อ ให้ไปที่ WooCommerce > Email Customizer > Email ที่จะแสดง จากที่นั่น คุณสามารถเลือก คำสั่ง ดำเนินการ หรือ คำสั่งที่เสร็จสมบูรณ์

จากนั้น คุณสามารถเริ่มเพิ่มองค์ประกอบใดๆ ที่คุณต้องการได้ องค์ประกอบบางอย่างที่ฉันจะใช้ ได้แก่:

• โลโก้ : อัปโหลดภาพโลโก้โปร่งใสและปรับขนาดเพื่อให้สอดคล้องกับความกว้างของคอนเทนเนอร์อีเมล
• ไอคอนโซเชียล : เลือกไอคอนโซเชียลเน็ตเวิร์กและเพิ่ม URL สำหรับแต่ละแพลตฟอร์มได้อย่างง่ายดาย
• หัวเรื่อง : แก้ไขข้อความหัวเรื่อง แบบอักษรของหัวเรื่อง สีข้อความ และสีพื้นหลัง
• รูปภาพ : เพิ่มรูปภาพที่กำหนดเองและปรับความกว้างโดยใช้แถบเลื่อน
• ส่วนท้าย : เพิ่มลิงค์เว็บไซต์ของคุณ เช่น บัญชีของฉัน ฝ่ายสนับสนุนลูกค้า ฯลฯ

คุณสามารถคลิกที่ปุ่ม แสดงตัวอย่าง เพื่อดูลักษณะที่ปรากฏของอีเมลบนเดสก์ท็อป/มือถือในป๊อปอัปได้ตลอดเวลาโดยไม่ต้องออกจากหรือรีเฟรชหน้าปัจจุบัน

จากนั้น คุณสามารถปิดตัวแสดงตัวอย่างเพื่อกลับมาที่ตัวแก้ไขได้อย่างง่ายดาย

หากต้องการดูการทำงานของ YayMail ให้ดูวิดีโอแนะนำการใช้งานนี้เพื่อดูว่าจะช่วยให้คุณทำงานสำเร็จได้อย่างไร

บูรณาการ

อีเมลธุรกรรมเป็นวิธีที่ดีในการสื่อสารเพื่อวัตถุประสงค์ทางการตลาดของคุณ โดยเฉพาะอย่างยิ่งเมื่อคุณเสนอรูปแบบการสมัครสมาชิกหรือการเป็นสมาชิกผ่าน WooCommerce คุณควรปรับแต่งการแจ้งเตือนทางอีเมลเพื่อให้โปรไฟล์แบรนด์ของคุณมีความสอดคล้องและสอดคล้องกัน

กรณีศึกษา 1: ปลั๊กอินสมาชิก WooCommerce

โดยค่าเริ่มต้น นี่คือสิ่งที่ผู้ชมของคุณได้รับเมื่อความเป็นสมาชิกในไซต์ของคุณกำลังจะหมดอายุ คุณสามารถแก้ไขข้อความของหัวเรื่อง หัวเรื่อง และข้อความที่กำหนดเองได้

ทำไมไม่เปลี่ยนเทมเพลตอีเมลนี้เป็นคำกระตุ้นการตัดสินใจเพื่อให้แน่ใจว่าผู้ชมจะกลับมาที่แพ็คเกจสมาชิกของพวกเขา

สำหรับเนื้อหาพิเศษนี้ ฉันจะใช้ หลายคอลัมน์ สำหรับข้อความอีเมลสมาชิกที่หมดอายุ

ขั้นตอนดำเนินการดังนี้:

• ลากและวางบล็อก 2 คอลัมน์ลงในอีเมล
• แก้ไขความกว้างของคอลัมน์เป็นเปอร์เซ็นต์ เช่น 70/30
• เพิ่มสีพื้นหลังหรือรูปภาพ (ไม่บังคับ) ที่นี่ฉันใช้สีขาวเป็นสีพื้นหลัง
• เลือกบล็อกข้อความสำหรับคอลัมน์แรก
• เลือกแถบรูปภาพสำหรับคอลัมน์ที่สอง

นั่นเป็นวิธีที่ฉันได้รับเทมเพลตอีเมลหลายคอลัมน์สำหรับข้อความอีเมลสมาชิก

กรณีศึกษา 2: ปลั๊กอินอีเมลติดตามผล WooCommerce

ด้วยส่วนขยายเทมเพลตอีเมลแบบกำหนดเอง เช่น การติดตาม คุณสามารถส่งเนื้อหาเพิ่มเติมหลังจากที่ลูกค้าดำเนินการเสร็จสิ้นแล้ว

มีหลายสถานการณ์ในร้านค้าที่สามารถส่งอีเมลอัตโนมัติตามกำหนดเวลาพร้อมเนื้อหาที่กำหนดเองได้

ในส่วนนี้ ฉันกำลังสาธิตวิธีสร้างและปรับแต่งเทมเพลตอีเมลที่จะส่ง หลังจากใช้คูปอง

ประการแรก เริ่มเพิ่มการติดตามใหม่:

• ตั้งชื่อ หัวเรื่องอีเมล และเนื้อหาบางส่วน
• ในเมตาบ็อกซ์ ประเภท ติดตามผล ตรวจสอบให้แน่ใจว่าได้เลือก ซื้ออีเมล
• ในกล่องด้านล่าง เลือกทริกเกอร์เป็น “หลังจากใช้คูปอง”
• มันมาพร้อมกับตัวเลือกขั้นสูงมากมาย ดังนั้นอย่าลังเลที่จะสำรวจมัน

จากนั้น ไปที่ขั้นตอนการปรับแต่ง:

• ใส่โลโก้และหัวเรื่อง
• เพิ่มองค์ประกอบกล่องรูปภาพ
• แทรกเนื้อหาและไอคอนโซเชียล

เนื่องจากฉันพยายามกำหนดโทนสีสำหรับโปรไฟล์สีของแบรนด์ของฉัน จึงใช้สีชมพูเป็นสีพื้นหลังของส่วนหัวและรวมถึงรูปภาพหลักในองค์ประกอบกล่องรูปภาพด้วย

การออกแบบบล็อคนั้นง่าย สิ่งที่ต้องทำคือปรับช่องว่างระหว่างบล็อคอีเมลเพื่อให้ได้รูปลักษณ์และความรู้สึกที่คุณต้องการ

บันทึกย่อ: โปรดดูเอกสารของพวกเขาเพื่อให้แน่ใจว่าคุณได้รับส่วนเสริม YayMail ที่ถูกต้องสำหรับส่วนขยาย WooCommerce ที่ใช้งานอยู่ในปัจจุบันของคุณ

กรณีศึกษา 3: ปลั๊กอินรางวัลความภักดี

ส่วนขยายคะแนนและรางวัลสำหรับ WooCommerce อาจสร้างการแจ้งเตือนทางอีเมลมากกว่า 10 รายการเพื่อติดต่อกับลูกค้า

เทมเพลตอีเมลจะแตกต่างกันไปตามปลั๊กอินที่คุณใช้ แต่โดยทั่วไปแล้วจะดูเหมือนข้อความ จากการตั้งค่าการแจ้งเตือนคะแนน คุณสามารถเขียนข้อความของคุณเองในกล่องคำอธิบายอีเมลโดยใช้รหัสย่อ

จากนั้นบันทึกการเปลี่ยนแปลงและตรงไปที่เครื่องมือปรับแต่งอีเมล WooCommerce ของเรา จากเมนูดร็อปดาวน์ เลือกอีเมลคะแนนและรางวัลเพื่อเริ่มปรับแต่งเทมเพลต

มาเพิ่มความน่าสนใจด้วยการเพิ่มองค์ประกอบสื่อ เช่น รูปภาพ ปุ่ม และลิงก์

การออกแบบใหม่นี้จะมีผลกับการแจ้งเตือนคะแนนทั้งหมดที่จะส่งออก เฉพาะบล็อกการแจ้งเตือนระดับกลางเท่านั้นที่จะถูกแทนที่ด้วยข้อความที่คุณเพิ่งเขียนในขั้นตอนก่อนหน้านี้

บทสรุป

มีหลายวิธีสำหรับการปรับแต่งเทมเพลตอีเมลของ WooCommerce โดยไม่ต้องเข้ารหัส หากการแก้ไขซอร์สโค้ดไม่ใช่ทางเลือกของคุณ คุณสามารถลองปรับแต่งอีเมลโดยใช้ปลั๊กอินได้

ปลั๊กอินบางตัวใช้ตัวปรับแต่ง WordPress เพื่อออกแบบเทมเพลตอีเมล อย่างไรก็ตาม เครื่องมือสร้างอีเมลแบบลากและวางจะช่วยให้คุณสร้างเลย์เอาต์ที่ยืดหยุ่นยิ่งขึ้นด้วยตัวเลือกขั้นสูง

วันนี้ คุณสามารถทดลองใช้ได้โดยการดาวน์โหลด YayMail จาก WP repo และใช้งานได้โดยปราศจากความเสี่ยง เนื่องจากมันทำงานได้อย่างราบรื่นกับธีม WordPress ทั้งหมด