Comment personnaliser les e-mails WooCommerce à l'aide de code et de plugins ?

Salut les utilisateurs de WooCommerce ! Si vous souhaitez créer votre identité de marque unique et encourager les achats répétés, vous pouvez facilement le faire avec des modèles d'e-mail WooCommerce personnalisés.

Nous vous expliquerons les modèles d'e-mail WooCommerce par défaut, comment les personnaliser avec du code et quels plugins de personnalisation d'e-mail WooCommerce vous conviennent le mieux.

Commençons.

Modèles d'e-mails WooCommerce standard - types et contenu

Essentiellement, WooCommerce est équipé de onze modèles d'e-mails intégrés qui sont envoyés aux clients et à l'administrateur concernant les commandes et les mises à jour de compte.

• E-mail de suspension de commande - envoyé au client après la mise en attente d'une commande.
• E- mail de traitement de commande - envoyé au client une fois le paiement effectué.
• E- mail de commande terminée - envoyé aux clients lorsque leurs commandes sont marquées comme terminées et indique que la commande a été expédiée.
• E- mail de remboursement de la commande - envoyé au client lorsque les commandes sont marquées comme remboursées.
• Nouvelle commande - envoyé à l'administrateur du magasin lorsqu'une nouvelle commande est passée sur leur site.
• Commande annulée - envoyé à l'administrateur du magasin pour l'informer d'une commande annulée.
• Commande échouée - envoyé à l'administrateur du magasin pour l'informer d'une commande échouée.
• E-mail de facturation du client - envoyé au client et contenant les informations de commande et les liens de paiement.
• E-mail de note client - envoyé au client lorsqu'une note client est ajoutée à partir de l'administrateur de la commande de modification.
• E- mail de réinitialisation du mot de passe - envoyé au client lorsqu'il oublie le mot de passe et demande un nouveau mot de passe.
• E-mail du nouveau compte - envoyé au client lorsqu'il s'inscrit via la page de paiement ou d'inscription au compte.

Un exemple d'e-mail de commande terminée ressemble à l'instantané ci-dessous.

En bref, les e-mails contiennent les informations suivantes : informations sur le produit, prix total, taxes et frais d'expédition inclus, mode de paiement, adresse d'expédition et de facturation.

Mais ces modèles d'e-mails WooCommerce ne suffisent pas

S'agissant d'un e-mail transactionnel, les taux d'ouverture et de clics seront naturellement plus élevés que pour les autres types d'e-mails.

Cependant, ces e-mails de commande WooCommerce semblent simples, ennuyeux et peu attrayants, comme vous pouvez le voir dans le modèle d'e-mail ci-dessus.

Il manque le facteur de punch. Il ne porte pas votre marque et votre positionnement. Cela reflète mal votre proposition de valeur.

Si vous continuez à utiliser ces modèles, vos consommateurs, y compris vos fidèles, pourraient avoir une impression négative de votre marque, ce qui entraînerait un taux de désabonnement plus élevé.

Je suis désolé de le dire mais c'est vrai. Une grosse opportunité perdue !

Huit personnes sur dix ne changeront jamais leurs modèles d'e-mails. Si vous êtes l'un d'entre eux, faites le changement tout de suite.

Tout le monde lit encore les e-mails … et vous devriez y paraître bien. Vous ne voulez pas donner à vos clients une mauvaise impression de votre marque s'ils décident d'acheter quelque chose, n'est-ce pas ?

Alors pourquoi ne pas personnaliser les e-mails WooCommerce en premier lieu ?

Les e-mails WooCommerce personnalisés créent une marque et une relation uniques

La personnalisation des e-mails WooCommerce n'est pas sorcier à comprendre. Plutôt une partie de plaisir (si vous utilisez des plugins). On peut jouer avec les styles d'e-mail, les couleurs, l'alignement, les images et bien plus encore.

