So passen Sie Bestell-E-Mails in WooCommerce an

Veröffentlicht: 2019-04-02
Woocommerce-Bestell-E-Mails anpassen
Folgen Sie @Cloudways

Angenommen, Sie haben Ihren Shop nach mehreren Tagen harter Arbeit erfolgreich auf einer spezialisierten WooCommerce-Webhosting-Plattform eingerichtet

Die Produktseite ist jetzt mit einer einwandfrei funktionierenden Datenbank verbunden und der Checkout-Prozess ist völlig problemlos. Jedes einzelne Element, einschließlich Produktseiten, Galerie und Feedback, spiegelt die Farben und den Stil Ihrer Marke wider.

Dann beschließen Sie, Ihren Produktbestellprozess zu testen und stellen plötzlich fest, dass die Bestell-E-Mail aus Sicht der Benutzer eher langweilig oder zu allgemein ist. Jetzt müssen Sie sich fragen, was all Ihre harte Arbeit beim Anpassen Ihres WooCommerce-Shops umsonst war.

WooCommerce enthält mehrere Bestellstatus, die möglicherweise nicht mit den Abläufen Ihres Shops übereinstimmen, aber Sie können Bestellungen dennoch mit einem benutzerdefinierten Status markieren, z. B. Zahlung ausstehend, Verarbeitung, Zurückgestellt, Fehlgeschlagen usw.

Viele Eigentümer und Administratoren von WooCommerce-Shops haben diese allgemeine Frage: Wie kann ich die standardmäßigen WooCommerce-Anfragenachrichten ändern, um das Erscheinungsbild meiner Marke zu erhalten, und wie kann ich zusätzliche Inhalte hinzufügen, um Kunden bei ihrer Bestellung zu helfen, und wie kann ich einen benutzerdefinierten WooCommerce-Bestellstatus erstellen? .

Während das Erstellen beeindruckender HTML-E-Mails wirklich eine Leistung für sich ist, bietet WooCommerce mehrere Optionen, sodass selbst Amateure einige erstaunliche E-Mails erstellen können.

Kunden-E-Mails

„Vanilla“ bietet WooCommerce-E-Mail-Benachrichtigungen, die an Kunden als Reaktion auf ihre Interaktionen mit dem Geschäft gesendet werden. Im Folgenden finden Sie die wichtigsten E-Mails für die Kunden Ihres WooCommerce-Shops.

  • Neue Bestellung: E-Mails für neue Bestellungen werden gesendet, wenn eine neue Bestellung eingeht.
  • Stornierte Bestellung: E-Mails mit stornierten Bestellungen werden gesendet, wenn Bestellungen als storniert markiert wurden.
  • Fehlgeschlagene Bestellung: E-Mails zu fehlgeschlagenen Bestellungen werden gesendet, wenn eine in Bearbeitung befindliche oder angehaltene Bestellung als fehlgeschlagen gekennzeichnet ist.
  • Bestellung zurückgestellt: Dies ist eine Bestellbenachrichtigung, die an Kunden gesendet wird. Es enthält Bestelldetails, nachdem eine Bestellung in die Warteschleife gestellt wurde.
  • Bestellung bearbeiten: Dies ist eine Bestellbenachrichtigung, die an Kunden gesendet wird. Es enthält Bestelldetails nach der Zahlung.
  • Abgeschlossene Bestellung: E-Mails mit abgeschlossenen Bestellungen werden an Kunden gesendet, wenn ihre Bestellungen als abgeschlossen markiert sind. Diese E-Mails zeigen normalerweise an, dass die Bestellungen versandt wurden.
  • Erstattete Bestellung: E-Mails mit erstatteten Bestellungen werden an Kunden gesendet, wenn ihre Bestellungen als erstattet gekennzeichnet sind.
  • Kundenrechnung: Kundenrechnungs-E-Mails enthalten Bestellinformationen und Zahlungslinks.
  • Kundennotiz: E-Mails mit Kundennotizen werden gesendet, wenn Sie der Bestellung eine Notiz hinzufügen.
  • Passwort zurücksetzen: Kunden-E-Mails zum Zurücksetzen des Passworts werden gesendet, wenn Kunden ihre Passwörter zurücksetzen.
  • Neues Konto: Kunden-E-Mails für „Neues Konto“ werden an den Kunden gesendet, wenn sich ein Kunde über die Checkout- oder Kontoregistrierungsseite anmeldet.

Zusätzlich zu diesen Standard-E-Mail-Typen können Sie auch benutzerdefinierte E-Mails hinzufügen.

Verwaltetes WooCommerce-Hosting ab 10 $/Monat.

Erstellen, verwalten und passen Sie Ihren WooCommerce-Shop in völliger Freiheit an.

3 Tage kostenlos testen

WooCommerce Globale E-Mail-Optionen

Die Standard-WooCommerce-E-Mail sieht so aus:

Der WooCommerce-Administrator ermöglicht einige grundlegende Anpassungen dieses Standard-E-Mail-Layouts. Auf diese Optionen kann zugegriffen werden, nachdem Sie sich beim WordPress-Admin angemeldet und zu WooCommerce > Einstellungen > E-Mails > E-Mail-Absenderoptionen gegangen sind. Zu diesen Optionen gehören:

  • Legen Sie den Absendernamen/Adresse fest (sichtbar für den Kunden)
  • WooCommerce-E-Mail-Header-Bildgröße
  • Ändern Sie den Fußzeilentext der E-Mail
  • Wählen Sie verschiedene Grund-, Hintergrund- und Haupttextfarben aus

WooCommerce-E-Mail-Option

WooCommerce-E-Mail-Option

Denken Sie daran, dass diese Auswahlmöglichkeiten für alle E-Mails gelten. In nur wenigen Minuten können Sie eine hochgradig angepasste E-Mail erstellen, indem Sie die Bildgröße des WooCommerce-E-Mail-Headers, den benutzerdefinierten Fußzeilentext und eine andere Grundfarbe ändern.

E-Mail-Vorlage

Sie haben vielleicht bemerkt, dass WooCommerce erkannt hat, dass eine helle Grundfarbe verwendet wurde. Zum Ausgleich verwendete es einen passenden Farbton für den Titel. Leider wurde diese Logik nicht auf den Inhalt der Fußzeile angewendet. Dieses Missgeschick kann leicht manuell behoben werden!

WooCommerce-E-Mail-spezifische Optionen

