Come personalizzare le email degli ordini in WooCommerce

Supponiamo che dopo diversi giorni di duro lavoro, tu abbia configurato con successo il tuo negozio su una piattaforma di web hosting WooCommerce specializzata

La pagina del prodotto è ora collegata a un database perfettamente funzionante e il processo di pagamento non ha alcun problema. Ogni singolo elemento, comprese le pagine dei prodotti, la galleria e il feedback, riflette i colori e lo stile del tuo marchio.

Quindi decidi di testare il processo di ordinazione dei tuoi prodotti e scopri improvvisamente che l'e-mail di ordine è piuttosto blanda o troppo generica dal punto di vista degli utenti. Ora ti starai chiedendo quale sia stato tutto il tuo duro lavoro di personalizzazione del tuo negozio WooCommerce per niente.

WooCommerce include diversi stati degli ordini che potrebbero non corrispondere ai flussi del tuo negozio, ma puoi comunque contrassegnare gli ordini con uno stato personalizzato come Pagamento in sospeso, In elaborazione, In attesa, Non riuscito, ecc.

Molti proprietari e amministratori di negozi WooCommerce hanno questa domanda comune: come posso modificare i messaggi di richiesta WooCommerce predefiniti per avere l'aspetto del mio marchio e come posso aggiungere contenuti aggiuntivi per aiutare i clienti con il loro ordine e come creare uno stato dell'ordine WooCommerce personalizzato .

Sebbene la creazione di e-mail HTML impressionanti sia davvero un risultato in sé, WooCommerce offre diverse opzioni in modo che anche i dilettanti possano creare e-mail straordinarie.

Email dei clienti

"Vanilla" offre notifiche e-mail WooCommerce che vengono inviate ai clienti in risposta alle loro interazioni con il negozio. Le seguenti sono le email più importanti per i clienti del tuo negozio WooCommerce.

• Nuovo ordine: le e-mail di nuovo ordine vengono inviate quando viene ricevuto un nuovo ordine.
• Ordine annullato: le e-mail di ordine annullato vengono inviate quando gli ordini sono stati contrassegnati come annullati.
• Ordine non riuscito: le e-mail di ordine non riuscito vengono inviate quando un ordine in fase di elaborazione o sospeso è contrassegnato come non riuscito.
• Ordine in attesa: questa è una notifica dell'ordine inviata ai clienti. Contiene i dettagli dell'ordine dopo che un ordine è stato messo in attesa.
• Ordine in elaborazione: questa è una notifica dell'ordine inviata ai clienti. Contiene i dettagli dell'ordine dopo il pagamento.
• Ordine completato: le e-mail di completamento dell'ordine vengono inviate ai clienti quando i loro ordini vengono contrassegnati come completati. Queste e-mail di solito indicano che gli ordini sono stati spediti.
• Ordine rimborsato: le e-mail dell'ordine rimborsato vengono inviate ai clienti quando i loro ordini vengono contrassegnati come rimborsati.
• Fattura cliente: le e-mail di fatturazione del cliente contengono informazioni sull'ordine e collegamenti di pagamento.
• Nota del cliente: le e-mail delle note del cliente vengono inviate quando aggiungi una nota all'ordine.
• Reimposta password: le e-mail di "reimpostazione password" del cliente vengono inviate quando i clienti reimpostano le password.
• Nuovo account: le e-mail del "nuovo account" del cliente vengono inviate al cliente quando un cliente si registra tramite il checkout o la pagina di registrazione dell'account.

Oltre a questi tipi di e-mail standard, puoi anche aggiungere e-mail personalizzate.

Opzioni e-mail globali di WooCommerce

L'e-mail standard di WooCommerce si presenta così:

L'amministratore di WooCommerce consente alcune personalizzazioni di base di questo layout di posta elettronica predefinito. È possibile accedere a queste opzioni dopo aver effettuato l'accesso all'amministratore di WordPress e andando su WooCommerce > Impostazioni > E-mail > Opzioni mittente e-mail . Queste opzioni includono:

• Impostare il nome/indirizzo Da (visibile al cliente)
• Dimensioni dell'immagine dell'intestazione dell'e-mail di WooCommerce
• Modifica il testo del piè di pagina dell'email
• Scegli diversi colori di base, sfondo e corpo del testo