Comparez le modèle d'e-mail ci-dessus (fourni par le plugin Email Customizer Pro For WooCommerce) avec l'e-mail WooCommerce par défaut. Vous remarquerez facilement la différence.

De leur email initial, on peut déduire leur image de marque. Parce que nous avons une prédisposition naturelle à être excité par les couleurs et les motifs que nous percevons. L'utilisation des couleurs, des polices et du langage de votre marque établit une cohérence et renforce votre marque. Vous créez votre propre butin .

Avec chaque dollar dépensé en marketing par e-mail, une somme maximale de 38 $ peut être gagnée, fait prouvé.

Votre entreprise bénéficie du sentiment de connexion émotionnelle. Les clients deviennent vos fans dévoués à long terme. Cela donne plus de traction à votre marque.

Il aide à votre rappel. De plus, l'inclusion de produits connexes et de codes de réduction peut entraîner des achats supplémentaires .

Cela dit, ces e-mails transactionnels WooCommerce personnalisés sont un point d'accroche avec vos clients. Dès que vous verrouillez votre audience de base, les affaires s'accélèrent et les finances semblent prometteuses.

Comment personnaliser les e-mails WooCommerce à l'aide de code ?

Nous allons maintenant vous guider tout au long du processus de personnalisation de ces e-mails.

Qu'est ce que tu aimes faire? Adoptez une approche simple en utilisant des plugins et en commençant. OU voulez-vous expérimenter le codage ?

Les deux sont abordés dans cet article.

Personnalisons les e-mails WooCommerce en utilisant la méthode technique. Ensuite, nous examinerons plusieurs plugins populaires.

Personnalisez les e-mails WooCommerce à l'aide des paramètres, des crochets et des filtres

Ce n'est pas la tasse de thé de tout le monde. C'est pour ceux qui connaissent la programmation.

Il existe maintenant deux méthodes pour personnaliser les e-mails avec du code.

1. Personnalisez les modèles d'e-mails WooCommerce qui existent déjà
2. À l'aide d'un code personnalisé, créez de nouveaux modèles d'e-mail WooCommerce

Nous couvrirons la première méthode. Pour la deuxième méthode, reportez-vous à ce blog - créez des modèles de courrier électronique WooCommerce personnalisés.

Essentiellement, WooCommerce permet de personnaliser les e-mails dans trois secteurs verticaux différents : paramètres, remplacement et action/filtres (hooks).

1. Paramètres : On peut changer la couleur de fond, la couleur du texte, la couleur de base. Le hic se présente sous la forme d'une restriction de toute modification de la mise en page et du corps de l'e-mail.
2. Remplacement : Si vous souhaitez modifier la mise en page de l'e-mail, vous pouvez modifier le code HTML du modèle.
3. Hooks : En plus des modifications ci-dessus, vous pouvez également ajouter du contenu supplémentaire via des hooks sans perturber la mise en page.

Apprenons chacun des trois en détail.

Personnalisation des modèles d'e-mail à l'aide des paramètres

Voyons d'abord comment vous pouvez personnaliser un modèle d'e-mail individuellement.

Pour cela, vous devez ouvrir le modèle en cliquant sur le nom du modèle ou sur le bouton Manage à droite.

Vous pouvez personnaliser le contenu d'un modèle d'e-mail individuel. Une fois que vous avez ouvert un modèle d'e-mail, vous pouvez en personnaliser plusieurs aspects. Ce sont les options que vous obtenez comme indiqué dans l'image (avec la permission de LearnWoo.com)

• Activer/Désactiver – Cette case à cocher vous permet d'activer ou de désactiver cette notification par e-mail spécifique.
• Destinataires - Spécifiez les identifiants de messagerie auxquels cet e-mail sera envoyé. Séparez plusieurs identifiants de messagerie à l'aide d'une virgule. Ceci s'applique uniquement aux e-mails d'administration.
• Objet – Spécifiez ici l'objet de l'e-mail. Le champ autorise le texte ou l'espace réservé. Les espaces réservés disponibles sont :
  • {Titre du site}
  • {Adresse du site}
  • {URL du site}
  • {date de commande}
  • {numéro de commande}