Jeder E-Mail-Typ hat seine eigenen Anpassungsoptionen. Auf diese Optionen kann über WooCommerce > Einstellungen > E-Mails > Verarbeitungsauftrag zugegriffen werden (Dieser Beispielpfad konzentriert sich auf die Verarbeitung von Auftrags-E-Mails. Sie können mehrere Aspekte der E-Mail ändern, darunter:

  • Aktivieren oder deaktivieren Sie, ob die E-Mail überhaupt gesendet wird
  • Der Betreff der E-Mail
  • E-Mail-Überschrift (Standard ist „Danke für Ihre Bestellung“)
  • Ob die E-Mail als HTML oder einfacher Text gesendet wird (Die Standardoption ist HTML)

Bearbeitungsauftrag

Hier habe ich die benutzerdefinierte E-Mail-Überschrift als " Danke für Ihre Bestellung" festgelegt.

Bearbeitungsauftrag

Überschreiben der benutzerdefinierten E-Mail-WooCommerce-Vorlage

Ein effektiverer und effizienterer Ansatz besteht darin, die Standard-E-Mail-Layouts zu ändern. WooCommerce bietet ein hilfreiches Vorlagensystem, mit dem Sie Teile Ihres Shops oder Ihrer E-Mails anpassen können, indem Sie die Formatdatei(en) in das Design replizieren. Jeder E-Mail-Typ hat eine Vorlagendatei für seinen Inhalt (z. B. woocommerce/templates/emails/customer-process-order.php). Darüber hinaus gibt es gemeinsame Vorlagen, auf die alle E-Mail-Typen zugreifen und die sie verwenden können. Diese finden Sie unter woocommerce/templates/emails/email-styles.php . In vielen Fällen ist dies die Vorlage, die Entwickler überschreiben, um gemeinsame Aspekte der E-Mails zu ändern. Der Prozess zur Behandlung des zuvor erwähnten Fußzeilenproblems ist:

  1. Als erstes stellst du sicher, dass in der WordPress-Installation folgendes Verzeichnis existiert: wp-content/themes/ Kopieren Sie als Nächstes die unter wp-content/plugins/woocommerce/templates/emails/email-styles.php gefundene Datei in das Design des Shops unter: Bearbeiten Sie schließlich your-theme /woocommerce/emails/email-styles.php , um die Textfarbe der Fußzeile in Schwarz zu ändern (der Kürze halber wird nur der relevante Teil des Vorlagendateicodes angezeigt):
 $kredit = "
Farbe: #66bae3;
Schriftgröße: 15px;
Textausrichtung: Mitte;
";

Dies erzeugt eine viel besser lesbare Fußzeile:

Bild05

Bedingte Anpassung mit Aktionen/Filtern

Der letzte und effektivste Ansatz zum Anpassen von E-Mails ist die Arbeit mit benutzerdefiniertem WooCommerce-Code. Dies erfordert natürlich ein hohes Maß an PHP-Expertise. Die gute Nachricht ist, dass der Prozess unkompliziert ist, da die ursprünglichen WooCommerce-Layouts immer noch verwendet werden. Der Prozess beinhaltet das Ändern von Teilen des Inhalts.

Filterfunktionen

  • has_filter()
  • add_filter()
  • apply_filters()
  • apply_filters_ref_array()
  • aktueller_filter()
  • remove_filter()
  • remove_all_filters()
  • doing_filter()

Aktionen Funktionen

  • hat_aktion()
  • add_action()
  • do_action()
  • do_action_ref_array()
  • tat_aktion()
  • remove_action()
  • remove_all_actions()
  • doing_action()

Aktivierung/Deaktivierung/Deinstallation von Funktionen

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

Für dieses Beispiel füge ich der E-Mail einige hilfreiche Zahlungsanweisungen hinzu, basierend auf der verwendeten Checkout-Zahlungsart.

Fügen Sie zunächst Folgendes zur functions.php des Themes hinzu:

 add_action( 'woocommerce_before_email_order', 'add_order_instruction_email', 10, 2 );
 
Funktion add_order_instruction_email( $order, $sent_to_admin ) {
  
  if ( ! $sent_to_admin ) {
 
    if ( 'cod' == $order->payment_method ) {
      // Nachnahmemethode
      echo '<p><strong>Anweisungen:</strong> Die vollständige Zahlung ist sofort bei Lieferung fällig: <em>nur Barzahlung, keine Ausnahmen</em>.</p>';
    } anders {
      // andere Methoden (z. B. Kreditkarte)
      echo '<p><strong>Anleitung:</strong> Bitte suchen Sie auf Ihrer nächsten Kreditkartenabrechnung nach "Madrigal Electromotive GmbH".</p>';
    }
  }
}

Hat sich der Kunde beim Check-out für „Nachnahme“ entschieden, erhält der Kunde die E-Mail mit hilfreichen Bestellhinweisen:

WooCommerce Checkout-Einstellung

Plugin-/Payment-Gateway-Optionen

Mehrere Plugins und Zahlungsgateways ermöglichen es Ihnen tatsächlich, Teile der Bestell-E-Mails anzupassen. Mit der integrierten Zahlungsmethode Bank/Überweisung können Sie beispielsweise Anweisungen konfigurieren und Informationen zur Überweisung eingeben. Dies kann einfach über WooCommerce > Einstellungen > Kasse > BACS erfolgen .

WooCommerce Checkout-Einstellung

Obwohl es ungewöhnlich ist, ist es gut zu wissen, dass diese Optionen verfügbar sind. Diese Informationen können Ihnen auch dabei helfen, sich für ein bestimmtes Plugin für den Shop zu entscheiden.

Add_actions-Hook für WooCommerce-E-Mails

Bei der Arbeit mit WooCommerce-E-Mails ist der Hook add_actions oft praktisch. Wenn Sie mit diesem Hook arbeiten, müssen Sie eine globale Variable namens email verwenden, die den Betreff der E-Mail enthält. hier ist der Codeschnipsel:

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

Der obige Hook kann in der functions.php (in Ihrem Theme-Ordner) oder am Anfang der WooCommerce-E-Mail-Vorlage platziert werden. Die globale Variable $email ruft das Haupt-E-Mail-Objekt von WooCommerce auf, während $order eine Instanz des globalen WooCommerce-Bestellobjekts enthält

 global $email; 
$order = $email->object;

Benutzerdefinierte WooCommerce-E-Mail pro Produkt

Der folgende Code sendet eine benutzerdefinierte Bestell-E-Mail-Vorlage für ein anderes Produkt

Beispielsweise möchten Sie für die Produkt-ID 87 den Header-Titel WooCommerce-E-Mail-Benachrichtigung anzeigen ODER wie Sie WooCommerce-E-Mails testen:

 Funktion woocommerce_custom_email_per_product_depending_on_product_id( $email_heading, $order ) {
    globaler $woocommerce;
    $artikel = $order->get_items();
    foreach ( $items als $item ) {
        $product_id = $item['product_id'];
        if ( $product_id == 87 ) {
            $email_heading = 'WooCommerce-E-Mail-Benachrichtigung ODER wie man WooCommerce-E-Mails testet';
        }
        $email_heading zurückgeben;
    }
}
add_filter( 'woocommerce_email_heading_customer_processing_order', 'woocommerce_custom_email_per_product_depending_on_product_id', 10, 5 );

Hinweis: Nachdem Sie nun den gesamten Prozess zum Anpassen von WooCommerce-Bestell-E-Mails kennen, haben Sie nun die Wahl, entweder die Funktion beizubehalten oder ein separates WooCommerce-E-Mail-Plugin für die WooCommerce-E-Mail-Bestätigung und -Benachrichtigung zu erstellen.

Fazit

Das Einrichten eines WooCommerce-Shops ist ziemlich einfach, aber das Anpassen der Standard-E-Mail-Vorlagen wird manchmal schwierig. In diesem Tutorial habe ich besprochen, wie Sie vollständig angepasste, von WooCommerce gehostete Shop-E-Mails senden können, um alle Aspekte der Aktivitäten des Shops zu berücksichtigen. Ich habe auch hervorgehoben, wie die Standard-E-Mail-Vorlagen geändert werden können, um geschäftsspezifische und auftragsspezifische Informationen in E-Mails einzufügen, um das Benutzererlebnis zu verbessern.

Hinterlassen Sie unten einen Kommentar, wenn Sie etwas zur Diskussion beitragen oder eine Frage stellen möchten!