Comment personnaliser les e-mails de commande dans WooCommerce

Supposons qu'après plusieurs jours de travail acharné, vous installiez avec succès votre boutique sur une plate-forme d'hébergement Web spécialisée WooCommerce

La page du produit est maintenant connectée à une base de données qui fonctionne parfaitement et le processus de paiement ne pose aucun problème. Chaque élément, y compris les pages de produits, la galerie et les commentaires, reflète les couleurs et le style de votre marque.

Ensuite, vous décidez de tester votre processus de commande de produits et découvrez soudainement que l'e-mail de commande est plutôt fade ou trop générique du point de vue des utilisateurs. Maintenant, vous devez vous demander ce que tout votre travail acharné de personnalisation de votre boutique WooCommerce a été pour rien.

WooCommerce comprend plusieurs statuts de commande qui peuvent ne pas correspondre aux flux de votre boutique, mais vous pouvez toujours marquer les commandes avec un statut personnalisé tel que Paiement en attente, Traitement, En attente, Échec, etc.

De nombreux propriétaires et administrateurs de magasins WooCommerce ont cette question commune : comment puis-je modifier les messages de demande WooCommerce par défaut pour avoir l'apparence de ma marque et comment puis-je ajouter du contenu supplémentaire pour aider les clients avec leur commande ainsi que comment créer un statut de commande WooCommerce personnalisé. .

Bien que créer des e-mails HTML impressionnants soit vraiment un exploit en soi, WooCommerce propose plusieurs options pour que même les amateurs puissent créer des e-mails incroyables.

Courriels des clients

"Vanilla" propose des notifications par e-mail WooCommerce qui sont envoyées aux clients en réponse à leurs interactions avec le magasin. Voici les e-mails les plus importants pour les clients de votre boutique WooCommerce.

• Nouvelle commande : les e-mails de nouvelle commande sont envoyés lorsqu'une nouvelle commande est reçue.
• Commande annulée : les e-mails de commande annulée sont envoyés lorsque la ou les commandes ont été marquées comme annulées.
• Commande échouée : les e-mails de commande échouée sont envoyés lorsqu'une commande en cours de traitement ou en attente est marquée comme ayant échoué.
• Commande en attente : il s'agit d'une notification de commande envoyée aux clients. Il contient les détails de la commande après qu'une commande a été mise en attente.
• Traitement de la commande : il s'agit d'une notification de commande envoyée aux clients. Il contient les détails de la commande après paiement.
• Commande terminée : les e-mails de commande terminée sont envoyés aux clients lorsque leurs commandes sont marquées comme terminées. Ces e-mails indiquent généralement que les commandes ont été expédiées.
• Commande remboursée : les e-mails de remboursement de commande sont envoyés aux clients lorsque leurs commandes sont marquées comme remboursées.
• Facture client : les e-mails de facturation client contiennent des informations sur la commande et des liens de paiement.
• Note client : les e-mails de note client sont envoyés lorsque vous ajoutez une note à la commande.
• Réinitialiser le mot de passe : les e-mails de « réinitialisation du mot de passe » du client sont envoyés lorsque les clients réinitialisent leur mot de passe.
• Nouveau compte : les e-mails de « nouveau compte » du client sont envoyés au client lorsqu'un client s'inscrit via la page de paiement ou d'inscription au compte.

En plus de ces types d'e-mails standard, vous pouvez également ajouter des e-mails personnalisés.

Options mondiales de messagerie WooCommerce

L'e-mail standard de WooCommerce ressemble à ceci :

L'administrateur WooCommerce permet une personnalisation de base de cette disposition de messagerie par défaut. Ces options sont accessibles après s'être connecté à l'administrateur WordPress et être allé dans WooCommerce > Paramètres > E-mails > Options de l'expéditeur d'e-mails. Ces options incluent :

• Définissez le nom/l'adresse de l'expéditeur (visible par le client)
• Taille de l'image d'en-tête de l'e-mail WooCommerce
• Modifier le texte du pied de page de l'e-mail
• Choisissez différentes couleurs de base, d'arrière-plan et de corps de texte

