Come personalizzare le email degli ordini di WooCommerce

Certo, le email degli ordini di WooCommerce sono di solito aggiornamenti di routine. Ma offrono anche un filo diretto con i clienti. Ogni email permette di generare fiducia, rafforzare il brand e creare un’impressione duratura che faccia tornare i clienti sul sito.

Purtroppo, i template predefiniti delle email di WooCommerce non hanno l’impatto che la maggior parte delle aziende potrebbe desiderare. Il design è generico e le possiblità di personalizzazione sono limitate, il che le fa sembrare impersonali e non riescono a rappresentare l’identità specifica del brand. Senza personalizzazione, si perde la possibilità di entrare in contatto con i clienti in modo significativo.

Per fortuna, è possibile personalizzare le email degli ordini di WooCommerce per farle risaltare di più. E ci sono diversi modi per farlo. È possibile utilizzare le impostazioni integrate, affidarsi ai plugin o scrivere del codice personalizzato. Qualunque sia l’opzione scelta, è possibile creare email dall’aspetto professionale e in grado di offrire una migliore esperienza ai clienti.

Questo articolo mostra come trasformare semplici email in email eccezionali. Descriveremo le soluzioni basate su plugin per chi vuole ottenere risultati rapidi e esempi di codice personalizzato per che vuole avere il controllo totale.

Cominciamo!

Le impostazioni predefinite delle email di WooCommerce

WooCommerce dispone di una serie di template di email standard progettati per gestire le principali interazioni con i clienti, come conferme degli ordini, aggiornamenti sulla spedizione e rimborsi. Questi template utilizzano dei segnaposto per inserire dinamicamente i dati dell’ordine, come i nomi dei clienti, le informazioni sui prodotti e i prezzi. Sebbene queste email integrate coprano le caratteristiche base e forniscano certamente informazioni rilevanti ai clienti, lasciano molto a desiderare in termini di design e branding.

I template di email predefiniti di WooCommerce seguono un design semplice e funzionale. Presentano layout semplici, schemi di colori minimali e una formattazione dei contenuti di base. Se da un lato questo garantisce la compatibilità con la maggior parte dei client di posta elettronica, dall’altro limita la possibilità di creare un’esperienza memorabile per il cliente. Le email non riflettono lo stile unico del brand e non offrono molte opzioni per aggiungere tocchi personalizzati.

Queste limitazioni rendono difficile distinguersi nelle caselle di posta dei clienti, soprattutto in mercati competitivi. Ecco perché personalizzare le email di WooCommerce è così importante. Permette di migliorare le comunicazioni e di creare un legame più forte con il pubblico.

Vediamo come personalizzare questi template utilizzando il pannello delle impostazioni di WooCommerce.

Personalizzare le email degli ordini di WooCommerce utilizzando il pannello delle impostazioni

WooCommerce offre opzioni di personalizzazione integrate che permettono di apportare rapide modifiche alle email degli ordini senza bisogno di plugin o codice personalizzato. Queste impostazioni sono accessibili dalla bacheca di WordPress e riguardano elementi di branding come il logo, i colori e il testo di base. Sebbene queste opzioni siano un buon punto di partenza, hanno delle limitazioni che potrebbero far desiderare di più.

Accedere al pannello delle impostazioni

Per iniziare, nella bacheca di WordPress, andiamo su WooCommerce > Impostazioni > Email. Qui vedremo un elenco di tipi di email come Nuovo ordine, Ordine annullato e Ordine completato. Queste sono tutte email diverse che WooCommerce invia a noi o ai clienti, a seconda della situazione.

Facciamo clic sul pulsante Gestisci per ogni tipo di email per personalizzarne i dettagli, ma per il design generale delle email, bisogna scorrere verso il basso oltre queste email per raggiungere le opzioni dei template.

Opzioni di personalizzazione disponibili

Una volta giunti alla voce Modello email, è possibile apportare alcune modifiche all’aspetto del template predefinito.