• En-tête de l'e-mail – Spécifiez l'en-tête de l'e-mail. Les mêmes espaces réservés ci-dessus sont également applicables ici.
• Contenu supplémentaire – Le texte que vous ajoutez ici sera visible dans le corps de l'e-mail. Vous pouvez également utiliser les espaces réservés ici.
• Type d'e-mail – Spécifiez le format de l'e-mail. Les formats disponibles sont :
  • Texte brut
  • HTML
  • En plusieurs parties

Modèle HTML
Il y a une option à la fin du paramètre sous l'en-tête Modèle HTML. Ici, vous trouverez le chemin du fichier qui vous permet de modifier cette copie de modèle d'e-mail spécifique, que vous pouvez coller dans le dossier de thème pour remplacer. Il y a aussi deux boutons ici - un pour copier le fichier de modèle dans le thème et un autre pour afficher l'aperçu du modèle.

Enfin, après avoir ajouté tous les détails, vous pouvez cliquer sur le bouton Save changes .

Maintenant, vous pouvez appliquer d'autres personnalisations qui seront applicables à tous vos modèles d'e-mails. Ces options sont accessibles après vous être connecté au panneau d'administration de WordPress, puis en vous rendant sur WooCommerce > Settings > Emails > Email sender options.

Ces options incluent :

• Image d'en-tête - S'affiche en haut de tous les e-mails. Doit être le logo de votre marque.
• Texte de pied de page – Ajoutez le lien de votre site Web ou vos coordonnées pour faciliter la prise de contact de vos clients.
• Couleur de base - La couleur que vous souhaitez utiliser pour vos en-têtes, liens et arrière-plan du titre de l'e-mail.
• Couleur d'arrière-plan – La couleur d'arrière-plan de votre e-mail.
• Couleur d'arrière-plan du corps – La couleur d'arrière-plan du contenu de votre e-mail.
• Couleur du corps du texte – La couleur de tout le contenu écrit des e-mails.
• Informations sur la gestion des magasins – Connectez-vous pour recevoir des informations sur la gestion des magasins de WooCommerce ici. Cochez la case pour activer ces notifications.

Dans cette approche,

Remplacer les modèles d'e-mail

Une autre approche 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 d'e-mails en répliquant 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-processing-order.php )

Pour chacun des onze e-mails WooCommerce par défaut, voici le nom du fichier modèle. Le but de chaque e-mail est déjà couvert au début de l'article.

1. admin-commande-annulee.php
2. admin-failed-order.php
3. admin-nouvelle-commande.php
4. client-en-attente-commande.php
5. traitement-client-commande.php
6. commande-terminée-par-le-client.php
7. commande-remboursée-client.php
8. note-client.php
9. facture-client.php
10. client-nouveau-compte.php
11. client-reset-password.php

En outre, 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/ .

Dans de nombreux cas, il s'agit du modèle que les développeurs remplacent pour modifier les aspects partagés des e-mails.

Vous trouverez ci-dessous différentes parties qui forment l'e-mail ci-dessus, chacune est personnalisable.

1. email-header.php = imprime/affiche l'en-tête de l'e-mail.
2. email-footer.php = imprime/affiche le pied de page de l'e-mail.
3. email-order-details.php = imprime/affiche tous les détails de la commande - produits/articles, taxes, expédition, coupons, passerelle de paiement, etc. pour cette commande.
4. email-order-items.php = imprime/affiche les détails du produit de la commande, c'est-à-dire les éléments de ligne pour cette commande.
5. email-downloads.php = si une commande contient des produits téléchargeables, cela imprime/affiche ces informations avec le nom du fichier, le lien de téléchargement, l'expiration, le nombre de téléchargements, etc. pour cette commande.
6. email-customer-details.php = imprime/affiche les détails du client comme une adresse e-mail pour cette commande.
7. email-addresses.php = imprime/affiche l'adresse de facturation et de livraison du client pour cette commande.
8. email-styles.php = contient le CSS et les propriétés qui seront appliquées dans les emails. Doit être sécurisé par e-mail.