N'oubliez pas que ces choix s'appliquent à tous les e-mails. En quelques minutes seulement, vous pouvez créer un e-mail hautement personnalisé en modifiant la taille de l'image d'en-tête de l'e-mail WooCommerce, le texte de pied de page personnalisé et une autre couleur de base.

Vous avez peut-être remarqué que WooCommerce a identifié qu'une couleur de base brillante était utilisée. Pour compenser, il a utilisé une teinte appropriée pour le titre. Malheureusement, cette logique n'a pas été appliquée au contenu du pied de page. Cette mésaventure peut facilement être réparée manuellement !

Options spécifiques aux e-mails WooCommerce

Chaque type d'e-mail a son propre ensemble d'options de personnalisation. Ces options sont accessibles via WooCommerce > Paramètres > E-mails > Traitement de la commande (Cet exemple de chemin se concentre sur le traitement des e-mails de commande. Vous pouvez modifier plusieurs aspects de l'e-mail, notamment :

• Activer ou désactiver si l'e-mail est même envoyé du tout
• Le sujet de l'e-mail
• En-tête de l'e-mail (la valeur par défaut est "Merci pour votre commande")
• Si l'e-mail est envoyé en HTML ou en texte brut (l'option par défaut est HTML)

Ici, j'ai défini l'en-tête de l'e-mail personnalisé sur " Merci pour votre commande".

Remplacer le modèle WooCommerce d'e-mail personnalisé

Une approche plus efficace et efficiente consiste à modifier les mises en page par défaut des e-mails. WooCommerce propose un système de modèles utile qui vous permet de personnaliser des parties de votre boutique ou des e-mails en reproduisant le ou les fichiers de format dans le thème. Chaque type d'e-mail a un fichier modèle pour son contenu (par exemple, woocommerce/templates/emails/customer-process-order.php). De plus, il existe des modèles partagés auxquels tous les types d'e-mails peuvent accéder et utiliser. Ceux-ci peuvent être trouvés sur woocommerce/templates/emails/email-styles.php . Dans de nombreux cas, il s'agit du modèle que les développeurs remplacent pour modifier les aspects partagés des e-mails. Le processus de traitement du problème de pied de page mentionné précédemment est :

1. Assurez-vous d'abord que le répertoire suivant existe dans l'installation de WordPress : wp-content/themes/ Ensuite, copiez le fichier trouvé sur wp-content/plugins/woocommerce/templates/emails/email-styles.php dans le thème du magasin à : Enfin, modifiez your-theme /woocommerce/emails/email-styles.php pour changer la couleur du texte du pied de page en noir (par souci de brièveté, seule la partie pertinente du code du fichier de modèle est affichée) :

 $crédit = "
couleur : #66bae3 ;
taille de police : 15 px ;
text-align:center;
" ;

Cela génère un pied de page beaucoup plus lisible :

Personnalisation conditionnelle avec actions/filtres

L'approche finale et la plus efficace pour personnaliser les e-mails consiste à travailler avec le code personnalisé WooCommerce. Cela nécessite évidemment un haut niveau d'expertise en PHP. La bonne nouvelle est que le processus est simple car les mises en page originales de WooCommerce sont toujours utilisées. Le processus implique la modification de parties du contenu.

Fonctions de filtrage

• a_filtre()
• add_filter()
• appliquer_filtres()
• apply_filters_ref_array()
• filtre_courant()
• remove_filter()
• remove_all_filters()
• faire_filtre()

Actions Fonctions

• a_action()
• add_action()
• faire_action()
• do_action_ref_array()
• did_action()
• remove_action()
• remove_all_actions()
• faire_action()

Fonctions d'activation/désactivation/désinstallation

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

Pour cet exemple, j'ajouterai quelques instructions de paiement utiles à l'e-mail, en fonction du type de paiement utilisé.