Qui è possibile personalizzare attributi come il colore primario dell’email, il colore dello sfondo e del testo del corpo. Queste piccole modifiche possono permettere di adattare le email allo schema di colori del brand. In altre parole, le email si abbineranno almeno al sito web.

È anche possibile personalizzare l’immagine dell’intestazione e il testo del footer, dove si potrebbe includere uno slogan, il nome dell’azienda o le informazioni di contatto. Queste piccole modifiche possono rendere le email più professionali e personalizzate.

Limiti delle impostazioni integrate

Sebbene questi strumenti rendano possibile un branding di base, non danno il pieno controllo sulle email. Ad esempio:

• Il layout delle email rimane fisso, quindi non è possibile riorganizzare gli elementi o aggiungere nuove sezioni.
• I caratteri non possono essere personalizzati oltre agli stili predefiniti utilizzati dal sito web.
• Non c’è modo di includere elementi dinamici come consigli sui prodotti o link di upsell.

Queste limitazioni rendono il pannello delle impostazioni ottimo per piccole modifiche, ma non ideale per le aziende che vogliono offrire un’esperienza altamente personalizzata. E non ne parliamo se il obiettivo è l’interattività.

Plugin ed estensioni per la personalizzazione avanzata delle email degli ordini di WooCommerce

Se le impostazioni integrate di WooCommerce non offrono la flessibilità di cui si ha bisogno, i plugin e le estensioni di WooCommerce possono aiutare a creare email degli ordini splendidamente personalizzate con funzioni avanzate. Queste estensioni possono aiutare ad andare oltre il branding di base per creare layout personalizzati e includere elementi dinamici come link di upsell e consigli sui prodotti.

Anche i plugin presentano dei limiti. Alcuni possono creare conflitti con altre estensioni, plugin o temi di WooCommerce, causando problemi di funzionalità.

Anche gli aggiornamenti di WooCommerce o di WordPress possono talvolta interrompere la funzionalità dei plugin. Inoltre, se qualcosa va storto, il debug dei plugin può richiedere molto tempo, soprattutto se non se ne ha familiarità.

Ecco tre plugin ed estensioni popolari che permettono di personalizzare le email degli ordini di WooCommerce, con le loro caratteristiche principali:

1. Email Customizer for WooCommerce

L’estensione Email Customizer for WooCommerce aggiunge a WooCommerce un editor drag-and-drop per personalizzare i layout delle email. È possibile aggiungere elementi come loghi, testi, immagini e pulsanti, che danno il pieno controllo sul design delle email.

Le caratteristiche principali includono template predefiniti, opzioni per inserire contenuti personalizzati come offerte di upsell o messaggi personalizzati e anteprime in tempo reale.

2. Kadence WooCommerce Email Designer

Kadence WooCommerce Email Designer è un plugin che permette di progettare email più gradevoli. Funziona bene con WooCommerce e permette di modificare font, colori e layout.

Alcune caratteristiche degne di nota sono le anteprime in tempo reale delle email, la possibilità di personalizzare l’intestazione, il footer e del contenuto dell’email e il supporto dell’importazione e dell’esportazione dei design da riutilizzare su siti diversi

3. YITH WooCommerce Email Templates

Il plugin YITH WooCommerce Email Templates offre una libreria di template di email dal design professionale. È l’ideale se si vuole ottenere un aspetto curato senza dover spendere ore per la progettazione. Offre svariati template dagli stili diversi, opzioni per includere icone di social media, branding e contenuti dinamici e funziona bene insieme ad altre estensioni di WooCommerce.

Come personalizzare le email degli ordini di WooCommerce con un plugin

Come esempio per questo tutorial utilizziamo il plugin Kadence WooCommerce Email Designer. Ecco come installare e utilizzare il plugin per personalizzare le email:

Installazione e attivazione del plugin

Accediamo alla bacheca di WordPress e andiamo su Plugin > Aggiungi nuovo. Cerchiamo Email Customizer for WooCommerce, facciamo clic su Installa ora e attiviamo il plugin.

Personalizzazione dei template delle email

