WooCommerce: So passen Sie E-Mail-Vorlagen ohne Codierung an

Veröffentlicht: 2021-08-05

Sie verwenden wahrscheinlich täglich Drag-and-Drop in einer Vielzahl von Schnittstellen. Ziehen Sie beispielsweise Ihre Google Mail-Elemente per Drag & Drop in die entsprechende Kategorie, laden Sie Dateien in die WordPress-Medienbibliothek hoch oder organisieren Sie Ihre Telefon-Startbildschirm-Apps.

Während viele Seitenerstellungsplattformen Ihnen helfen, Ihre Website per Drag-and-Drop zu entwerfen, wird das Erstellen von WooCommerce-Transaktions-E-Mails immer noch als komplexe Aufgabe angesehen.

Standardmäßig erlauben Ihnen die E-Mail-Einstellungen von WooCommerce nur, grundlegende Farbprofile und Text zu ändern. Um weitere Anpassungen vorzunehmen, müssen Sie den Themencode ändern.

Wenn Sie kein Technikfreak sind und den Code zwischen den Skripten in wp-content/plugins/woocommerce/templates/emails/email-styles.php oder so nicht knacken möchten, verwenden Sie ein Drag-and-Drop-E-Mail-Builder-Framework ist die beste Lösung.

Einführung in YayMail

YayMail ist eine E-Mail-Builder-Plattform, die für WooCommerce bereitgestellt wird.

Es wurde mit dem Hauptziel der Benutzerfreundlichkeit entwickelt, wurde jedoch auf maximale Kompatibilität mit Webbrowsern und E-Mail-Clients getestet, wobei die Reaktionsfähigkeit im Auge behalten wurde.

Sie können es kostenlos von WordPress.org herunterladen und verwenden. Dieser Open-Source-Code ist für immer kostenlos und Sie müssen nicht auf eine Premium-Version upgraden, um alle standardmäßigen Woo-E-Mail-Vorlagen vollständig anzupassen.

Nachdem Sie es installiert und aktiviert haben, gehen Sie zu WooCommerce > E -Mail-Anpassung, um auf den E-Mail-Editor zuzugreifen.

Entwerfen Sie E-Mails mit dem Drag-and-Drop-E-Mail-Builder

Als Drag-and-Drop-Editor ähnlich dem Seitenersteller von Elementor bietet YayMail alle Optionen und Einstellungen auf demselben Bildschirm.

1. Obere Symbolleiste

Hier finden Sie das erste Dropdown-Menü für alle verfügbaren WooCommerce-E-Mail-Vorlagen. Abhängig von den aktiven WooCommerce-Plugins auf Ihrer aktuellen Website sehen Sie hier neue Vorlagen.

Wenn Sie ein WooCommerce-Mitgliedschafts-Plugin verwenden, haben Sie zusätzliche E-Mail-Vorlagen wie Mitgliedschaft – Willkommen, Mitgliedschaftserinnerung, abgelaufene Mitgliedschaft und so weiter.

Das zweite Dropdown-Menü, „Beispielbestellung“, ermöglicht es Ihnen, eine beliebige echte Bestellung auszuwählen, um zu sehen, wie die dynamischen Felder der E-Mail auf der Seite eines bestimmten Käufers angezeigt werden.

Auf dieser oberen Symbolleiste finden Sie auch die am häufigsten verwendeten Aktionsschaltflächen, darunter:

  • Shortcodes : Kopieren Sie einen Shortcode von hier und fügen Sie ihn dann in den entsprechenden Block des E-Mail-Designs ein.
  • Test-E-Mail senden : Senden Sie mit einem Klick eine Testnachricht an eine beliebige E-Mail-Adresse, um zu sehen, wie Ihre gestaltete E-Mail im Posteingang aussehen würde.
  • Leer : Löschen Sie alle E-Mail-Blöcke, damit Sie eine vollständig leere Leinwand haben und dann mit dem Entwerfen für Ihre eigenen Zwecke beginnen können.
  • Vorlage kopieren : Kopieren Sie aus einer zuvor entworfenen Vorlage und fügen Sie sie in den aktuellen E-Mail-Text ein. Dann können Sie einige kleine Anpassungen vornehmen, um nicht bei Null anzufangen.
  • Vorlage zurücksetzen : Diese Option setzt Ihre Vorlage auf den ursprünglichen Zustand zurück, was bedeutet, dass Sie immer noch die Standard-E-Mail-Blöcke haben.
  • Vorschau : Zeigen Sie Ihre angepasste E-Mail sofort in der Desktop- und Mobilansicht an.
  • Speichern : Speichern Sie Ihre Änderungen jederzeit.

