WooCommerce : comment personnaliser les modèles d'e-mails sans codage

Au quotidien, vous utilisez probablement le glisser-déposer dans diverses interfaces. Par exemple, faites glisser et déposez vos éléments Gmail dans sa catégorie, téléchargez des fichiers dans la médiathèque WordPress ou organisez les applications de l'écran d'accueil de votre téléphone.

Alors que de nombreuses plates-formes de création de pages interviennent pour vous aider à concevoir votre site Web par glisser-déposer, la création d'e-mails transactionnels WooCommerce est toujours considérée comme une tâche complexe.

Par défaut, les paramètres de messagerie WooCommerce vous permettent uniquement de modifier les profils de couleur et le texte de base. Afin de personnaliser davantage, vous devrez modifier le code du thème.

Si vous n'êtes pas un technicien et que vous ne voulez pas déchiffrer le code entre les scripts dans wp-content/plugins/woocommerce/templates/emails/email-styles.php ou plus, en utilisant un cadre de création d'e-mails par glisser-déposer est la meilleure solution.

Présentation de YayMail

YayMail est une plate-forme de création d'e-mails déployée pour WooCommerce.

Il a été développé avec la facilité d'utilisation comme objectif principal, mais a été testé pour une compatibilité maximale du navigateur Web et du client de messagerie tout en gardant un œil sur la réactivité.

Vous pouvez le télécharger et l'utiliser gratuitement sur WordPress.org. Ce code open source est gratuit pour toujours et vous n'aurez pas à passer à une version premium pour personnaliser entièrement tous les modèles d'e-mail Woo par défaut.

Maintenant que vous l'avez installé et activé, rendez-vous sur WooCommerce > Email Customizer pour accéder à l'éditeur de messagerie.

Concevez des e-mails à l'aide du générateur d'e-mails par glisser-déposer

En tant qu'éditeur par glisser-déposer similaire au constructeur de pages Elementor, YayMail est livré avec toutes les options et tous les paramètres sur le même écran.

1. Barre d'outils supérieure

Vous trouverez ici le premier menu déroulant pour tous les modèles d'e-mails WooCommerce disponibles. En fonction des plugins WooCommerce actifs sur votre site actuel, vous verrez de nouveaux modèles ici.

Si vous utilisez un plugin d'adhésion WooCommerce, vous aurez des modèles d'e-mail supplémentaires tels que Adhésion - Bienvenue, Rappel d'adhésion, Adhésion expirée, etc.

La deuxième liste déroulante, "Exemple de commande", vous permet de choisir n'importe quelle commande réelle pour voir comment les champs dynamiques de l'e-mail s'affichent du côté d'un acheteur spécifique.

Sur cette barre d'outils supérieure, vous pouvez également trouver les boutons d'action les plus utilisés, notamment :

• Shortcodes : copiez un shortcode à partir d'ici, puis collez-le dans le bloc approprié de la conception de l'e-mail.
• Envoyer un e-mail de test : un clic pour envoyer un message de test à n'importe quelle adresse e-mail pour voir à quoi ressemblerait votre e-mail conçu dans la boîte de réception.
• Vide : Effacez tous les blocs d'e-mails afin que vous puissiez avoir une toile complètement vierge, puis vous pouvez commencer à concevoir à vos propres fins.
• Copier le modèle : copiez à partir d'un modèle précédemment conçu et collez-le dans le corps de l'e-mail actuel. Ensuite, vous pouvez faire quelques petits ajustements, histoire d'éviter de repartir à zéro.
• Réinitialiser le modèle : cette option réinitialise votre modèle à l'état initial, ce qui signifie que vous avez toujours les blocs d'e-mails par défaut.
• Aperçu : consultez instantanément votre e-mail personnalisé sur les vues de bureau et mobiles.
• Enregistrer : Enregistrez vos modifications à tout moment.

2. Panneau latéral pliable

Le panneau latéral du personnalisateur d'e-mails YayMail WooCommerce se compose de deux onglets : Éléments et Paramètres .

Tous les éléments sont déplaçables et incluent des tonnes d'options de personnalisation. Le bloc de titre, par exemple, vous permet de modifier son remplissage, sa couleur d'arrière-plan, la couleur du texte, la famille de polices et d'autres options visuelles.

Alors que les modifications dans l'onglet Éléments s'appliquent uniquement au bloc choisi, les ajustements dans Paramètres prennent effet pour l'ensemble du modèle d'e-mail.

Certaines fonctionnalités fréquemment utilisées incluent donc :

• Largeur du conteneur d'e-mails
• Couleur de fond périphérique
• Masquer/Afficher l'image et le SKU du produit
• Exporter/Importer des modèles d'e-mails

3. Aperçu par e-mail

Puisqu'il s'agit d'un générateur d'e-mails basé sur des blocs, vous pouvez déplacer n'importe quel bloc vers le haut/bas ou utiliser la poignée pour le faire glisser et le déposer.

Dans le coin droit, vous aurez quelques options comme :

• Dupliquer le bloc email
• Copier le bloc dans un autre modèle
• Supprimer le bloc

Avec YayMail, vous pouvez effectuer des personnalisations infinies en modifiant les conceptions et les mises en page des e-mails, ce qui ne se produit pas si vous modifiez les fichiers de code de thème ou utilisez le personnalisateur WordPress.

Étude de cas : personnaliser l'e-mail de confirmation de commande WooCommerce

Pour commencer à personnaliser l'e-mail de confirmation de commande, accédez à WooCommerce > Email Customizer > Email à afficher. À partir de là, vous pouvez choisir entre Commande en cours ou Commande terminée .

À partir de là, vous pouvez commencer à ajouter tous les éléments que vous souhaitez. Certains éléments que je vais utiliser incluent:

• Logo : téléchargez une image de logo transparente et redimensionnez-la pour l'aligner sur la largeur du conteneur d'e-mails
• Icônes sociales : Choisissez facilement les icônes des réseaux sociaux et ajoutez l'URL pour chaque plateforme
• En- tête : modifiez le texte de l'en-tête, la police de l'en-tête, la couleur du texte et la couleur d'arrière-plan
• Image : ajoutez une image personnalisée et ajustez sa largeur à l'aide de la barre de défilement
• Pied de page : Ajoutez les liens de votre site Web tels que Mon compte, Support client, etc.

À tout moment, vous pouvez cliquer sur le bouton Aperçu pour voir l'apparence de l'e-mail sur le bureau/mobile dans une fenêtre contextuelle sans avoir à quitter ou à actualiser la page actuelle.

Ensuite, vous pouvez facilement fermer l'aperçu pour revenir à l'éditeur.

Pour voir YayMail en action, regardez ce didacticiel vidéo pour voir comment il vous aide à faire le travail.

Intégrations

Le courrier électronique transactionnel est un bon moyen de communication pour votre objectif marketing. Surtout lorsque vous proposez un modèle d'abonnement ou d'adhésion via WooCommerce, vous devez personnaliser les notifications par e-mail pour rendre votre profil de marque sur mesure et cohérent.

Étude de cas 1 : Plugin d'adhésion WooCommerce

Par défaut, c'est ce que votre public reçoit lorsque son adhésion à votre site expire. Vous pouvez modifier le texte de l'objet, de l'en-tête et du message personnalisé.

Pourquoi ne pas transformer ce modèle d'e-mail en appel à l'action pour vous assurer que le public reviendra à son package d'adhésion ?

Pour ce contenu supplémentaire, j'utiliserai plusieurs colonnes pour le message électronique Expiring Membership.

Les étapes se déroulent comme suit :

• Faites glisser et déposez un bloc de 2 colonnes sur l'e-mail
• Modifiez la largeur de la colonne en pourcentage, c'est-à-dire 70/30
• Ajouter une couleur d'arrière-plan ou une image (facultatif), ici j'utilise le blanc comme couleur d'arrière-plan
• Choisissez un bloc de texte pour la première colonne
• Choisissez une bande d'image pour la deuxième colonne

C'est ainsi que j'obtiens un modèle d'e-mail à plusieurs colonnes pour les e-mails d'adhésion.

Étude de cas 2 : Plugin d'e-mails de suivi WooCommerce

Avec une extension de modèle d'e-mail personnalisée comme Follow-Ups, vous pouvez envoyer du contenu supplémentaire après que des actions client spécifiques ont été effectuées.

Il existe de nombreux scénarios de magasin dans lesquels des e-mails automatiques programmés avec un contenu personnalisé peuvent être envoyés.

Dans cette section, je montre comment créer et personnaliser le modèle d'e-mail à envoyer après l'utilisation d'un coupon .

Tout d'abord, commencez à ajouter un nouveau suivi :

• Donnez-lui un nom, un sujet d'e-mail et du contenu
• Dans la métabox Type de suivi, assurez-vous de choisir Email d'achat
• Dans les cases du bas, choisissez le déclencheur comme "après l'utilisation du coupon"
• Il est livré avec de nombreuses options avancées, alors n'hésitez pas à l'explorer

Passons ensuite aux étapes de personnalisation :

• Insérer le logo et le titre
• Ajouter un élément de boîte d'image
• Insérer du contenu et des icônes sociales

Étant donné que j'essaie de donner le ton aux profils de couleurs de ma marque, une couleur rosée sera utilisée pour la couleur d'arrière-plan de l'en-tête ainsi que pour l'image principale dans l'élément de la zone d'image.

La conception des blocs est facile, il ne vous reste donc plus qu'à ajuster le rembourrage entre les blocs d'e-mails pour obtenir l'apparence que vous avez toujours voulue.

Remarque rapide : veuillez vous référer à leurs documents pour vous assurer d'obtenir le bon module complémentaire YayMail pour vos extensions WooCommerce actives actuelles.

Étude de cas 3 : plugins de récompenses de fidélité

Une extension Points and Rewards pour WooCommerce peut générer plus de 10 notifications par e-mail pour contacter les clients.

Les modèles d'e-mail varient en fonction du plugin que vous utilisez, mais en gros, cela ressemble à un message texte. À partir des paramètres de notification des points, vous pouvez écrire vos propres messages dans la zone Description de l'e-mail en utilisant leur code abrégé.

Ensuite, enregistrez les modifications et rendez-vous sur notre personnalisateur de messagerie WooCommerce. Dans la liste déroulante, choisissez E-mail Points et récompenses pour commencer à personnaliser le modèle.

Pimentons en ajoutant quelques éléments multimédias supplémentaires tels que des images, des boutons et des liens.

Ce nouveau design prendra effet sur toutes les notifications Points à envoyer. Seulement que le bloc d'avis du milieu sera remplacé par les messages que vous venez d'écrire à l'étape précédente.

Conclusion

Il existe plusieurs méthodes pour personnaliser le modèle d'e-mail WooCommerce sans codage. Si la modification du code source n'est pas votre choix, vous pouvez essayer de personnaliser les e-mails à l'aide de plugins.

Certains plugins utilisent le personnalisateur WordPress pour concevoir des modèles d'e-mails. Cependant, un générateur d'e-mails par glisser-déposer vous aidera à créer une mise en page beaucoup plus flexible avec des options avancées.

Aujourd'hui, vous pouvez l'essayer en téléchargeant YayMail à partir du référentiel WP et l'utiliser sans aucun risque car il fonctionne de manière transparente avec tous les thèmes WordPress.