Andiamo su WooCommerce > Email Customizer nella bacheca. Usiamo l’editor per personalizzare il layout delle email. È possibile aggiungere elementi di branding come il logo, cambiare i colori per adattarli al brand e inserire un testo personalizzato. È anche possibile scegliere un template predefinito.

Elementi dinamici

Aggiungiamo link di upsell per incoraggiare la ripetizione degli acquisti. Ad esempio, è possibile inserire un pulsante che promuove i prodotti correlati.

A questo punto, è possibile anche inserire delle prove sociali, come le recensioni dei clienti o i badge di fiducia, per generare credibilità.

Salvaggio e testing delle email

Salviamo il design delle email personalizzate e utilizziamo lo strumento di anteprima integrato per verificarne l’aspetto. Testiamo le email inviandole a noi stessi per assicuriamoci che tutto venga visualizzato correttamente. A questo scopo, facciamo clic su Invia anteprima email nella parte inferiore del customizer.

I plugin sono efficaci per migliorare le email degli ordini, ma se si riscontrano frequenti problemi di compatibilità, a lungo termine la soluzione più affidabile è quella del codice personalizzato.

Vediamo come personalizzare le email di WooCommerce utilizzando del codice personalizzato che ci dia il massimo controllo.

Come personalizzare le email degli ordini di WooCommerce con il codice personalizzato

Se si ha bisogno di un controllo totale sulle email degli ordini di WooCommerce, scrivere del codice personalizzato è la soluzione migliore. A differenza dei plugin, che si basano su funzioni predefinite (che potrebbero comunque farci sentire un po’ chiusi in casa), il codice dà la libertà di progettare email che si adattino perfettamente al brand e che includano funzioni specifiche. È anche una soluzione più scalabile, poiché non si è legati a software di terze parti che potrebbero diventare incompatibili o obsoleti nel tempo.

Per creare email personalizzate, bisogna lavorare con gli hook e i template integrati di WooCommerce. Così facendo, saremo in grado di personalizzare ogni aspetto delle email, dall’intestazione e dal footer agli elementi dinamici e basati sui dati, come i consigli personalizzati sui prodotti. E il risultato finale?

Sarà un’esperienza completamente personalizzata che riflette il brand e mantiene il coinvolgimento dei clienti. Cominciamo con un esempio base.

Esempio base di email degli ordini di WooCommerce basata sul codice

WooCommerce offre diversi hook e filtri che è possibile utilizzare per personalizzare il contenuto delle email. Ad esempio, è possibile collegarsi ai filtri woocommerce_email_headers e woocommerce_email_footer per modificare le intestazioni, i footer e qualsiasi altra cosa.

Ecco un semplice esempio di un footer personalizzato per le email degli ordini:

add_filter('woocommerce_email_footer_text', 'custom_email_footer_text');
function custom_email_footer_text( $footer_text ) {
    $footer_text = 'Thank you for shopping with us! Check out our latest deals at <a href="https://yourwebsite.com">yourwebsite.com</a>.';
    return $footer_text;
}

È possibile aggiungere questo frammento al file functions.php del child theme.

Utilizzare HTML e CSS per il design preciso delle email

Se si vuole che le email abbiano un aspetto curato e visivamente accattivante, modificare i template delle email di WooCommerce con HTML e CSS è un’ottima soluzione. WooCommerce salva i template delle email nella cartella woocommerce/email del tema. Modificando questi template, è possibile mettere a punto il layout, la tipografia e il design e creare email che abbiano più senso per il negozio.

Ad esempio, per aggiungere un’intestazione personalizzata all’email “Ordine completato dal cliente”, è possibile modificare il file customer-completed-order.php che si trova nella cartella woocommerce/emails.

Ecco come fare:

Per prima cosa, copiamo il file customer-completed-order.php nella cartella woocommerce/emails del tema. In questo modo le modifiche non verranno sovrascritte durante gli aggiornamenti di WooCommerce.

Poi, aggiungiamo il contenuto dell’intestazione personalizzata all’inizio del file.

