WooCommerce: Cum să personalizați șabloanele de e-mail fără codare

Publicat: 2021-08-05

În fiecare zi, probabil că utilizați drag-and-drop într-o varietate de interfețe. De exemplu, trageți și plasați articolele Gmail în categoria sa, încărcați fișiere în biblioteca media WordPress sau organizați aplicațiile de pe ecranul de pornire al telefonului.

În timp ce multe platforme de generare de pagini vin pentru a vă ajuta să vă proiectați site-ul web cu drag-and-drop, construirea de e-mailuri tranzacționale WooCommerce este încă considerată o sarcină complexă.

În mod implicit, setările de e-mail WooCommerce vă permit doar să schimbați profilele de culoare de bază și textul. Pentru a personaliza în continuare, va trebui să modificați codul temei.

Dacă nu sunteți un profesionist și nu doriți să spargeți codul dintre scripturile din wp-content/plugins/woocommerce/templates/emails/email-styles.php sau așa, folosind un cadru de generare de e-mail cu drag-and-drop este cea mai buna solutie.

Vă prezentăm YayMail

YayMail este o platformă de generare de e-mail implementată pentru WooCommerce.

A fost dezvoltat cu ușurința de utilizare ca scop principal, dar a fost testat pentru compatibilitate maximă cu browser-ul web și clientul de e-mail, ținând cont în același timp de capacitatea de răspuns.

Îl puteți descărca și utiliza gratuit de pe WordPress.org. Acest cod sursă deschis este gratuit pentru totdeauna și nu va trebui să faceți upgrade la nicio versiune premium pentru a personaliza complet toate șabloanele de e-mail Woo implicite.

Acum că l-ați instalat și activat, mergeți la WooCommerce > Personalizare e-mail pentru a accesa editorul de e-mail.

Proiectați e-mailuri utilizând generatorul de e-mail prin glisare și plasare

Fiind un editor drag-and-drop similar cu generatorul de pagini Elementor, YayMail vine cu toate opțiunile și setările pe același ecran.

1. Bara de instrumente superioară

Aici veți găsi primul drop-down pentru toate șabloanele de e-mail WooCommerce disponibile. În funcție de pluginurile active WooCommerce de pe site-ul dvs. actual, veți vedea noi șabloane aici.

Dacă utilizați un plugin de membru WooCommerce, veți avea șabloane de e-mail suplimentare, cum ar fi Abonament – ​​Bun venit, Memento de membru, Abonament expirat și așa mai departe.

Al doilea meniu drop-down, „Eșantion de comandă”, vă permite să alegeți orice comandă reală pentru a vedea cum se afișează câmpurile dinamice ale e-mailului la un anumit cumpărător.

Pe această bară de instrumente superioară, puteți găsi, de asemenea, cele mai utilizate butoane de acțiune, inclusiv:

  • Shortcodes : copiați un shortcode de aici, apoi inserați-l în blocul corespunzător al designului de e-mail.
  • Trimiteți e-mailul de testare : faceți un singur clic pentru a trimite un mesaj de testare la orice adresă de e-mail pentru a vedea cum ar arăta e-mailul proiectat de dvs. în căsuța de e-mail.
  • Gol : ștergeți toate blocurile de e-mail, astfel încât să puteți avea o pânză complet goală, apoi puteți începe să proiectați pentru propriile scopuri.
  • Copiați șablonul : copiați dintr-un șablon proiectat anterior și inserați-l în corpul curent al e-mailului. Apoi puteți face câteva mici ajustări, pentru a evita să începeți de la zero.
  • Resetați șablonul : această opțiune vă resetează șablonul la starea inițială, ceea ce înseamnă că aveți încă blocurile implicite de e-mail.
  • Previzualizare : vedeți instantaneu e-mailul dvs. personalizat în vizualizările desktop și mobile.
  • Salvare : salvează editările în orice moment.

2. Panoul lateral pliabil

Panoul lateral al personalizatorului de e-mail YayMail WooCommerce este format din două file: Elemente și Setări .

Toate elementele sunt trasabile și includ o mulțime de opțiuni de personalizare. Blocul de titlu, de exemplu, vă permite să editați umplutura, culoarea de fundal, culoarea textului, familia de fonturi și alte opțiuni vizuale.

În timp ce modificările din fila Elemente se aplică numai blocului ales, ajustările din Setări au efect pentru întreg șablonul de e-mail.

Unele caracteristici utilizate frecvent includ astfel:

  • Lățimea containerului de e-mail
  • Culoare de fundal periferică
  • Ascunde/Afișează imaginea produsului și SKU
  • Export/Import șabloane de e-mail

3. Previzualizare e-mail

Deoarece este un generator de e-mail bazat pe blocuri, puteți muta orice bloc în sus/jos sau puteți utiliza mânerul pentru a le trage și plasa.

În colțul din dreapta, veți avea câteva opțiuni precum:

  • Duplicați blocul de e-mail
  • Copiați blocul într-un alt șablon
  • Scoateți blocul

Cu YayMail, există personalizări nesfârșite pe care le puteți face prin schimbarea design-urilor și aspectului de e-mail, ceea ce nu se întâmplă dacă modificați fișierele cu codul temei sau utilizați personalizarea WordPress.

Studiu de caz: personalizați e-mailul de confirmare a comenzii WooCommerce

Pentru a începe personalizarea e-mailului de confirmare a comenzii, accesați WooCommerce > Personalizare e-mail > E-mail pentru afișare. De acolo, puteți alege fie Comanda de procesare, fie Comanda finalizată .