Ricorda che queste scelte si applicano a tutte le email. In pochi minuti, puoi creare un'e-mail altamente personalizzata modificando le dimensioni dell'immagine dell'intestazione dell'e-mail di WooCommerce, il testo del piè di pagina personalizzato e un altro colore di base.

Potresti aver notato che WooCommerce ha identificato che è stato utilizzato un colore di base brillante. Per compensare, ha usato una tonalità adatta per il titolo. Sfortunatamente, questa logica non è stata applicata al contenuto del piè di pagina. Questo incidente può essere facilmente risolto manualmente!

Opzioni specifiche per l'e-mail di WooCommerce

Ogni tipo di email ha il proprio set di opzioni di personalizzazione. È possibile accedere a queste opzioni tramite WooCommerce > Impostazioni > E-mail > Elaborazione dell'ordine (questo percorso di esempio si concentra sull'elaborazione delle e-mail dell'ordine. È possibile modificare diversi aspetti dell'e-mail, tra cui:

• Abilita o Disabilita se l'e-mail viene inviata
• L'oggetto dell'email
• Intestazione e-mail (l'impostazione predefinita è "Grazie per il tuo ordine")
• Se l'e-mail viene inviata come HTML o testo normale (l'opzione predefinita è HTML)

Qui, ho impostato l'intestazione dell'e-mail personalizzata come " Grazie per il tuo ordine".

Sovrascrivere il modello WooCommerce e-mail personalizzato

Un approccio più efficace ed efficiente consiste nel modificare i layout di posta elettronica predefiniti. WooCommerce offre un utile sistema di modelli che ti consente di personalizzare parti del tuo negozio o e-mail replicando i file di formato nel tema. Ogni tipo di email ha un file modello per il suo contenuto (ad esempio, woocommerce/templates/emails/customer-process-order.php). Inoltre, sono disponibili modelli condivisi a cui tutti i tipi di email possono accedere e utilizzare. Questi possono essere trovati su woocommerce/templates/emails/email-styles.php . In molti casi, questo è il modello che gli sviluppatori sovrascrivono per modificare gli aspetti condivisi delle e-mail. Il processo per affrontare il problema del piè di pagina menzionato in precedenza è:

1. Per prima cosa assicurati che la seguente directory esista nell'installazione di WordPress: wp-content/themes/ Quindi, copia il file trovato in wp-content/plugins/woocommerce/templates/emails/email-styles.php nel tema del negozio in: Infine, modifica il tuo tema /woocommerce/emails/email-styles.php per cambiare il colore del testo del piè di pagina in nero (per brevità, viene mostrata solo la parte rilevante del codice del file modello):

 $credito = "
colore: #66bae3;
dimensione del carattere: 15px;
allineamento testo:centro;
";

Questo genera un piè di pagina molto più leggibile:

Personalizzazione condizionale con azioni/filtri

L'approccio finale e più efficace alla personalizzazione delle e-mail è lavorare con il codice personalizzato di WooCommerce. Ciò ovviamente richiede un alto livello di esperienza in PHP. La buona notizia è che il processo è semplice perché i layout originali di WooCommerce sono ancora in uso. Il processo prevede la modifica di parti del contenuto.

Funzioni di filtro

• ha_filtro()
• aggiungi_filtro()
• applicare_filtri()
• applica_filtri_ref_array()
• filtro_corrente()
• rimuovere_filtro()
• rimuovi_tutti_filtri()
• fare_filtro()

Funzioni di azioni

• ha_azione()
• aggiungi_azione()
• fare_azione()
• do_action_ref_array()
• fatto_azione()
• rimuovere_azione()
• rimuovere_tutte_le azioni()
• fare_azione()

Funzioni di attivazione/disattivazione/disinstallazione

• register_activation_hook()
• register_uninstall_hook()
• register_deactivation_hook()

Per questo esempio, aggiungerò alcune utili istruzioni di pagamento all'e-mail, in base al tipo di pagamento alla cassa utilizzato.