2. Zusammenklappbare Seitenwand

Der Seitenbereich des E-Mail-Customizers von YayMail WooCommerce besteht aus zwei Registerkarten: Elemente und Einstellungen .

Alle Elemente sind ziehbar und enthalten unzählige Anpassungsoptionen. Der Kopfzeilenblock ermöglicht es Ihnen beispielsweise, seine Polsterung, Hintergrundfarbe, Textfarbe, Schriftfamilie und andere visuelle Optionen zu bearbeiten.

Während die Änderungen auf der Registerkarte Elemente nur für den ausgewählten Block gelten, wirken sich die Anpassungen in den Einstellungen auf die gesamte E-Mail-Vorlage aus.

Einige häufig verwendete Funktionen umfassen daher:

  • Breite des E-Mail-Containers
  • Periphere Hintergrundfarbe
  • Produktbild und SKU ein-/ausblenden
  • E-Mail-Vorlagen exportieren/importieren

3. E-Mail-Vorschau

Da es sich um einen blockbasierten E-Mail-Builder handelt, können Sie jeden Block nach oben/unten verschieben oder den Griff zum Ziehen und Ablegen verwenden.

In der rechten Ecke haben Sie einige Optionen wie:

  • Duplizieren Sie den E-Mail-Block
  • Kopieren Sie den Block in eine andere Vorlage
  • Sperre entfernen

Mit YayMail gibt es endlose Anpassungen, die Sie vornehmen können, indem Sie die E-Mail-Designs und -Layouts ändern, was nicht passiert, wenn Sie Design-Codedateien ändern oder den WordPress-Customizer verwenden.

Fallstudie: WooCommerce-Bestellbestätigungs-E-Mail anpassen

Um mit der Anpassung der Bestellbestätigungs-E-Mail zu beginnen, gehen Sie zu WooCommerce > E-Mail-Anpassung > Anzuzeigende E-Mail. Dort können Sie entweder Auftrag bearbeiten oder Auftrag abschließen auswählen.

Von da an können Sie alle gewünschten Elemente hinzufügen. Einige Elemente, die ich verwenden werde, sind:

  • Logo : Laden Sie ein transparentes Logobild hoch und passen Sie die Größe an, damit es an der Breite des E-Mail-Containers ausgerichtet ist
  • Soziale Symbole : Wählen Sie einfach die Symbole für soziale Netzwerke aus und fügen Sie die URL für jede Plattform hinzu
  • Überschrift : Bearbeiten Sie den Überschriftentext, die Schriftart der Überschrift, die Textfarbe und die Hintergrundfarbe
  • Bild : Fügen Sie ein benutzerdefiniertes Bild hinzu und passen Sie seine Breite mit der Schiebeleiste an
  • Fußzeile : Fügen Sie Ihre Website-Links wie Mein Konto, Kundensupport usw. hinzu.

Sie können jederzeit auf die Schaltfläche Vorschau klicken, um das E-Mail-Erscheinungsbild auf dem Desktop/Mobilgerät in einem Popup anzuzeigen, ohne die aktuelle Seite verlassen oder aktualisieren zu müssen.

Dann können Sie die Vorschau ganz einfach schließen, um zum Editor zurückzukehren.

Um YayMail in Aktion zu sehen, schauen Sie sich dieses Tutorial-Video an, um zu sehen, wie es Ihnen hilft, Ihre Arbeit zu erledigen.

Integrationen

Transaktions-E-Mails sind ein gutes Kommunikationsmittel für Ihre Marketingzwecke. Insbesondere wenn Sie ein Abonnement- oder Mitgliedschaftsmodell über WooCommerce anbieten, sollten Sie die E-Mail-Benachrichtigungen anpassen, um Ihr Markenprofil individuell und konsistent zu gestalten.

Fallstudie 1: WooCommerce-Mitgliedschafts-Plugin

Dies ist standardmäßig das, was Ihre Zielgruppe erhält, wenn ihre Mitgliedschaft auf Ihrer Website abläuft. Sie können den Text des Betreffs, des Kopfs und der benutzerdefinierten Nachricht bearbeiten.

Warum verwandeln Sie diese E-Mail-Vorlage nicht in einen Aufruf zum Handeln, um sicherzustellen, dass das Publikum zu seinem Mitgliedschaftspaket zurückkehrt?

Für diesen zusätzlichen Inhalt verwende ich mehrere Spalten für die E-Mail-Nachricht zum Ablauf der Mitgliedschaft.