Ad esempio, possiamo aggiungere qualcosa di simile a questo:

<div style="background-color: #FFFF44; padding: 20px; text-align: center;">
    <img src="https://yourwebsite.com/logo.png" alt="Your Logo" style="max-width: 150px;">
    <h2 style="font-family: Arial, sans-serif; color: #333;">Your Order is Complete!</h2>
</div>

Questo frammento di codice aggiunge il logo in alto al centro dell’email e un colore di sfondo giallo all’area dell’intestazione:

I client di posta elettronica spesso eliminano gli stili esterni, quindi per garantire la compatibilità è importante utilizzare il CSS in linea. In questo modo il design sarà coerente su tutti i dispositivi e le piattaforme di posta elettronica.

Migliorare le email con HTML e CSS permette di avere un controllo preciso sul loro aspetto. È bene assicurarsi di mantenere il design compatibile con i dispositivi mobili utilizzando proprietà reattive come le larghezze espresse in percentuale e le media queries.

Aggiungere elementi dinamici alle email degli ordini di WooCommerce

Gli elementi dinamici possono rendere le email degli ordini di WooCommerce ancora più coinvolgenti. In questo modo, le email saranno più personalizzate e, in alcuni casi, dotate di funzioni interattive. Gli hook e i filtri di WooCommerce consentono di inserire facilmente questi elementi direttamente nei template delle email per aumentare il coinvolgimento.

Esempio: aggiungere consigli personalizzati sui prodotti

È possibile utilizzare gli hook di WooCommerce per inserire raccomandazioni di prodotti correlati o upsell specifici per ogni ordine del cliente. Ad esempio, si potrebbero mostrare prodotti complementari in base agli articoli presenti nel carrello.
Per iniziare, aggiungiamo il contenuto dinamico utilizzando un hook:

add_action('woocommerce_email_after_order_table', 'add_related_products_to_email', 10, 4);
function add_related_products_to_email( $order, $sent_to_admin, $plain_text, $email ) {
    if ( $email->id === 'customer_completed_order' ) {
        echo '<h3 style="font-family: Arial, sans-serif;">You might also like:</h3>';
        // Loop through order items
        foreach ( $order->get_items() as $item ) {
            $product_id = $item->get_product_id();
            // Get related products
            $related_products = wc_get_related_products( $product_id, 2 ); // Fetch 2 related products
            foreach ( $related_products as $related_id ) {
                $related_product = wc_get_product( $related_id );
                if ( $related_product && $related_product->is_visible() ) {
                    echo '<p style="font-family: Arial, sans-serif;">
                        <a href="' . esc_url( $related_product->get_permalink() ) . '">' . esc_html( $related_product->get_name() ) . '</a>
                    </p>';
                }
            }    
        }
    }
}

Questo snippet si aggancia all’azione woocommerce_email_after_order_table e permette di visualizzare i prodotti correlati sotto i dettagli dell’ordine nell’email “Ordine completato” del cliente.

Esempio: aggiungere un link dinamico per la richiesta di recensione

Possiamo incoraggiare i clienti a lasciare una recensione inserendo un link personalizzato nell’email. Ad esempio:

add_action('woocommerce_email_footer', 'add_review_request_to_email');

function add_review_request_to_email() {
    // Safely output HTML for the review request
    echo '<p style="text-align: center; font-family: Arial, sans-serif;">
            We'd love your feedback! <a href="' . esc_url('https://yourwebsite.com/review') . '">Leave a review here</a>.
          </p>';
}

Questo snippet aggiunge una semplice call-to-action nel footer dell’email, invitando i clienti a condividere le loro opinioni sul prodotto.

Esempio: Incorporare i pulsanti dei social media

È anche possibile includere i pulsanti dei social media per connettersi con i clienti al di là delle email. Aggiungiamo il seguente codice per visualizzare icone cliccabili nel footer delle email:

add_action('woocommerce_email_footer', 'add_social_media_links');