Pour commencer, ajoutez ce qui suit au functions.php du thème :

 add_action( 'woocommerce_before_email_order', 'add_order_instruction_email', 10, 2 );
 
function add_order_instruction_email( $commande, $sent_to_admin ) {
  
  si ( ! $envoyé_à_admin ) {
 
    if ( 'cod' == $order->payment_method ) {
      // méthode de paiement à la livraison
      echo '<p><strong>Instructions :</strong> Le paiement intégral est dû immédiatement à la livraison : <em>espèces uniquement, sans exception</em>.</p>' ;
    } autre {
      // autres méthodes (c'est-à-dire carte de crédit)
      echo '<p><strong>Instructions :</strong> Veuillez rechercher "Madrigal Electromotive GmbH" sur votre prochain relevé de carte de crédit.</p>' ;
    }
  }
}

Si le client a opté pour "Paiement à la livraison" lors du paiement, le client recevra l'e-mail avec des instructions de commande utiles :

Options de plugin/passerelle de paiement

Plusieurs plugins et passerelles de paiement vous permettent en fait de personnaliser certaines parties des e-mails de commande. Par exemple, la méthode de paiement par virement bancaire/virement bancaire intégrée vous permet de configurer des instructions et d'insérer des informations de virement bancaire. Cela peut être fait facilement via WooCommerce > Paramètres > Paiement > BACS .

Bien que ce soit rare, il est bon de savoir que ces options sont disponibles. Ces informations pourraient également vous aider à opter pour un plugin particulier pour le magasin.

Courriels WooCommerce crochet add_actions

Lorsque vous travaillez avec des e-mails WooCommerce, le crochet add_actions est souvent utile. Lorsque vous travaillez avec ce hook, vous devrez utiliser une variable globale, email qui contiendra le sujet de l'email. voici le bout de code :

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

Le crochet ci-dessus peut être placé dans functions.php (situé dans votre dossier de thème) ou au début du modèle d'e-mail WooCommerce. la variable globale $email appelle l'objet de messagerie WooCommerce principal, tandis que $order contient une instance de l'objet global de commande WooCommerce

 global $email ; 
$commande = $email->objet ;

E-mail personnalisé WooCommerce par produit

Le code suivant envoie un modèle d'e-mails de commande personnalisés pour un produit différent

par exemple pour le produit ID 87 vous souhaitez afficher le titre d'en-tête WooCommerce email notification OU comment tester les emails WooCommerce :

 function woocommerce_custom_email_per_product_depending_on_product_id( $email_heading, $order ) {
    $woocommerce mondial ;
    $items = $order->get_items();
    foreach ( $items as $item ) {
        $product_id = $item['product_id'] ;
        si ( $product_id == 87 ) {
            $email_heading = 'Notification par e-mail WooCommerce OU comment tester les e-mails WooCommerce' ;
        }
        renvoie $email_heading ;
    }
}
add_filter( 'woocommerce_email_heading_customer_processing_order', 'woocommerce_custom_email_per_product_depending_on_product_id', 10, 5 );

Remarque : Maintenant que vous connaissez l'ensemble du processus de personnalisation des e-mails de commande WooCommerce, vous avez maintenant le choix de conserver la fonction ou de créer un plugin de messagerie WooCommerce séparé pour la confirmation et la notification par e-mail Woocommerce.

Conclusion

La configuration d'une boutique WooCommerce est assez simple, mais la personnalisation des modèles d'e-mail par défaut devient parfois délicate. Dans ce didacticiel, j'ai expliqué comment vous pouvez envoyer des e-mails de magasin hébergés par WooCommerce entièrement personnalisés pour s'adapter à tous les aspects des activités du magasin. J'ai également souligné la manière dont les modèles d'e-mail par défaut peuvent être modifiés pour insérer des informations spécifiques au magasin et à la commande dans les e-mails afin d'offrir une meilleure expérience utilisateur.

Laissez un commentaire ci-dessous si vous souhaitez ajouter à la discussion ou poser une question !