WooCommerce: come personalizzare i modelli di posta elettronica senza codifica

Quotidianamente, probabilmente utilizzi il trascinamento della selezione in una varietà di interfacce. Ad esempio, trascina e rilascia gli elementi di Gmail nella relativa categoria, carica file nella libreria multimediale di WordPress o organizza le app della schermata iniziale del telefono.

Sebbene molte piattaforme di creazione di pagine vengano utilizzate per aiutarti a progettare il tuo sito Web con il trascinamento della selezione, la creazione di e-mail transazionali WooCommerce è ancora considerata un'attività complessa.

Per impostazione predefinita, le impostazioni e-mail di WooCommerce ti consentono solo di modificare i profili colore e il testo di base. Per personalizzare ulteriormente, dovrai modificare il codice del tema.

Se non sei un tecnico e non vuoi decifrare il codice tra gli script in wp-content/plugins/woocommerce/templates/emails/email-styles.php o giù di lì, usando un framework di creazione di e-mail drag-and-drop è la soluzione migliore.

Presentazione di YayMail

YayMail è una piattaforma per la creazione di e-mail distribuita per WooCommerce.

È stato sviluppato con facilità d'uso come obiettivo principale, ma è stato testato per la massima compatibilità con browser Web e client di posta elettronica, tenendo d'occhio la reattività.

Puoi scaricarlo e usarlo gratuitamente da WordPress.org. Questo codice open source è gratuito per sempre e non dovrai aggiornare a nessuna versione premium per personalizzare completamente tutti i modelli di email Woo predefiniti.

Ora che l'hai installato e attivato, vai su WooCommerce > Personalizza e-mail per accedere all'editor di posta elettronica.

Progetta e-mail utilizzando il generatore di e-mail trascina e rilascia

In qualità di editor drag-and-drop simile al generatore di pagine di Elementor, YayMail viene fornito con tutte le opzioni e le impostazioni sullo stesso schermo.

1. Barra degli strumenti superiore

Qui troverai il primo menu a discesa per tutti i modelli di email WooCommerce disponibili. A seconda dei plug-in WooCommerce attivi sul tuo sito attuale, vedrai nuovi modelli qui.

Se utilizzi un plug-in per l'iscrizione a WooCommerce, avrai modelli di email aggiuntivi come Iscrizione - Benvenuto, Promemoria per l'iscrizione, Iscrizione scaduta e così via.

Il secondo menu a discesa, "Ordine di esempio", ti consente di selezionare qualsiasi ordine reale per vedere come vengono visualizzati i campi dinamici dell'e-mail su uno specifico acquirente.

In questa barra degli strumenti superiore, puoi anche trovare i pulsanti di azione più utilizzati, tra cui:

• Shortcode : copia uno shortcode da qui, quindi incollalo nel blocco appropriato del design dell'e-mail.
• Invia e-mail di prova : un clic per inviare un messaggio di prova a qualsiasi indirizzo e-mail per vedere come sarebbe l'e-mail progettata nella posta in arrivo.
• Vuoto : cancella tutti i blocchi di posta elettronica in modo da poter avere una tela completamente vuota, quindi puoi iniziare a progettare per i tuoi scopi.
• Copia modello : copia da un modello progettato in precedenza e incollalo nel corpo dell'e-mail corrente. Poi si possono fare dei piccoli aggiustamenti, così da evitare di ricominciare da capo.
• Reimposta modello : questa opzione ripristina il modello allo stato iniziale, il che significa che hai ancora i blocchi di posta elettronica predefiniti.
• Anteprima : visualizza istantaneamente la tua e-mail personalizzata su desktop e dispositivi mobili.
• Salva : salva le modifiche in qualsiasi momento.

2. Pannello laterale pieghevole

Il pannello laterale del personalizzatore e-mail di YayMail WooCommerce è composto da due schede: Elementi e Impostazioni .

Tutti gli elementi sono trascinabili e includono tantissime opzioni di personalizzazione. Il blocco dell'intestazione, ad esempio, ti consente di modificare il riempimento, il colore di sfondo, il colore del testo, la famiglia di caratteri e altre opzioni visive.

Mentre le modifiche nella scheda Elementi si applicano solo al blocco scelto, le modifiche in Impostazioni hanno effetto per l'intero modello di email.

Alcune funzionalità utilizzate di frequente includono quindi:

• Larghezza del contenitore di posta elettronica
• Colore di sfondo periferico
• Nascondi/Mostra immagine prodotto e SKU
• Esporta/Importa modelli di email

3. Anteprima e-mail

Poiché si tratta di un generatore di e-mail basato su blocchi, puoi spostare qualsiasi blocco su/giù o utilizzare la maniglia per trascinarlo e rilasciarlo.

Nell'angolo destro, avrai alcune opzioni come:

• Duplica il blocco e-mail
• Copia il blocco in un altro modello
• Rimuovi blocco

Con YayMail, ci sono infinite personalizzazioni che puoi apportare modificando i design e i layout delle e-mail, cosa che non accade se modifichi i file di codice del tema o usi il personalizzatore di WordPress.

Caso di studio: personalizza l'e-mail di conferma dell'ordine WooCommerce

Per iniziare a personalizzare l'e-mail di conferma dell'ordine, vai su WooCommerce > Personalizza e-mail > E-mail da mostrare. Da lì, puoi scegliere Ordine in elaborazione o Ordine completato .

Da quel momento in poi, puoi iniziare ad aggiungere tutti gli elementi che desideri. Alcuni elementi che userò includono:

• Logo : carica un'immagine del logo trasparente e ridimensionala per allinearla alla larghezza del contenitore di posta elettronica
• Icone social : scegli facilmente le icone dei social network e aggiungi l'URL per ciascuna piattaforma
• Intestazione : modifica il testo dell'intestazione, il carattere dell'intestazione, il colore del testo e il colore di sfondo
• Immagine : aggiungi un'immagine personalizzata e regola la sua larghezza utilizzando la barra di scorrimento
• Piè di pagina: aggiungi i collegamenti al tuo sito Web come Il mio account, Assistenza clienti, ecc.

In qualsiasi momento, puoi fare clic sul pulsante Anteprima per visualizzare l'aspetto dell'e-mail su desktop/mobile in un popup senza dover uscire o aggiornare la pagina corrente.

Quindi, puoi facilmente chiudere l'anteprima per tornare all'editor.

Per vedere YayMail in azione, guarda questo video tutorial per vedere come ti aiuta a portare a termine il lavoro.

Integrazioni

L'e-mail transazionale è un buon mezzo di comunicazione per i tuoi scopi di marketing. Soprattutto quando offri un modello di abbonamento o abbonamento tramite WooCommerce, dovresti personalizzare le notifiche e-mail per rendere il profilo del tuo marchio personalizzato e coerente.

Caso di studio 1: plug-in per l'iscrizione a WooCommerce

Per impostazione predefinita, questo è ciò che il tuo pubblico riceve quando la sua iscrizione al tuo sito sta scadendo. È possibile modificare il testo dell'oggetto, dell'intestazione e del messaggio personalizzato.

Perché non trasformare questo modello di email in un invito all'azione per assicurarsi che il pubblico torni al pacchetto di abbonamento?

Per questo contenuto extra, utilizzerò più colonne per il messaggio e-mail Abbonamento in scadenza.

I passaggi vanno come segue:

• Trascina e rilascia un blocco di 2 colonne sull'e-mail
• Modifica la larghezza della colonna in percentuale, ovvero 70/30
• Aggiungi il colore di sfondo o l'immagine (opzionale), qui uso il bianco come colore di sfondo
• Scegli un blocco di testo per la prima colonna
• Scegli una striscia di immagini per la seconda colonna

È così che ottengo un modello di posta elettronica a più colonne per i messaggi di posta elettronica di appartenenza.

Caso di studio 2: plug-in per le e-mail di follow-up di WooCommerce

Con un'estensione del modello di email personalizzata come Follow-up, puoi inviare contenuti extra dopo che sono state eseguite azioni specifiche del cliente.

Esistono così tanti scenari di negozio in cui è possibile inviare e-mail automatiche programmate con contenuto personalizzato.

In questa sezione sto dimostrando come creare e personalizzare il modello di email da inviare dopo l'utilizzo di un coupon .

Innanzitutto, inizia ad aggiungere un nuovo follow-up:

• Assegnagli un nome, un oggetto dell'e-mail e alcuni contenuti
• Nella metabox Tipo di follow-up , assicurati di scegliere Acquista email
• Nelle caselle in basso, scegli il trigger come "dopo il coupon utilizzato"
• Viene fornito con molte opzioni avanzate, quindi sentiti libero di esplorarlo

Quindi, passiamo ai passaggi di personalizzazione:

• Inserisci logo e intestazione
• Aggiungi un elemento box immagine
• Inserisci contenuto e icone social

Dal momento che sto cercando di impostare il tono per i profili colore del mio marchio, verrà utilizzato un colore rosato per il colore di sfondo dell'intestazione e anche l'immagine principale nell'elemento della casella dell'immagine.

Progettare i blocchi è facile, quindi tutto ciò che resta da fare è regolare il riempimento tra i blocchi di posta elettronica per ottenere l'aspetto che hai sempre desiderato.

Nota rapida: fai riferimento ai loro documenti per assicurarti di ottenere l'addon YayMail giusto per le tue estensioni WooCommerce attive.

Caso di studio 3: plug-in per premi fedeltà

Un'estensione punti e premi per WooCommerce può generare oltre 10 notifiche e-mail per entrare in contatto con i clienti.

I modelli di posta elettronica variano a seconda del plug-in utilizzato, ma in pratica sembra un messaggio di testo. Dalle impostazioni di Notifica punti puoi scrivere i tuoi messaggi nella casella Descrizione e-mail utilizzando il loro shortcode.

Quindi, salva le modifiche e vai al nostro personalizzatore e-mail WooCommerce. Dal menu a tendina, scegli E-mail Punti e Premi per iniziare a personalizzare il modello.

Rendiamo più piccante aggiungendo altri elementi multimediali come immagini, pulsanti e collegamenti.

Questo nuovo design avrà effetto su tutte le notifiche di punti da inviare. Solo che il blocco di avviso centrale verrà sostituito con i messaggi che hai appena scritto nel passaggio precedente.

Conclusione

Esistono diversi metodi per la personalizzazione del modello di posta elettronica WooCommerce senza codifica. Se la modifica del codice sorgente non è la tua scelta, puoi provare a personalizzare le email con l'aiuto dei plugin.

Alcuni plugin utilizzano il personalizzatore di WordPress per progettare modelli di email. Tuttavia, un generatore di e-mail drag and drop ti aiuterà a creare un layout molto più flessibile con opzioni avanzate.

Oggi puoi provarlo scaricando YayMail dal repository WP e utilizzarlo completamente senza rischi poiché funziona perfettamente con tutti i temi WordPress.