function add_social_media_links() {
    // Safely output HTML for social media links
    echo '<div style="text-align: center; margin-top: 20px;">
            <a href="' . esc_url('https://facebook.com/yourbusiness') . '" style="margin-right: 10px;">
                <img src="' . esc_url('https://yourwebsite.com/facebook-icon.png') . '" alt="Facebook" style="width: 20px;">
            </a>
            <a href="' . esc_url('https://instagram.com/yourbusiness') . '">
                <img src="' . esc_url('https://yourwebsite.com/instagram-icon.png') . '" alt="Instagram" style="width: 20px;">
            </a>
          </div>';
}

Come testare le personalizzazioni

Dopo aver personalizzato le email per gli ordini di WooCommerce, i test ci assicureranno che tutto venga visualizzato correttamente e come previsto su più dispositivi. Un test approfondito aiuta a individuare gli errori di formattazione, i link non funzionanti e gli elementi mancanti prima che i clienti se ne accorgano.

Ecco alcuni strumenti che potrebbero tornare utili:

• WP Mail Logging: WP Mail Logging è un noto plugin che tiene traccia di tutte le email in uscita dal sito WordPress. Possiamo usarlo per verificare che le email personalizzate vengano inviate correttamente e per esaminarne il contenuto.
• Anteprima delle email per WooCommerce: questo plugin permette di visualizzare l’anteprima delle email di WooCommerce direttamente nella bacheca di WordPress. È uno strumento utile per verificare le personalizzazioni senza effettuare ordini reali.
• Strumenti per testare i client di posta elettronica: piattaforme come Litmus e Email on Acid permettono di visualizzare l’anteprima delle email su diversi client (come Gmail e Outlook) e dispositivi.

È anche possibile visualizzare l’anteprima delle email nella bacheca. Il plugin Preview E-mails for WooCommerce permette di controllare il layout, i colori e il contenuto dei template personalizzati. Possiamo verificare che tutti gli elementi, loghi, testo e contenuto dinamico, appaiano come previsto.

Poi inviamo delle email di prova a noi stesso o a un account di staging per vedere come appaiono in una casella di posta reale. Controlliamo se ci sono problemi come link non funzionanti, immagini mancanti o errori di formattazione.

Le best practice da seguire per personalizzare in modo efficace le email di WooCommerce

Personalizzando le email degli ordini di WooCommerce miglioriamo l’esperienza del cliente. O almeno possiamo migliorarla. Seguire le best practice ci permette di avvicinarci a questo obiettivo con email efficaci, accessibili e compatibili con tutte le piattaforme.

Ecco quattro step per assicurarci che la personalizzazione delle email sia conforme alle attuali best practice:

1. Mantenere un design mobile-friendly e facile da leggere

Oltre la metà di tutte le email viene aperta su dispositivi mobili, quindi il design reattivo è imperativo. Useremo i CSS inline per controllare i layout e assicurarci che i font, i pulsanti e le immagini siano scalati in modo appropriato. Evitiamo il disordine attenendoci a design semplici e puliti che diano priorità alla leggibilità.

2. Verificare la compatibilità con i client di posta elettronica

I diversi client di posta elettronica, come Gmail e Outlook, rendono le email HTML in modo diverso. Testiamo le email su varie piattaforme e su diversi dispositivi per individuare eventuali incongruenze nella formattazione, nei colori o nella reattività.

3. Aggiungere una chiara call-to-action

Ogni email di ordine deve avere uno scopo che vada oltre la conferma dell’acquisto. Possiamo utilizzare le CTA per incoraggiare azioni come lasciare una recensione, consultare i prodotti correlati o iscriversi alla newsletter. Dovremo fare in modo che le CTA siano ben visibili e raggiungibili per il clic, anche su mobile.

4. Usare un linguaggio semplice ed evitare una formattazione eccessiva

Scriviamo le email con un tono colloquiale e facile da comprendere. Un sovraccarico di immagini, caratteri in grassetto o layout complessi possono distrarre dal messaggio e aumentare i tempi di caricamento.

Errori frequenti e suggerimenti per la risoluzione dei problemi

