Jalara Studio

veröffentlicht am

WooCommerce E-Mail-Templates bearbeiten

#


Die Ausgabe und das Layout der Seiten und E-Mails des Plugins WooCommerce können entweder mittels der im Plugin vorhandenen Template-Dateien manuell bearbeitet oder mit Hilfe von Hooks bzw. Plugins manipuliert und angepasst werden.

Inhalt

1 E-Mail-Templates manuell bearbeiten

Der Abschnitt 1 betrachtet die E-Mails an die Kunden, darunter die E-Mail zur Bestätigung der Bestellung, die E-Mail zur Bestätigung des Zahlungseinganges und die E-Mail mit der Versandmitteilung.

2 Manuelles Bearbeiten der E-Mail-Templates mittels Hooks oder Plugins umgehen

Der Abschnitt 2 enthält Codeschnipsel zum Anhängen von Dateien und zur Veränderung der Zeichenketten in den E-Mails, sowie einen Überblick über das Plugin WP HTML Mail mit dem sich die E-Mails auch ohne Programmierkenntnisse anpassen lassen.

1 E-Mail-Templates manuell bearbeiten

Das Plugin WooCommerce von Automattic enthält 140 Template-Dateien1 zur Anpassung der Seiten und E-Mails. Zur Anpassung der Email-Template-Dateien muss das im Ordner des Plugins liegende Verzeichnis templates/emails in das aktive Theme kopiert werden. Der Ordner templates muss anschließend in woocommerce umbenannt werden:

wp-content/plugins/woocommerce/templates/emails =>
wp-content/themes/THEMENAME/woocommerce/emails

Im Verzeichnis /templates/emails/2 des Plugins WooCommerce befinden sich die Template-Dateien für die E-Mails an den Kunden und den Benutzer mit der Rolle Administrator. Im Ordner plain3 liegen die Templates, die verwendet werden, wenn in den Einstellungen des Plugins festgelegt wurde, dass die E-Mails als Klartext (engl. plain text) versendet werden sollen.

1. 1 E-Mails an den Kunden

In dem Folgenden soll der Inhalt der E-Mails für den Kunden bzw. Käufer angepasst werden, die die Bestellbestätigung enthalten, den Zahlungseingang bestätigen (sowie die Bearbeitung des Auftrages) und die zum Schluss mit der Versandmitteilung versendet wird. Hierfür sind die in den Plugin-Einstellungen zu findenden E-Mails Bestellung wartend, Bestellung in Bearbeitung und Bestellung fertiggestellt verantwortlich.

Die Einstellungen der E-Mails findest du im Backend mit Klick auf die Menüpunkte WooCommerceEinstellungenE-Mails:

