WooCommerce: Cara Menyesuaikan Template Email Tanpa Coding

Setiap hari, Anda mungkin menggunakan drag-and-drop di berbagai antarmuka. Misalnya, seret dan lepas item Gmail Anda ke kategorinya, unggah file ke perpustakaan media WordPress, atau atur aplikasi layar beranda ponsel Anda.

Sementara banyak platform pembuat halaman datang untuk membantu Anda mendesain situs web Anda dengan drag-and-drop, membangun email transaksional WooCommerce masih dianggap sebagai tugas yang kompleks.

Secara default, pengaturan email WooCommerce hanya memungkinkan Anda untuk mengubah profil warna dasar dan teks. Untuk menyesuaikan lebih lanjut, Anda harus memodifikasi kode tema.

Jika Anda bukan teknisi dan tidak ingin memecahkan kode di antara skrip di wp-content/plugins/woocommerce/templates/emails/email-styles.php atau lebih, gunakan kerangka kerja pembuat email seret dan lepas adalah solusi terbaik.

Memperkenalkan YayMail

YayMail adalah platform pembuat email yang digunakan untuk WooCommerce.

Ini telah dikembangkan dengan kemudahan penggunaan sebagai tujuan utama, tetapi telah diuji untuk browser web maksimum dan kompatibilitas klien email sambil tetap memperhatikan daya tanggap.

Anda dapat mengunduh dan menggunakannya secara gratis dari WordPress.org. Kode sumber terbuka ini selamanya gratis dan Anda tidak perlu meningkatkan ke versi premium apa pun untuk sepenuhnya menyesuaikan semua templat email default Woo.

Sekarang setelah Anda menginstal dan mengaktifkannya, buka WooCommerce > Email Customizer untuk mengakses editor email.

Rancang email menggunakan pembuat email seret dan lepas

Sebagai editor drag-and-drop yang mirip dengan pembuat halaman Elementor, YayMail hadir dengan semua opsi dan pengaturan di layar yang sama.

1. Bilah alat atas

Di sini Anda akan menemukan dropdown pertama untuk semua template email WooCommerce yang tersedia. Bergantung pada plugin WooCommerce aktif di situs Anda saat ini, Anda akan melihat template baru di sini.

Jika menggunakan plugin keanggotaan WooCommerce, Anda akan memiliki templat email tambahan seperti Keanggotaan – Selamat Datang, Pengingat Keanggotaan, Keanggotaan Kedaluwarsa, dan sebagainya.

Dropdown kedua, “Contoh pesanan”, memungkinkan Anda memilih pesanan nyata untuk melihat bagaimana bidang dinamis email ditampilkan di ujung pembeli tertentu.

Di bilah alat atas ini, Anda juga dapat menemukan tombol tindakan yang paling sering digunakan termasuk:

• Kode pendek : Salin kode pendek dari sini lalu tempelkan ke blok desain email yang sesuai.
• Kirim email percobaan : Sekali klik untuk mengirim pesan percobaan ke alamat email mana pun untuk melihat seperti apa tampilan email yang Anda rancang di kotak masuk.
• Kosong : Kosongkan semua blok email sehingga Anda dapat memiliki canva yang benar-benar kosong, lalu Anda dapat mulai mendesain untuk keperluan Anda sendiri.
• Salin template : Salin dari template yang dirancang sebelumnya dan tempel ke badan email saat ini. Kemudian Anda dapat membuat beberapa penyesuaian kecil, untuk menghindari memulai dari awal.
• Reset template : Opsi ini mengatur ulang template Anda ke keadaan awal, artinya Anda masih memiliki blok email default.
• Pratinjau : Lihat email khusus Anda secara instan di tampilan desktop dan seluler.
• Simpan : Simpan hasil edit Anda kapan saja.

2. Panel samping yang dapat dilipat

Panel samping penyesuai email YayMail WooCommerce terdiri dari dua tab: Elemen dan Pengaturan .

Semua elemen dapat diseret dan menyertakan banyak opsi penyesuaian. Blok heading, misalnya, memungkinkan Anda untuk mengedit padding, warna latar belakang, warna teks, keluarga font, dan opsi visual lainnya.

Sementara perubahan di tab Elemen hanya berlaku untuk blok yang dipilih, penyesuaian di Pengaturan berlaku untuk seluruh template email.

Beberapa fitur yang sering digunakan antara lain:

• Lebar wadah email
• Warna latar belakang periferal
• Sembunyikan/Tampilkan gambar produk dan SKU
• Ekspor/Impor template email

3. Pratinjau email

Karena ini adalah pembuat email berbasis blok, Anda dapat memindahkan blok apa pun ke atas/bawah atau menggunakan pegangan untuk menarik dan melepaskannya.

Di sudut kanan, Anda akan memiliki beberapa opsi seperti:

• Gandakan blok email
• Salin blok ke template lain
• Hapus blok

Dengan YayMail, ada banyak penyesuaian yang dapat Anda lakukan dengan mengubah desain dan tata letak email, yang tidak akan terjadi jika Anda memodifikasi file kode tema atau menggunakan penyesuai WordPress.

Studi kasus: sesuaikan email konfirmasi pesanan WooCommerce

Untuk mulai menyesuaikan email konfirmasi pesanan, buka WooCommerce > Email Customizer > Email untuk ditampilkan. Dari sana, Anda dapat memilih Memproses pesanan atau Menyelesaikan pesanan .

Sejak saat itu, Anda dapat mulai menambahkan elemen apa pun yang Anda inginkan. Beberapa elemen yang akan saya gunakan meliputi:

• Logo : Unggah gambar logo transparan dan ubah ukurannya agar sejajar dengan lebar wadah email
• Ikon sosial : Pilih ikon jejaring sosial dengan mudah dan tambahkan URL untuk setiap platform
• Heading : Mengedit teks heading, font heading, warna teks, dan warna background
• Gambar : Tambahkan gambar khusus dan sesuaikan lebarnya menggunakan bilah geser
• Footer : Tambahkan tautan situs web Anda seperti Akun saya, Dukungan pelanggan, dll.

Kapan saja, Anda dapat mengklik tombol Pratinjau untuk melihat tampilan email di desktop/seluler dalam sembulan tanpa harus meninggalkan atau menyegarkan halaman saat ini.

Kemudian, Anda dapat dengan mudah menutup pratinjau untuk kembali ke editor.

Untuk melihat YayMail beraksi, lihat video tutorial ini untuk melihat bagaimana ini membantu Anda menyelesaikan pekerjaan.

Integrasi

Email transaksional adalah sarana komunikasi yang baik untuk tujuan pemasaran Anda. Terutama ketika Anda menawarkan model langganan atau keanggotaan melalui WooCommerce, Anda harus menyesuaikan pemberitahuan email untuk membuat profil merek Anda dipesan lebih dahulu dan konsisten.

Studi Kasus 1: Plugin Keanggotaan WooCommerce

Secara default, inilah yang diterima audiens Anda saat keanggotaan mereka di situs Anda kedaluwarsa. Anda dapat mengedit teks subjek, kepala, dan pesan khusus.

Mengapa tidak mengubah template email ini menjadi ajakan bertindak untuk memastikan audiens akan kembali ke paket keanggotaan mereka?

Untuk konten tambahan ini, saya akan menggunakan beberapa kolom untuk pesan email Keanggotaan yang Kedaluwarsa.

Langkah-langkahnya sebagai berikut:

• Seret dan lepas blok 2 kolom ke email
• Edit lebar kolom dalam persentase, yaitu 70/30
• Tambahkan warna background atau gambar (opsional), disini saya menggunakan warna putih sebagai warna background
• Pilih blok teks untuk kolom pertama
• Pilih strip gambar untuk kolom kedua

Begitulah cara saya mencapai template email beberapa kolom untuk pesan email keanggotaan.

Studi Kasus 2: Plugin email tindak lanjut WooCommerce

Dengan ekstensi template email khusus seperti Tindak Lanjut, Anda dapat mengirim konten tambahan setelah tindakan pelanggan tertentu dilakukan.

Ada begitu banyak skenario toko di mana email otomatis terjadwal dengan konten khusus dapat dikirim.

Di bagian ini, saya mendemonstrasikan cara membuat dan menyesuaikan template email yang akan dikirim setelah kupon digunakan .

Pertama, mulailah menambahkan tindak lanjut baru:

• Beri nama, subjek email, dan beberapa konten
• Di metabox Jenis Tindak Lanjut , pastikan untuk memilih Email Pembelian
• Di kotak bawah, pilih pemicu sebagai "setelah kupon digunakan"
• Muncul dengan banyak opsi lanjutan, jadi jangan ragu untuk menjelajahinya

Kemudian, mari kita lanjutkan ke langkah penyesuaian:

• Sisipkan logo dan judul
• Tambahkan elemen kotak gambar
• Sisipkan konten dan ikon sosial

Karena saya mencoba mengatur nada untuk profil warna merek saya, warna merah muda akan digunakan untuk warna latar belakang judul dan juga gambar utama dalam elemen kotak gambar.

Mendesain blok itu mudah, jadi yang tersisa hanyalah menyesuaikan padding di antara blok email untuk mendapatkan tampilan dan nuansa yang selalu Anda inginkan.

Catatan singkat: lihat Dokumen mereka untuk memastikan Anda mendapatkan addon YayMail yang tepat untuk ekstensi WooCommerce aktif Anda saat ini.

Studi Kasus 3: plugin penghargaan loyalitas

Ekstensi Poin dan Hadiah untuk WooCommerce dapat menghasilkan 10+ notifikasi email untuk menyentuh basis pelanggan.

Template email bervariasi tergantung pada plugin yang Anda gunakan, tetapi pada dasarnya terlihat seperti pesan teks. Dari pengaturan Notifikasi Poin, Anda dapat menulis pesan Anda sendiri di kotak Deskripsi Email menggunakan kode pendeknya.

Kemudian, simpan perubahan dan buka penyesuai email WooCommerce kami. Dari dropdown, pilih email Poin dan Hadiah untuk mulai menyesuaikan template.

Mari membumbui dengan menambahkan beberapa elemen media seperti gambar, tombol, dan tautan.

Desain baru ini akan berlaku pada semua notifikasi Poin yang akan dikirim. Hanya saja, blok pemberitahuan tengah akan diganti dengan pesan yang baru saja Anda tulis di langkah sebelumnya.

Kesimpulan

Ada beberapa metode untuk kustomisasi template email WooCommerce tanpa coding. Jika modifikasi kode sumber bukan pilihan Anda, maka Anda dapat mencoba menyesuaikan email dengan bantuan plugin.

Beberapa plugin menggunakan penyesuai WordPress untuk mendesain template email. Namun, pembuat email seret dan lepas akan membantu Anda membuat tata letak yang jauh lebih fleksibel dengan opsi lanjutan.

Hari ini Anda dapat mencobanya dengan mengunduh YayMail dari repo WP dan menggunakannya sepenuhnya bebas risiko karena berfungsi mulus dengan semua tema WordPress.