De atunci, puteți începe să adăugați orice elemente doriți. Unele elemente pe care le voi folosi includ:

  • Logo : Încărcați o imagine de logo transparentă și redimensionați-o pentru a o alinia cu lățimea containerului de e-mail
  • Pictograme sociale : alegeți cu ușurință pictogramele rețelei sociale și adăugați adresa URL pentru fiecare platformă
  • Titlu : editați textul titlului, fontul titlului, culoarea textului și culoarea de fundal
  • Imagine : Adăugați o imagine personalizată și ajustați lățimea utilizând bara de glisare
  • Subsol : Adăugați linkuri de site-uri web, cum ar fi Contul meu, Asistență pentru clienți etc.

În orice moment, puteți face clic pe butonul Previzualizare pentru a vedea aspectul e-mailului pe desktop/mobil într-o fereastră pop-up, fără a fi nevoie să părăsiți sau să reîmprospătați pagina curentă.

Apoi, puteți închide cu ușurință previzualizatorul pentru a reveni la editor.

Pentru a vedea YayMail în acțiune, consultați acest tutorial video pentru a vedea cum vă ajută să îndepliniți treaba.

Integrari

E-mailul tranzacțional este un bun mijloc de comunicare pentru scopul dvs. de marketing. Mai ales atunci când oferiți un model de abonament sau de membru prin WooCommerce, ar trebui să personalizați notificările prin e-mail pentru a face profilul mărcii dvs. personalizat și consistent.

Studiu de caz 1: plugin WooCommerce Membership

În mod implicit, acesta este ceea ce primește publicul atunci când calitatea de membru pe site-ul dvs. expiră. Puteți edita textul subiectului, al capului și al mesajului personalizat.

De ce să nu transformați acest șablon de e-mail într-un îndemn pentru a vă asigura că publicul va reveni la pachetul de abonament?

Pentru acest conținut suplimentar, voi folosi mai multe coloane pentru mesajul de e-mail de membru care expiră.

Pașii merg după cum urmează:

  • Trageți și plasați un bloc cu două coloane pe e-mail
  • Editați lățimea coloanei în procente, adică 70/30
  • Adaugă culoare de fundal sau imagine (opțional), aici folosesc albul ca culoare de fundal
  • Alegeți un bloc de text pentru prima coloană
  • Alegeți o bandă de imagine pentru a doua coloană

Așa obțin un șablon de e-mail cu mai multe coloane pentru mesajele de e-mail de membru.

Studiu de caz 2: Plugin pentru e-mailuri de urmărire WooCommerce

Cu o extensie de șablon de e-mail personalizat, cum ar fi Urmăriri, puteți trimite conținut suplimentar după ce au fost efectuate anumite acțiuni ale clienților.

Există atât de multe scenarii de magazin în care pot fi trimise e-mailuri automate programate cu conținut personalizat.

În această secțiune, vă demonstrez cum să creați și să personalizați șablonul de e-mail care va fi trimis după utilizarea unui cupon .

În primul rând, începeți să adăugați o nouă urmărire:

  • Dați-i un nume, subiectul e-mailului și ceva conținut
  • În metacaseta Tip de urmărire, asigurați-vă că alegeți E- mail de achiziție
  • În casetele de jos, alegeți declanșatorul ca „după cuponul utilizat”
  • Vine cu o mulțime de opțiuni avansate, așa că nu ezitați să-l explorați

Apoi, să trecem la pașii de personalizare:

  • Introduceți sigla și titlul
  • Adăugați un element de casetă de imagine
  • Inserați conținut și pictograme sociale

Deoarece încerc să dau tonul pentru profilele de culoare ale mărcii mele, se va folosi o culoare roz pentru culoarea de fundal a titlului și, de asemenea, pentru imaginea principală din elementul caseta de imagine.

Proiectarea blocurilor este ușoară, așa că tot ce rămâne de făcut este să ajustați umplutura dintre blocurile de e-mail pentru a obține aspectul și senzația pe care le-ați dorit întotdeauna.

Notă rapidă: vă rugăm să consultați documentele lor pentru a vă asigura că obțineți suplimentul YayMail potrivit pentru extensiile dvs. WooCommerce active actuale.

Studiu de caz 3: pluginuri de recompense de loialitate

O extensie de puncte și recompense pentru WooCommerce poate genera peste 10 notificări prin e-mail pentru a contacta clienții.

Șabloanele de e-mail variază în funcție de pluginul pe care îl utilizați, dar practic arată ca un mesaj text. Din setările de notificare puncte, puteți scrie propriile mesaje în caseta Descriere e-mail folosind codul lor scurt.

Apoi, salvați modificările și mergeți la personalizatorul nostru de e-mail WooCommerce. Din meniul drop-down, alegeți e-mail cu puncte și recompense pentru a începe să personalizați șablonul.

Să condimentăm adăugând mai multe elemente media, cum ar fi imagini, butoane și link-uri.

Acest nou design va intra în vigoare pentru toate notificările de Puncte care vor fi trimise. Doar că blocul de notificare din mijloc va fi înlocuit cu mesajele pe care tocmai le-ați scris la pasul anterior.

Concluzie

Există mai multe metode pentru personalizarea șablonului de e-mail WooCommerce fără codare. Dacă modificarea codului sursă nu este alegerea dvs., atunci puteți încerca să personalizați e-mailurile cu ajutorul pluginurilor.

Unele plugin-uri utilizează personalizarea WordPress pentru a crea șabloane de e-mail. Cu toate acestea, un generator de e-mail prin glisare și plasare vă va ajuta să creați un aspect mult mai flexibil, cu opțiuni avansate.

Astăzi îl puteți încerca descărcând YayMail din depozitul WP și să îl utilizați complet fără riscuri, deoarece funcționează perfect cu toate temele WordPress.