Klicke auf eine der E-Mail-Benachrichtigungen (z.B., um diese zu aktivieren, den E-Mail-Typ (HTML, Klartext, Multipart) zu bestimmen und um den Betreff, die E-Mail-Kopfzeile und die jeweilige Template-Datei bearbeiten zu können:

1. 1. 1 Bestellung wartend / Customer On Hold Order

In den Einstellungen des Plugins WooCommerce innerhalb des Tabs Kasse können Anweisungen für die jeweils aktivierten Zahlungswege (Überweisung, Scheckzahlung, per Nachnahme) hinzugefügt werden, die in der E-Mail der Bestellbestätigung erscheinen, die automatisch nach einer Bestellung gesendet wird, deren Zahlung noch nicht erfolgte.

Die darauf folgende Zeichenkette »Deine Bestellung wird solange zurückgestellt, bis wir deinen Zahlungseingang bestätigen. Nachfolgend findest du die Details zu deiner Bestellung:« (engl. "Your order is on-hold until we confirm payment has been received. Your order details are shown below for your reference:") befindet sich zum Anpassen in der Template-Datei customer-on-hold-order.php4 (bzw. in den deutschen Sprachdateien des Plugins).

Die E-Mail mit der Bestellbestätigung kann dem Kunden auch wiederholt gesendet werden, wenn in den Bestelldetails der jeweiligen Bestellung, der Bestellstatus von Zahlung ausstehend auf In Wartestellung zurückgesetzt und anschließend die Bestellung aktualisiert wird. Hierbei wird auch eine Bestellbestätigungsemail an den Benutzer mit der Rolle Administrator gesendet.

Beispiel der Änderung in den Einstellungen* und in der Datei customer-on-hold-order.php

Betreff*: Bestätigung Ihrer Bestellung bei {site_title} vom {order_date} (Bestellnummer: {order_number})
E-Mail Kopfzeile*: Bestellung vom {order_date}
Veränderter String: _e( 'Ihre Bestellung wurde aufgenommen und wird nach Zahlungseingang an Sie versendet. Nachfolgend finden Sie die Details zu Ihrer Bestellung.', 'woocommerce' );

  • * WooCommerceEinstellungenE-MailsBestellung wartend

1. 1. 2 Bestellung in Bearbeitung / Customer Processing Order

Nach dem Bestätigen des Zahlungseingangs und Klick auf In Bearbeitung (WooCommerce › Bestellungen › Bestellung #123) versendet WooCommerce eine E-Mail mit der Zeichenkette »Deine Bestellung ist bei uns eingegangen und wird nun bearbeitet. Deine Bestelldetails werden nachstehend zur Kontrolle angezeigt:« (engl. "Your order has been received and is now being processed. Your order details are shown below for your reference:"), die sich innerhalb der Template-Datei customer-processing-order.php5 befindet.

Diese E-Mail kann dem Kunden wiederholt gesendet werden, wenn in den Bestelldetails der jeweiligen Bestellung der Bestellstatus auf In Bearbeitung zurückgesetzt und anschließend die Bestellung aktualisiert wird.

Hinweis: Handelt es sich bei der Bestellung um digitale Waren oder wird die Ware direkt nach Zahlungseingang versendet, kann auch auf die E-Mail Bestellung in Bearbeitung verzichtet werden. Die Bestätigung des Zahlungseinganges kann in der E-Mail angegeben werden, die die Versandbestätigung enthält. Ist die E-Mail Bestellung in Bearbeitung aktiv könnte folgender Text innerhalb des Tabs E-Mails in den Einstellungen des Plugins angegeben werden:

Beispiel der Änderung in den Einstellungen* und in der Datei customer-processing-order.php

Betreff*: Bestätigung Ihrer Zahlung (Bestellnummer: {order_number})
E-Mail Kopfzeile*: Ihre Bestellung wird bearbeitet.
Veränderter String: _e( 'Ihre Zahlung ist bei uns eingegangen. Ihre Bestellung wird nun bearbeitet. Die Bestelldetails werden nachstehend zur Kontrolle angezeigt:', 'woocommerce' );

  • * WooCommerceEinstellungenE-MailsBestellung in Bearbeitung

1. 1. 3 Bestellung fertiggestellt / Customer Completed Order

Wurde die Ware versendet oder/und zum Download bereit gestellt, wird die Bestellung mit Klick auf Fertiggestellt abgeschlossen und eine E-Mail mit dem Satz »Hallo! Deine Bestellung bei TITEL DER WEBSITE wurde nun fertiggestellt. Deine Bestelldetails werden nachstehend zur Kontrolle angezeigt:« (engl. "Hi there. Your recent order on %s has been completed. Your order details are shown below for your reference:") an den Kunden versendet. Diese Zeichenkette befindet sich in der Template-Datei customer-completed-order.php6.

Beispiel der Änderung in den Einstellungen* und in der Datei customer-completed-order.php

Betreff*: Bestellung ist abgeschlossen (Bestellnummer: {order_number})
E-Mail Kopfzeile*: Ihre Bestellung ist abgeschlossen.
Veränderter String: Ihre Bestellung wurde versendet. / Ihre Bestellung steht zum Download bereit.

  • * WooCommerceEinstellungenE-MailsBestellung fertiggestellt

Tipp: Du kannst Methoden wie has_downloadable_item() und get_shipping_method() aus der Klasse WC_Abstract_Order7 im E-Mail-Template verwenden, um Zeichenketten für den Kunden ausgeben zu können, die passend zur Versandmethode oder zur Angabe der Downloadlinks sind:

if ( $order->has_downloadable_item() ){ 
    echo '<p>Nachstehend finden Sie die Downloadlinks:</p>';
}

1. 2 Überblick

Die folgende Übersicht enthält die Namen der E-Mail-Templates für die Kunden und den Administrator:

E-Mail-Templates, die eine Zeichenkette für den Kunden enthalten:

  1. customer-on-hold-order.php (Bestellung wartend) @version 2.5.0
  2. customer-processing-order.php (Bestellung in Bearbeitung) @version 2.5.0
  3. customer-completed-order.php (Bestellung fertiggestellt) @version 2.5.0
  4. customer-invoice.php (Kundenrechnung / Bestelldetails) @version 3.3.0 (NEU)
  5. customer-note.php (Hinzugefügte Anmerkung des Kunden) @version 2.5.0
  6. customer-refunded-order.php (Rückerstattete Bestellung) @version 2.5.0
  7. customer-new-account.php (Neues Kundenkonto) @version 1.6.4
  8. customer-reset-password.php (Passwort zurücksetzen) @version 2.0.0

E-Mail-Templates, die Zeichenketten für den Administrator enthalten:

  1. admin-new-order.php (Neue Bestellung) @version 2.5.0
  2. admin-cancelled-order.php (Stornierte Bestellung) @version 2.5.0
  3. admin-failed-order.php (Fehlgeschlagene Bestellung) @version 2.5.0

Partial Templates

Außer diesen Email-Templates können z.B. auch die darin aufgerufenen Partial Templates wie email-header.php (@version 2.4.0)8, ​email-footer.php (@version 2.3.0)9 und ​email-styles.php (@version 3.3.0 (NEU))10 angepasst werden, die jeweils für den Kopfbereich (engl. header), die Fußzeile (engl. footer) und die Formatierungen bzw. das Design der E-Mails verantwortlich sind.
Die Ausgabe der Produktdetails in den E-Mails kann mit den Templates email-order-items.php (@version 3.4.0 (NEU)), email-order-details.php (@version 3.3.1 (NEU)), email-downloads.php (@version 3.4.0 (NEU)) angepasst werden und in den Templates email-customer-details.php (@version 2.5.0) und email-addresses.php (@version 3.2.1 (NEU)) lässt sich der Bereich in der E-Mail anpassen, der die E-Mail- und Liefer-Adresse des Kunden ausgibt.

Tipp: Mit dem Plugin Edit WooCommerce Templates11, lassen sich alle 140 Templates in WooCommerce im Backend von WordPress (WooCommerceTheme Templates) bearbeiten und nach der Bearbeitung im Editor per Klick ins aktive Theme speichern:

2 Manuelles Bearbeiten der E-Mail-Templates mittels Hooks oder Plugins umgehen

2. 1 Hooks in WooCommerce

Zusätzlich oder auch alternativ ist es möglich, die in den Templates vorhandenen Hooks zum Hinzufügen oder Manipulieren der Funktionen zu nutzen. So kann in den WooCommerce-E-Mails der Seitentitel in der Fußzeile mit dem Filter Hook 'woocommerce_email_footer_text' angepasst oder ein Anhang mit dem Filter Hook 'woocommerce_email_attachments' mitgesendet werden. Weil laut EGBG12 der Verbraucher über sein Widerrufsrecht informiert werden muss, könnte somit folgender Codeschnipsel genutzt werden, um die PDF-Dateien Widerrufsbelehrung.pdf und Muster-Widerrufsformular.pdf den E-Mails als Anhang mitzugeben:

function pdf_to_woocommerce_email ( $attachments_wr, $id, $object ) {
    $wrb_pdf_path = get_template_directory() . '/woocommerce/Widerrufsbelehrung.pdf';
    $mwrf_pdf_path = get_template_directory() . '/woocommerce/Muster-Widerrufsformular.pdf'; 
    $attachments_wr[] = $wrb_pdf_path;
    $attachments_wr[] = $mwrf_pdf_path; 
    return $attachments_wr;
}
add_filter( 'woocommerce_email_attachments', 'pdf_to_woocommerce_email', 10, 3);

Hinweis: Füge den Codeschnipsel in die Theme-Datei functions.php ein und achte darauf, dass die zu versendenden PDF-Dateien innerhalb des Themes im Ordner woocommerce liegen müssen.

Weitere Hooks findest du in den Email-Templates und in der WooCommerce Hook Reference13. So besitzt zur Anpassung der Produkt-Spalte, die Email-Template-Datei email-order-items.php die Filter Hooks 'woocommerce_order_item_visible', 'woocommerce_order_item_class', 'woocommerce_order_item_thumbnail', 'woocommerce_order_item_name' und 'woocommerce_email_order_item_quantity' und die Email-Templates admin-cancelled-order.php, admin-failed-order.php, admin-new-order.php, customer-completed-order.php, customer-invoice.php, customer-note.php, customer-on-hold-order.php, customer-processing-order.php, customer-refunded-order.php nutzen die Action Hooks 'woocommerce_email_header', 'woocommerce_email_order_details', 'woocommerce_email_order_meta', 'woocommerce_email_customer_details' und 'woocommerce_email_footer' (Pfeile; von oben nach unten):

Die Email-Templates customer-new-account.php und customer-reset-password.php (für die E-Mails, die dem Kunden nach der Erstellung eines Kontos und nach einer Passwort-Wiederherstellung versendet werden) beinhalten die Action Hooks 'woocommerce_email_header' (erster Pfeil) und 'woocommerce_email_footer' (letzter Pfeil).

Good to know: Das Plugin WooCommerce verwendet die genannten Action Hooks selbst zum Hinzufügen der folgenden Funktionen14:

Der Action Hook 'woocommerce_email_header' ruft die Funktion email_header() auf und bindet damit die Template-Datei email-header.php ein und der Action Hook 'woocommerce_email_footer' ruft die Funktion email_footer() auf, die die Template-Datei email-footer.php einbindet.

Der Action Hook 'woocommerce_email_order_details' wird von WooCommerce genutzt, um die Funktionen order_details() und order_downloads() aufzurufen. Die Funktion order_details() ruft die Template-Datei email-order-details.php auf und die Funktion order_downloads() wird aufgerufen, wenn ein Produkt zum Download erworben wurde. Hierbei wird die Template-Datei email-downloads.php aufgerufen. Die Spalten für die Produkt-Titel, Ablaufdaten und Download-Links lassen sich mit dem Filter Hook 'woocommerce_email_downloads_columns' manipulieren.

Der Action Hook 'woocommerce_email_order_meta' ruft die Funktion order_meta() auf. Diese bindet die Metadaten des erworbenen Produktes ein. Die Ausgabe der Metadaten lässt sich mit den Filter Hooks 'woocommerce_email_order_meta_keys' und 'woocommerce_email_order_meta_fields' manipulieren.

Der Action Hook 'woocommerce_email_customer_details' ruft jeweils die Funktionen customer_details() und email_addresses() auf, um die Template-Dateien email-customer-details.php und email-addresses.php einzubinden. Die Felder der Kundendetails können mit dem Filter Hook 'woocommerce_email_customer_details_fields' manipuliert werden.

2. 2 Zeichenketten mit dem Filter Hook 'gettext' bearbeiten

Sollen die Zeichenketten (engl. strings) geändert, aber nicht in der Template-Datei bearbeitet werden, können die Strings mit Hilfe eines Plugins wie WPML15 oder Loco Translate16 zur Anpassung der Sprachdateien, oder mit dem Filter Hook 'gettext'17 manipuliert werden. Folgender Codeschnipsel, eingefügt in die Datei functions.php im (Child-)Theme oder in ein seitenspezifisches Plugin, überschreibt die in den Sprachdateien übersetzte Zeichenkette der Template-Datei customer-on-hold-order.php (Bestellung wartend):

function woocommerce_email_bestellung_wartend( $translated ) {
    $translated = str_replace( 'Deine Bestellung wird solange zurückgestellt, bis wir deinen Zahlungseingang bestätigen. Nachfolgend findest du die Details zu deiner Bestellung:', 'Ihre Bestellung wird zurückgestellt, bis der Zahlungseingang bestätigt ist. Nachfolgend finden Sie die Details zu Ihrer Bestellung:', $translated);
    return $translated;
}
add_filter( 'gettext', 'woocommerce_email_bestellung_wartend' );

Hinweis: Das Anpassen der Email-Templates ist möglicherweise empfehlenswerter, weil der Nachteil dieser Methode ist, dass der übersetzte String beim nächsten Update der Sprachdateien18 19 verändert sein kann und der Codeschnipsel daraufhin erneut angepasst werden muss.

2. 3 Plugin WP HTML Mail

Wer keine Kenntnisse in PHP oder CSS besitzt, kann zur Anpassung der WooCommerce-E-Mails das Plugin WP HTML Mail20 von Hannes Etzelstorfer nutzen. Mit dem Plugin kann das Design z.B. des Kopfbereiches und der Fußzeile der E-Mails angepasst werden, die über WordPress versendet werden, darunter z.B. die mit den Kontaktformular-Plugins Contact Form 7, Caldera Forms und Ninja Forms oder die mit den Shop-Plugins WooCommerce, Easy Digital Downloads, WP Support Plus und WP eCommerce versendeten E-Mails. (Welche Plugins die Templates des Plugins WP HTML Mail nutzen können, erfährst du innerhalb des Tabs Plugins (EinstellungenE-Mail Template). Von hier aus kann das jeweilige Plugin auch direkt installiert werden.)

Unterhalb der gemachten Einstellungen kann in jedem Tab das Ergebnis als Vorschau betrachtet und eine E-Mail-Adresse zum Absenden einer Test-E-Mail angeben werden:

In dem Folgenden wird das Plugin WP HTML Mail in der Version 2.7.8 und die kostenpflichtige Erweiterung in den Grundzügen erklärt.

2. 3. 1 Tab Allgemein

Innerhalb des Tabs Allgemein (EinstellungenE-Mail Template) kann neben der Hintergrundfarbe auch der Name und die E-Mail-Adresse des Absenders angepasst werden:

Beachte: Beim Versenden der E-Mails werden die in den Plugin-Einstellungen des Plugins WP HTML Mail gespeicherten Angaben (Farbeinstellungen, Name, E-Mail-Adresse des Absenders) verwendet. Dies gilt auch, wenn innerhalb der WooCommerce-Einstellungen (WooCommerceEinstellungen E-MailsE-Mail-Absender Einstellungen bzw. E-Mail-Vorlage) bereits Angaben gemacht wurden.

2. 3. 2 Tab Header

Innerhalb des Tabs Header können Einstellungen für den Kopfbereich gemacht werden, darunter die Header-Hintergrundfarbe, das Header-Bild und der Header-Text. Der Header-Text wird angezeigt, wenn kein Bild hinzugefügt wurde oder wenn das Bild in der E-Mail nicht angezeigt wird. (So müssen z.B. die E-Mail-Empfänger, die Gmail nutzen, erst das Anzeigen der Bilder bestätigen.):

Beachte: Die Anpassung wird automatisch gespeichert und in der Vorschau aktualisiert angezeigt. Klicke auf die Schaltfläche Speichern und Vorschau, sofern dies bei dir nicht der Fall ist.

2. 3. 2 Tab Inhalt

Innerhalb des Tabs Inhalt lässt sich die Hintergrundfarbe und die Formatierung der Überschrift, des Untertitels, des Inhaltes und der Links ändern:

Hinweis: Ausgewählt werden können hier die Antiqua-Schriften Times New Roman und Georgia, die serifenlosen (frz. sans serif) Grotesk-Schriftarten Arial und Helvetica, sowie die dicktengleiche Schrift Courier. Hierbei handelt es sich allerdings um Sekundärsystemschriften, die als websicher gelten, weil sie bereits auf dem Rechner des E-Mail-Empfängers gespeichert sind bzw. vom Betriebssystem bereit gestellt werden. (Auch das Backend von WordPress greift, u.a. aus Gründen der Performance, seit der Version 4.7 auf Systemschriftarten zurück.)

2. 3. 2 Tab Footer

Innerhalb des Tabs Footer befindet sich ein vereinfachter TinyMCE, häufig auch WordPress Editor genannt, mit den Ansichten Text und Visuell. In der Ansicht Visuell des Editors lassen sich die Textabschnitte ohne Kenntnisse in HTML und CSS strukturieren und formatieren:

Unterhalb des Editors kann der in den E-Mails im Footer mitgesendete Zusatz CREATE YOUR OWN WORDPRESS EMAIL TEMPLATE WITH WP HTML MAIL entfernt werden.

2. 3. 2 Tab WooCommerce (benötigt die Plugin-Erweiterung Woocommerce Email Customizer)

Für das Ändern der Ausgabe der WooCommerce-E-Mails oder das Hinzufügen von E-Mail-Anhängen ist die kostenpflichtige Erweiterung des Plugins für WooCommerce notwendig. Mit der Erweiterung kann darauf verzichtet werden, dass E-Mail-Templates zur Anpassung in das (Child-)Theme kopiert werden müssen. Das Layout von bereits ins Theme kopierte und im Code angepassten E-Mail-Templates kann in den Plugin-Einstellungen (EinstellungenE-Mail-Template Tab WooCommerce) ebenfalls angepasst werden.

Nutzungshinweise

Das kostenlose Plugin WP HTML Mail – Email Designer muss installiert und aktiviert sein, um die Premium-Erweiterung WP HTML Mail – WooCommerce Email Customizer21 nutzen zu können. Die Lizenz für eine Website/Domain kann bei MarketPress22 und auf der Website des Entwicklers23 für 39 € [Stand 12.01.2018] erworben werden. Die Lizenz umfasst außer der Premium-Erweiterung auch den Support und die Updates für ein Jahr. Nach dem Upload der ZIP-Datei im Bereich PluginsPlugins hinzufügen und der Aktivierung der Erweiterung erscheint in den Plugin-Einstellungen der Tab WooCommerce. Hier kann gewählt werden, ob jede WooCommerce-E-Mail an den Kunden separat bearbeitet werden soll oder ob ein gemeinsames Template erstellt werden soll:

Einstellung Ein gemeinsames Template erstellen

Wurde die Einstellung getroffen, dass ein gemeinsames Template erstellt werden soll, erscheint innerhalb des Tabs WooCommerce der Abschnitt Allgemeines WooCommerce Template. In diesem Abschnitt lässt sich einstellen, ob und in welcher Größe die Produktbilder in der WooCommerce-E-Mail an den Kunden oder an den Benutzer mit der Rolle Administrator eingebunden werden sollen. Darunter lässt sich der Tabellenrahmen, sowie die Schriftarten, Ausrichtung und Farben der in der Tabelle enthaltenen Texte anpassen:

Wie sich die Einstellungen auswirken, kann unterhalb des Abschnittes Allgemeines WooCommerce Template mit Hilfe der Drop-Down-Liste für jede Bestellung und jede hierbei zu versendende WooCommerce-E-Mail in der Vorschau betrachtet werden:

Die Einstellung Ein gemeinsames Template erstellen ist empfehlenswert, wenn sich im Theme bereits im Code angepasste E-Mail-Templates befinden.

Einstellung Jede Nachricht einzeln bearbeiten

Wurde hingegen die Einstellung Jede Nachricht einzeln bearbeiten gewählt, erscheint der Abschnitt Erstelle deine E-Mails, indem die zu bearbeitenden E-Mail-Templates aus dem Plugin WooCommerce untereinander in einer Übersicht zur einzelnen Bearbeitung eingeblendet werden. Wie im vorherigen Screenshot zu sehen, ist diese Einstellung empfehlenswert, wenn einige Zeichenketten vom freiwilligen Übersetzer-Team noch nicht übersetzt wurden oder je nach E-Mail ein bestimmter vorher angefertigter Anhang (Widerufsbelehrung.pdf, AGB.pdf u.s.w) mitgesendet werden soll:

E-Mail Content Builder

Jede WooCommerce-E-Mail lässt sich mit Klick auf die E-Mail-Bezeichnung oder das Bearbeiten-Symbol (Stift) in einem Bearbeitungsbereich öffnen, in dem sich ein E-Mail Content Builder befindet:

Hinweis: Sollte der E-Mail Content Builder oder die Boxen E-Mail-Betreff und Attach files (zum Hinzufügen der E-Mail-Anhänge) nicht sichtbar sein, aktiviere diese innerhalb des Tabs Ansicht anpassen.

Im E-Mail Content Builder werden die Bereiche, die angepasst werden können, grau markiert. Nach einem Klick auf das Bearbeiten-Symbol erscheint im rechten Bereich ein TinyMCE, der je nach Anpassungsmöglichkeit verschiedene Schaltflächen in der Werkzeugleiste bereithält:

Erklärung: In der Animation wurde eine URL zu einem Bild aus dem Zwischenspeicher in den TinyMCE kopiert. Der Editor fügt daraufhin das Bild automatisch ein. (Klicke, um ein Bild aus der Mediathek in den Editor hinzuzufügen, auf die Schaltfläche Medien hinzufügen im rechtem Bereich des E-Mail Content Builders. Daraufhin öffnet sich das Fenster Medien hinzufügen. Klicke hier auf den Tab Mediathek, wähle das gewünschte Bild und klicke anschließend auf die Schaltfläche In den Beitrag einfügen.) In der Animation wurde im 2. Schritt die Breite der Tabelle vergrößert, die u.a. die Summe und die Zahlungsmethode enthält.

Mit den großen Schaltflächen TEXT, ZWEI SPALTEN, PRODUKT TABELLE und KAUFEMPFEHLUNGEN können der jeweiligen E-Mail weitere Content-Elemente hinzugefügt werden. Der Klick auf die Schaltfläche KAUFEMPFEHLUNGEN fügt beispielsweise bis zu vier Produkte hinzu. Jedes Content-Element lässt sich mit Drag & Drop nach oben oder nach unten verschieben.

Platzhalter

In den TinyMCE lassen sich – je nach gewähltem Bereich – unterschiedliche Platzhalter zum Text einfügen, die einen variablen Inhalt ausgeben können. So gibt beispielsweise der Platzhalter [WEBSITE_NAME] den Titel der Website aus, der im Bereich EinstellungenAllgemein angegeben wurde und der in einer Produktzeile hinzugefügte Platzhalter [TAX] würde die für das jeweilige Produkt angegebene MwSt. ausgeben. Klicke im Flyout-Menü auf den jeweiligen Menüpunkt, um den gewünschten Platzhalter hinzuzufügen oder schreibe diesen direkt in den TinyMCE hinein:

Hinweis: Achte darauf, wenn du die Platzhalter selbst eingibst, dass der Platzhalter auch logisch in das jeweilige Feld passt: Die Ausgabe der Steuer wird z.B. innerhalb des Content-Elementes Produkt Tabelle in der Spalte des Preises ausgewertet, nicht aber in einem Content-Element Text in dem sich beispielsweise die Kundendaten befinden.

Tabelle speichern

Die Tabellen-Einstellungen lassen sich mit Klick auf die Hover-Schaltfläche import/export table settings als Zeichenkette exportieren. Die z.B. in einer Text-Datei gespeicherte Zeichenkette kann anschließend wieder importiert werden:

(Tipp: Die hier zur Veranschaulichung verwendeten Icons, stammen aus dem Checkout Delivery Icon Set24 von Roxana Carabas. Das Icon Set kannst du kostenlos für kommerzielle Zwecke verwenden.)

Links