Supposons que vous souhaitiez modifier la couleur du texte du pied de page :

• Assurez-vous d'abord que le répertoire suivant existe dans l'installation de WordPress : wp-content/themes/your-theme/woocommerce/emails.
• Ensuite, copiez le fichier trouvé sur wp-content/plugins/woocommerce/templates/emails/email-styles.php dans le thème du magasin à :
  your-theme/woocommerce/emails/.
• Enfin, modifiez your-theme/woocommerce/emails/email-styles.php pour changer la couleur du texte du pied de page.

 #template_footer #crédit {
    bordure : 0 ;
    couleur : #66bae3 ;
    famille de polices : Arial ;
    taille de police : 12 px ;
    hauteur de ligne : 125 % ;
    text-align:center;
    rembourrage : 0 48px 48px 48px ;
}

L'exemple ci-dessus montre comment vous pouvez changer la couleur du texte du pied de page. De la même manière:

• Pour ajouter/modifier du texte dans l'e-mail de traitement, vous pouvez remplacer le modèle d'e-mail « customer-processing-order.php » et le modifier.
• Si vous ne souhaitez pas afficher l'adresse de livraison pour toutes les commandes, remplacez le modèle d'e-mail "email-customer-details.php".
• Pour embellir la conception de votre e-mail, remplacez le modèle d'e-mail 'email-styles.php' et ajoutez votre CSS personnalisé.
• Pour inclure des bannières de confiance de votre marque comme une livraison rapide, un meilleur support, un paiement sécurisé, etc., remplacez le modèle d'email 'email-footer.php'.

Personnalisation conditionnelle avec Hooks

Cette approche de personnalisation des e-mails traite du code personnalisé WooCommerce. Évidemment, cela nécessite un haut niveau d'expertise en PHP.

Mais 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.