Anche con un’attenta pianificazione, le personalizzazioni delle email degli ordini di WooCommerce possono talvolta andare male. Che si tratti di email che non vengono inviate, layout che si rompono o contenuti dinamici che non si aggiornano, sapere come risolvere i problemi più comuni farà risparmiare tempo e lavoro.

Ecco i tre problemi principali e come risolverli:

1. Le email non vengono inviate dopo la personalizzazione

Se le email non vengono più inviate dopo aver apportato delle modifiche, il problema è probabilmente legato al server email o alla configurazione. È possibile risolvere il problema con i seguenti accorgimenti:

• Controllare le impostazioni del server email: bisogna assicurarsi che l’ambiente di hosting supporti le email transazionali. I provider di hosting gestiti come Kinsta offrono la consegna ottimizzata delle email per WooCommerce.
• Verificare la configurazione SMTP: è importante usare un plugin come WP Mail SMTP per impostare un server SMTP affidabile per l’invio delle email. È opportuno testare la connessione per verificare che le email vengano inviate correttamente.

2. Conflitti con i temi o layout non funzionanti

A volte le personalizzazioni possono far sì che il tema di WordPress entri in conflitto con il layout delle email. Per risolvere questo problema:

• Cancelliamo la cache dei template di WooCommerce: andiamo su WooCommerce > Stato > Strumenti e facciamo clic su Cancella la cache dei template. In questo modo WooCommerce sarà costretto a caricare i template aggiornati.

• Esaminiamo i problemi del codice: esaminiamo il codice personalizzato per individuare eventuali errori. Per individuare eventuali problemi, possiamo utilizzare gli strumenti di debug di PHP o consultare la console di sviluppo del browser.
• Controlla le sovrascritture dei temi: Se il tema sovrascrive i template di email di WooCommerce, assicurati che questi siano aggiornati e compatibili con la versione di WooCommerce.

3. Il contenuto delle email non si aggiorna

Se le modifiche apportate al contenuto delle email non vengono visualizzate, il problema potrebbe essere legato a template sovrascritti o a un posizionamento errato del codice. Per risolvere il problema:

• Controlliamo i template delle email sovrascritti nel tema: andiamo alla cartella woocommerce/emails del tema e verifichiamo che i template corrispondano alle modifiche. Se necessario, copiamo i nuovi template dalla cartella del plugin WooCommerce e riapplichiamo le personalizzazioni.
• Assicuriamoci che gli snippet siano nel file giusto: aggiungiamo gli snippet PHP al file functions.php del child theme o a un plugin personalizzato, per garantire la compatibilità durante gli aggiornamenti del tema.

Riepilogo

La personalizzazione delle email degli ordini di WooCommerce permette di rafforzare il brand e migliorare l’esperienza dei clienti. Personalizzare queste email in modo che riflettano il stile è solo un altro modo per creare fiducia e incoraggiare la ripetizione dell’attività nel tempo.

In questo articolo abbiamo analizzato diversi metodi per personalizzare le email degli ordini di WooCommerce. Possiamo scegliere la semplicità di soluzioni basate su plugin, oppure decidere di avere il pieno controllo delle email scrivendo codice. Entrambi gli approcci possono aiutarci a raggiungere risultati sorprendenti.

Non lasciamo che i template predefiniti limitino il nostro potenziale. Prendiamoci il tempo necessario per ottimizzare le email e osserviamo l’impatto sulla soddisfazione e sulla fidelizzazione dei clienti. E se la gestione del sito WordPress sembra eccessivamente onerosa, prendi in considerazione l’hosting gestito di Kinsta. Kinsta si occupa della manutenzione e dell’ottimizzazione delle prestazioni in modo che tu possa concentrarti sulla crescita del tuo business.

Steve Bonisteel Kinsta

Steve Bonisteel è un Technical Editor di Kinsta che ha iniziato la sua carriera di scrittore come giornalista della carta stampata, inseguendo ambulanze e camion dei pompieri. Dalla fine degli anni '90 si occupa di tecnologia legata a Internet.