Le e-mail sono una parte fondamentale di ogni e-commerce. Ti servono per comunicare lo stato dell’ordine, inserire eventuali dettagli di pagamento o note sulla spedizione. E’ importante non trascurarle e ricordarti di personalizzarle avendo cura di seguire stile e forma del tuo brand.
Vediamo insieme qualche semplice snippet di codice per personalizzare le e-mail WooCommerce.
Rimuovere l’header predefinito
WooCommerce di defoult inserisce, in tutte le e-mail inviate agli utenti, una (fastidiosa) banda blu. Potresti avere (anzi dovresti) la necessità di rimuovere questa banda per far spazio ad una grafica più eleganze e in linea con lo stile del tuo negozio.
Per farlo è molto semplice. Per prima cosa devi copiare il file email-header.php da plugins/woocommerce/templates/emails/email-header.php all’interno della cartella del tuo child theme. Una volta fatto questo ti basterà rimuovere le righe dalla #43 alla #55 che racchiudono le impostazioni relative a questa parte dell’header.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<td align="center" valign="top"> <!-- Header --> <table border="0" cellpadding="0" cellspacing="0" width="100%" id="template_header"> <tr> <td id="header_wrapper"> <h1><?php echo $email_heading; ?></h1> </td> </tr> </table> <!-- End Header --> </td> </tr> |
Una volta fatto ti basterà caricare il file all’interno del tuo child theme in yourtheme/woocommerce/emails/email-header.php e la modifica sarà salvata.
Aumentare la dimensione del corpo di testo
Nelle e-mai che WooCommece invia lo spazio a disposizione per il contenuto è estremamente ridotto. Questo potrebbe causare un brutto risultato grafico, soprattutto in presenza di testo piuttosto lungo.
|
1 2 3 4 5 |
<!-- Body --> <table border="0" cellpadding="0" cellspacing="0" width="600" id="template_body"> <tr> <td valign="top" id="body_content"> <!-- Content --> |
Per aumentare lo spazio disponibile per il testo devi lavorare sempre sul file email-header.php andando a modificare le righe #42 e #59 (che diventa #46 se hai rimosso la parte relativa alla banda presente nell’header. In questo modo potrai aumentare la dimensione passando da 600px ad una dimensione a tua scelta, ad esempio 800px.
Aggiungere il metodo di pagamento scelto
Se vuoi ricordare al cliente qual’è il metodo di pagamento scelto inserisci questo codice sempre nel file functions.php del tuo child theme. Nel codice puoi scegliere se inserirlo prima o dopo la tabella con i dettagli dell’ordine semplicemente sostituendo “woocommerce_email_after_order_table” con “woocommerce_email_before_order_table” .
|
1 2 3 4 5 |
add_action( ‘woocommerce_email_after_order_table’, ‘wli_add_shipping_method_to_order_email’, 10, 2 ); function wli_add_shipping_method_to_order_email( $order, $is_admin_email ) { echo ‘<p><h4>Shipping Details:</h4> ‘ . $order->get_shipping_method() . ‘</p>’; } |
Aggiungere dettagli per il pagamento
Se vuoi aggiungere le istruzioni di pagamento dell’ordine all’interno della e-mail inviata al cliente ti basterà inserire, nel file functions.php del tuo child theme, questa porzione di codice
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
function add_order_instruction_email ( $ order , $ sent_to _ admin ) { if ( ! $ sent_to _ admin ) { if ( 'cod' == $ order -> payment _ method ) { // cash on delivery method echo '<p><strong>Instructions:</strong> Paga la merce direttamente al corriere quando ti verrà consegnato il pacco. <em>Puoi pagare solo in contanti</em>.</p>' ; } else { // other methods (ie credit card) echo '<p><strong>Dettagli di pagamento:</strong> Il pagamento verrà addebitato sulla tua carta in automatico</p>' ; } } } |
Aggiungere un testo alla mail di conferma / ringraziamento ordine
Per fidelizzare il cliente una buona idea, oltre a seguirlo nel corso del suo ordine, mantenere vivo il rapporto con lui è quella di offrire un coupon sconto per il prossimo ordine.
Inserendo questo codice nel file functions.php del child theme, aggiungi un messaggio personalizzato alla mail di ringraziamento ordine:
|
1 2 3 4 5 6 7 |
// add text to the thank you page add_action( 'woocommerce_email_before_order_table', 'add_content', 20 ); function add_content() { echo '<h2 id="h2thanks">Get 20% off</h2><p id="pthanks">Thank you for making this purchase! Come back and use the code "<strong>Back4More</strong>" to receive a 20% discount on your next purchase! Click here to continue shopping.</p>'; } |
Se invece vuoi aggiungere un’immagine come coupon sconto o di ringraziamento in chiusura della mail di ordine completato quello che devi fare è copiare il file plugins/woocommerce/templates/emails/customer-completed-order.php all’interno della cartella del tuo child theme in yourtheme/woocommerce/emails/customer-completed-order.php
Da qui potrai aggiungere alla riga #49 (appena sopra il footer della mail) il tuo codice html personalizzato per mostrare l’immagine che desideri, come ad esempio
|
1 2 |
/* Image Promo Code */ <div class="promocode"><img src="http://www.miosito.it/promocode.jpg" alt="promocode" /></div> |
Personalizzare le email con i file php
In linea generale ricorda che le e-mail di WooCommerce sono composte da più file e per personalizzarli / modificarli, quello che devi fare è copiare dalla cartella template/email del plugin, alla cartella woocommerce all’interno del tuo child theme, il file che desideri modificare.
Se vuoi cambiare qualcosa nell’header delle e-mail, devi copiare e personalizzare il file email-header.php.
Per cambiare il footer devi personalizzare email-footer.php. Diversamente per personalizzare il contenuto delle e-mail devi copiare e personalizzare i file della mail che vuoi personalizzare (ogni azione ha un suo template). Copia e modifica il file customer-processing-order.php,oppure customer-invoice.php etc.
Qui trovi l’elenco di tutti i file che compongono le varie e-mail di WooCommerce che ti voglio riproporre anche con questo schema visuale così da aiutarti a capire com’è strutturato il template email di WooCommerce
I prodotti che ti consiglio