Per iniziare, aggiungi quanto segue al functions.php del tema:

 add_action('woocommerce_before_email_order', 'add_order_instruction_email', 10, 2);
 
funzione add_order_instruction_email($ordine, $inviato_a_admin) {
  
  se ( ! $sent_to_admin ) {
 
    if ( 'cod' == $ordine->metodo_pagamento) {
      // metodo di contrassegno
      echo '<p><strong>Istruzioni:</strong> Il pagamento completo è dovuto immediatamente alla consegna: <em>solo contanti, senza eccezioni</em>.</p>';
    } altro {
      // altri metodi (es. carta di credito)
      echo '<p><strong>Istruzioni:</strong> cerca "Madrigal Electromotive GmbH" sul prossimo estratto conto della tua carta di credito.</p>';
    }
  }
}

Se il cliente ha optato per "Contanti alla consegna" al momento del check-out, il cliente riceverà l'e-mail con utili istruzioni per l'ordine:

Opzioni plug-in/gateway di pagamento

Diversi plug-in e gateway di pagamento consentono effettivamente di personalizzare parti delle e-mail dell'ordine. Ad esempio, il metodo di pagamento bancario/bonifico integrato consente di configurare le istruzioni e inserire le informazioni relative al bonifico. Questo può essere fatto facilmente tramite WooCommerce > Impostazioni > Checkout > BACS .

Sebbene sia raro, è bene sapere che queste opzioni sono disponibili. Queste informazioni potrebbero anche aiutarti a scegliere un plug-in particolare per il negozio.

Email WooCommerce add_actions Hook

Quando si lavora con le e-mail di WooCommerce, l'aggancio add_actions spesso è utile. Quando si lavora con questo hook, sarà necessario utilizzare una variabile globale, e-mail che conterrà l'oggetto dell'e-mail. ecco lo snippet di codice:

 add_action('woocommerce_email_header', 'woocommerce_emails_before_header', 1,3);
funzione woocommerce_emails_before_header($email_heading, $email){
    $GLOBALI['email'] = $email;
}

L'hook sopra può essere posizionato in functions.php (che si trova nella cartella del tuo tema) o all'inizio del modello di email di WooCommerce. la variabile globale $email chiama l'oggetto email principale di WooCommerce, mentre $order contiene un'istanza dell'oggetto ordine globale di WooCommerce

 e-mail $ globale; 
$ordine = $email->oggetto;

Email personalizzata WooCommerce per prodotto

Il codice seguente invia un modello di e-mail di ordine personalizzato per un prodotto diverso

ad esempio per l' ID prodotto 87 si desidera visualizzare il titolo dell'intestazione Notifica e-mail WooCommerce OPPURE come testare le e-mail WooCommerce:

 funzione woocommerce_custom_email_per_product_depending_on_product_id($email_heading, $ordine) {
    $ woocommerce globale;
    $items = $ordine->get_items();
    foreach ( $ articoli come $ articolo ) {
        $id_prodotto = $elemento['id_prodotto'];
        se ( $id_prodotto == 87 ) {
            $email_heading = 'Notifica e-mail WooCommerce OPPURE come testare e-mail WooCommerce';
        }
        restituisce $intestazione_email;
    }
}
add_filter('woocommerce_email_heading_customer_processing_order', 'woocommerce_custom_email_per_product_depending_on_product_id', 10, 5);

Nota: ora che conosci l'intero processo di personalizzazione delle e-mail degli ordini WooCommerce, ora puoi scegliere se mantenere la funzione o creare un plug-in e-mail WooCommerce separato per la conferma e la notifica e-mail di WooCommerce.

Conclusione

Configurare un negozio WooCommerce è piuttosto semplice, ma a volte la personalizzazione dei modelli di posta elettronica predefiniti diventa complicata. In questo tutorial, ho discusso di come inviare e-mail del negozio ospitato WooCommerce completamente personalizzate per soddisfare tutti gli aspetti delle attività del negozio. Ho anche evidenziato il modo in cui i modelli di e-mail predefiniti possono essere modificati per inserire nelle e-mail informazioni specifiche del negozio e dell'ordine per fornire una migliore esperienza utente.

Lascia un commento qui sotto se desideri aggiungere alla discussione o fare una domanda!