Die Schritte gehen wie folgt:

  • Ziehen Sie einen 2-Spalten-Block per Drag & Drop auf die E-Mail
  • Bearbeiten Sie die Spaltenbreite in Prozent, dh 70/30
  • Hintergrundfarbe oder Bild hinzufügen (optional), hier verwende ich Weiß als Hintergrundfarbe
  • Wählen Sie einen Textblock für die erste Spalte aus
  • Wählen Sie einen Bildstreifen für die zweite Spalte aus

So erreiche ich eine mehrspaltige E-Mail-Vorlage für die E-Mail-Nachrichten der Mitgliedschaft.

Fallstudie 2: WooCommerce Follow-up-E-Mail-Plugin

Mit einer benutzerdefinierten E-Mail-Vorlagenerweiterung wie Follow-Ups können Sie zusätzliche Inhalte senden, nachdem bestimmte Kundenaktionen durchgeführt wurden.

Es gibt so viele Geschäftsszenarien, in denen geplante automatische E-Mails mit benutzerdefinierten Inhalten gesendet werden können.

In diesem Abschnitt zeige ich Ihnen, wie Sie die E-Mail-Vorlage erstellen und anpassen, die nach Verwendung eines Gutscheins gesendet wird .

Beginnen Sie zunächst mit dem Hinzufügen eines neuen Follow-ups:

  • Geben Sie ihm einen Namen, einen E-Mail-Betreff und etwas Inhalt
  • Stellen Sie sicher, dass Sie im Metafeld „ Follow-up-Typ “ die Option „ Kauf-E-Mail “ auswählen
  • Wählen Sie in den unteren Feldern den Auslöser als „nach verwendetem Coupon“ aus.
  • Es kommt mit vielen erweiterten Optionen, also zögern Sie nicht, es zu erkunden

Fahren wir dann mit den Anpassungsschritten fort:

  • Logo und Überschrift einfügen
  • Fügen Sie ein Bildfeldelement hinzu
  • Fügen Sie Inhalte und soziale Symbole ein

Da ich versuche, den Ton für die Farbprofile meiner Marke anzugeben, wird eine rosa Farbe für die Hintergrundfarbe der Überschrift und auch für das Hauptbild im Bildfeldelement verwendet.

Das Entwerfen der Blöcke ist einfach, sodass Sie nur noch die Polsterung zwischen den E-Mail-Blöcken anpassen müssen, um das Aussehen und die Haptik zu erzielen, die Sie sich schon immer gewünscht haben.

Kurzer Hinweis: Bitte lesen Sie deren Dokumente, um sicherzustellen, dass Sie das richtige YayMail-Addon für Ihre derzeit aktiven WooCommerce-Erweiterungen erhalten.

Fallstudie 3: Plugins für Treueprämien

Eine Points and Rewards-Erweiterung für WooCommerce kann mehr als 10 E-Mail-Benachrichtigungen generieren, um mit Kunden in Kontakt zu treten.

Die E-Mail-Vorlagen variieren je nach verwendetem Plugin, aber im Grunde sieht es aus wie eine Textnachricht. In den Einstellungen für die Punktebenachrichtigung können Sie Ihre eigenen Nachrichten mit ihrem Shortcode in das Feld E-Mail-Beschreibung schreiben.

Speichern Sie dann die Änderungen und gehen Sie zu unserem WooCommerce-E-Mail-Customizer. Wählen Sie in der Dropdown-Liste Points and Rewards-E-Mail aus, um mit der Anpassung der Vorlage zu beginnen.

Lassen Sie uns etwas aufpeppen, indem Sie weitere Medienelemente wie Bilder, Schaltflächen und Links hinzufügen.

Dieses neue Design gilt für alle zu versendenden Points-Benachrichtigungen. Nur dass der mittlere Hinweisblock durch die Nachrichten ersetzt wird, die Sie gerade im vorherigen Schritt geschrieben haben.

Fazit

Es gibt mehrere Methoden zur Anpassung von WooCommerce-E-Mail-Vorlagen ohne Programmierung. Wenn die Änderung des Quellcodes nicht Ihre Wahl ist, können Sie versuchen, E-Mails mit Hilfe von Plugins anzupassen.

Einige Plugins verwenden den WordPress-Customizer, um E-Mail-Vorlagen zu entwerfen. Ein Drag-and-Drop-E-Mail-Builder hilft Ihnen jedoch dabei, ein viel flexibleres Layout mit erweiterten Optionen zu erstellen.

Heute können Sie es ausprobieren, indem Sie YayMail aus dem WP-Repo herunterladen und es völlig risikofrei verwenden, da es nahtlos mit allen WordPress-Themes funktioniert.