Par exemple, vous souhaitez ajouter le mode d'expédition choisi, dans l'e-mail de commande.
Vous pouvez utiliser woocommerce_email_after_order_table ou woocommerce_email_before_order_table pour ajouter le contenu.

 add_action( 'woocommerce_email_after_order_table', 'sa_add_shipping_method_
to_order_email', 10, 2 );
function sa_add_shipping_method_to_order_email( $order, $is_admin_email ) {
    echo 'Livraison : ' . $commande->get_shipping_method();
}

N'oubliez pas que ces méthodes sont étroitement liées au thème que vous choisissez. Par conséquent, lorsque vous modifiez votre thème, vous devrez également déplacer vos fichiers de modèle modifiés ou les actions ajoutées vers le nouveau thème.

Passons maintenant à la méthode facile.

Personnalisez les modèles d'e-mails à l'aide des plugins de personnalisation d'e-mails WooCommerce

Pourquoi ne pas essayer quelque chose de nouveau qui piquera l'intérêt de vos clients ? Envoyez des e-mails personnalisés pour les faire sourire et se sentir bien. D'autant plus lorsqu'ils sont disponibles à tout moment.

Sur le marché de nos jours, il existe une pléthore de plugins. Pour l'année 2022, nous avons produit une liste de six plugins de personnalisation de messagerie WooCommerce populaires.

Voyons chacun d'eux avec leurs caractéristiques et leurs prix.

Email Customizer Pro pour WooCommerce

Dans un monde où vos clients sont continuellement assaillis de contenu, le composant le plus coûteux est la « durée d'attention », et si vous pouvez le capturer, vous envoyez de merveilleux e-mails. C'est ce que le plugin Email Customizer Pro pour WooCommerce peut vous aider.

Le plug-in vous permet de personnaliser facilement les onze modèles d'e-mail transactionnels par défaut de WooCommerce / e-mail de commande WooCommerce sans écrire une ligne de code . Ce plugin est développé par StoreApps, le développeur officiel des extensions WooCommerce.

Vous pouvez modifier le texte, les couleurs, l'en-tête et le pied de page de l'e-mail , ajouter des liens personnalisés, ajouter des liens vers vos réseaux sociaux ; le tout en utilisant l' interface familière de WordPress Customizer .

Les e-mails des abonnements WooCommerce peuvent également être personnalisés.

Un modèle d'e-mail prêt à l'emploi du plugin Email Customizer Pro pour WooCommerce ressemble à ceci :

Essayez la démo en direct

Points forts:

• Vous avez le choix entre cinq modèles prêts à l'emploi. Il n'y a pas de soucis de conception. Lorsque vous choisissez un modèle, vous serez redirigé vers votre personnalisateur WordPress familier, où vous pourrez apporter des modifications à l'e-mail.
• Apportez des modifications au texte du corps de l'e-mail . C'est le plugin USP. Vous pouvez modifier les informations existantes et ajouter les vôtres. Les messages de commande par e-mail par défaut, les en-têtes, les sous-titres et les remarques de clôture peuvent tous être modifiés. Incluez des photos, des liens vidéo, des coupons et des liens vers des articles de blog. Vous pourriez même demander des commentaires et des critiques.
• Un autre domaine où le plugin brille est la section des recommandations de produits . Pour augmenter les ventes grâce aux ventes incitatives et aux ventes croisées, utilisez des balises de fusion pour afficher des produits similaires immédiatement dans les e-mails.
• Le style d'en-tête, qui comprend la couleur de l'en-tête, la couleur du texte de l'en-tête et le texte de l'en-tête, peut ensuite être personnalisé. Dans l'espace d'en-tête, vous pouvez placer un logo pour votre entreprise.
• La barre de menu, quant à elle, permet d'afficher jusqu'à cinq liens personnalisés. Utilisez ces liens pour envoyer les clients vers n'importe quelle page d'offre, documentation de produit, pages spéciales de plan d'adhésion, etc.
• Vous pouvez ajouter du texte dans la partie pied de page de vos e-mails pour le pied de page. Il peut s'agir d'un message personnalisé ou HTML. Vous pouvez inclure trois icônes de médias sociaux avec des liens vers les profils de vos marques. Les icônes les plus couramment utilisées dans les e-mails semblent être Facebook, YouTube et Instagram.
• Vous pouvez également modifier la couleur de l'arrière-plan de l'e-mail, y compris la couleur d'arrière-plan, la couleur de la bordure de l'e-mail et la couleur du corps de l'e-mail.
• Vous pouvez voir à quoi ressembleront vos e-mails sur différents appareils en temps réel.
• Envoyez des e-mails de test aux clients pour voir comment ils apparaîtront dans leurs boîtes de réception. Vérifiez que tout fonctionne correctement et que rien n'est cassé.

Vous êtes tous prêts à créer votre propre identité de marque unique.

Prix ​​: 79 $

Obtenir le plug-in Email Customizer Pro

Personnalisateur d'e-mail WooCommerce

Développé par l'équipe WooCommerce, le plugin WooCommerce Email Customizer intègre le Customizer WordPress qui vous permet de modifier visuellement la conception de votre modèle d'e-mail. Vous n'avez besoin d'aucune connaissance en codage.

Mais rappelez-vous, ce plugin ne personnalise que la conception de vos e-mails et non le texte ou le contenu des e-mails.

Prix ​​: 79 $

Obtenez le plugin WooCommerce Email Customizer

Personnalisateur d'e-mails pour WooCommerce par ThemeHigh

Il s'agit également d'un plugin de personnalisation de messagerie WooCommerce populaire. Il existe une version gratuite du plugin sur WordPress.org et une version premium.

Points forts:

• Voir l'aperçu en direct des changements
• Ajouter un nombre illimité de lignes au modèle d'e-mail
• Ajouter différents éléments de messagerie (Basic, Woocommerce et hooks)
• Envoyer des e-mails de test

Prix ​​: 39 $

Obtenez ce plugin Email Customizer

Concepteur visuel d'e-mails pour WooCommerce

Un autre plugin de personnalisation des e-mails WooCommerce avec une fonctionnalité de glisser-déposer. Il a une version gratuite sur WordPress.org et une version premium.

Points forts:

• Envoyez des e-mails basés sur les produits et les catégories.
• Intégrez la signature numérique dans chaque e-mail de commande WooCommerce.
• Envoyez des e-mails de test pour voir comment les e-mails sont livrés à la boîte aux lettres du client.
• Créez vos propres lignes d'objet.

Prix ​​: 99 $

Obtenir le plugin Visual Email Designer

WooMail - Personnalisateur d'e-mail WooCommerce

WooMail est un plugin de personnalisation de messagerie populaire sur CodeCanyon.

Points forts:

• Modèles et blocs prédéfinis
• Glisser-déposer, aucun codage requis.
• Aperçu en direct
• Envoyer des e-mails de test

Prix ​​: 39 $

Obtenir le plug-in WooMail

Modèles d'e-mail YITH WooCommerce

Le plugin YITH WooCommerce Email Templates vous fournit des modèles pour donner un aspect plus professionnel aux messages.

Points forts:

• Ajouter des logos et des liens personnalisés
• Changer les couleurs et la typographie
• Ajouter des liens de médias sociaux
• Supprimer l'image du produit du contenu de l'e-mail

Mais, il n'y a pas d'aperçu en direct disponible.

Prix ​​: 80 $

Obtenez le plugin YITH WooCommerce Email Templates

Avantages de l'utilisation d'e-mails WooCommerce personnalisés

En plus de tout le reste, c'est super facile. Étant donné que les modèles sont prédéfinis, les propriétaires de magasins n'ont pas à se soucier d'inventer un modèle à chaque fois qu'une transaction a lieu.

• Conception d'e-mail visuellement attrayante et esthétique
• Personnalisé et sur-mesure
• La portée de rendre l'e-mail interactif
• Les e-mails séduisants renforcent les activités, généralement les revenus des ventes
• Engagement client amélioré
• Fini les e-mails banals
• Dynamique et disponible

La meilleure partie des e-mails WooCommerce personnalisés doit être leur conception réactive qui facilite la vie des propriétaires de magasins et des spécialistes du marketing.

Le plug-in de personnalisation des e-mails WooCommerce recommandé est…

Pour résumer, Email Customizer Pro pour WooCommerce se démarque différemment des autres. Il s'agit d'un package complet qui comprend des fonctionnalités de haute qualité et adaptables.

Le tout premier coup d'œil génère des ondes positives chez le client . Incroyablement conçu et personnalisable de manière créative, le plugin est un must pour les utilisateurs de WooCommerce.

Cela ajoutera une touche de piquant à votre e-mail. Vos clients ont la liberté d'espace pour ressentir la marque et s'associer à vous. En quelques clics seulement, vous pouvez créer des e-mails formidables qui apportent des résultats extravagants en retour.

Obtenir le plug-in Email Customizer Pro

Commencez à personnaliser vos e-mails dès aujourd'hui

Permettez-moi de vous donner ce conseil crucial. Le courrier électronique, à mon avis, est similaire à une lettre d'amour. Vous pouvez également engager quelqu'un pour concevoir le bulletin d'information pour vous ou choisir l'un des services de conception illimités pour travailler pour vous.

Nous devons permettre à nos clients de ressentir la marque, de la percevoir comme nous le souhaitons et d'adopter notre image de marque, en la laissant s'infiltrer dans leurs pensées et y être indéfiniment.

Et, à mon avis, faire des affaires, c'est avant tout entretenir une relation à long terme avec le client.