WooCommerce ist ein leistungsstarkes Tool für die Erstellung von Onlineshops mit WordPress, das alles von der Produktpräsentation über die Kaufabwicklung bis hin zur Steuerverwaltung und darüber hinaus abdeckt.
Ein herausragendes Merkmal von WooCommerce ist seine Fähigkeit, detaillierte Bestellinformationen zu speichern. Es speichert jeden Aspekt einer Bestellung, einschließlich des Betrags, der Währung, der Versanddetails, der Steuern und mehr.
Diese detaillierten Informationen sind sowohl für Shop-Betreiber als auch für Kunden wertvoll. Stell dir vor, du könntest eine Website erstellen, auf der die Nutzer/innen mühelos die Details ihrer Bestellung überprüfen und zusätzliche Informationen anzeigen lassen können.
In diesem Leitfaden erfährst du, wie du eine benutzerdefinierte WooCommerce-Website erstellst, auf der die Bestelldaten anhand der Bestell-ID angezeigt werden.
Warum solltest du eine benutzerdefinierte Seite mit Bestelldetails erstellen?
Die Erstellung einer benutzerdefinierten Bestellseite in WooCommerce kann mehrere Vorteile bieten, die sowohl den Bedürfnissen des Shop-Betreibers als auch denen der Kunden entsprechen. Hier sind ein paar gute Gründe, warum du diesen Weg gehen solltest:
- Verbesserte Benutzerfreundlichkeit – Mit einer benutzerdefinierten Bestelldetailseite kannst du die Bestellinformationen so präsentieren, dass sie den Bedürfnissen deiner Kunden am besten entsprechen. Du kannst das Layout und den Inhalt deiner Seite so anpassen, dass du wichtige Details wie den Versandstatus, Produktspezifikationen und Liefertermine hervorheben kannst, damit deine Kunden schnell finden, wonach sie suchen.
- Zusätzliche Funktionen – Mit einer benutzerdefinierten Bestelldetailseite kannst du Funktionen hinzufügen, die standardmäßig in WooCommerce nicht verfügbar sind. Du kannst zum Beispiel benutzerdefinierte Felder wie Geschenknachrichten, besondere Anweisungen oder persönliche Notizen für jede Bestellung anzeigen.
- Interaktivität – Auf einer benutzerdefinierten Bestellungsdetailseite kannst du interaktive Elemente wie Fortschrittsbalken für die Bestellungsverfolgung, Links zu verwandten Produkten oder einen direkten Zugang zum Kundensupport einfügen und so deinen Nutzern ein noch besseres Erlebnis bieten.
- Flexibilität und Anpassungsfähigkeit – Wenn du eine benutzerdefinierte Bestellungsdetailseite erstellst, kannst du eine geschäftsspezifische Logik implementieren und dich an veränderte Anforderungen anpassen. Du kannst verschiedene Informationen auf der Grundlage von Kriterien anzeigen, die nur in deinem Shop gelten, z. B. den Standort des Kunden oder die Art der bestellten Produkte.
Wie du Bestelldaten aus dem $order-Objekt abrufst
In WooCommerce ist das Objekt $order ein zentrales Element, das alle Informationen über eine bestimmte Bestellung enthält. Mithilfe dieses Objekts kannst du verschiedene Details zu einer Bestellung abrufen, z. B. die Bestell-ID, das Bestelldatum, Rechnungs- und Versandinformationen und die gekauften Produkte.
Gehen wir im Detail durch, wie du auf diese verschiedenen Daten des $order Objekts zugreifen und sie nutzen kannst.
1. Abrufen des Bestellobjekts
Zuerst musst du das Bestellobjekt mit der Funktion wc_get_order abrufen. Diese Funktion nimmt eine Bestell-ID entgegen und gibt das entsprechende Bestellobjekt zurück.
$order_id = 123; // Example order ID
$order = wc_get_order( $order_id );2. Grundlegende Informationen zur Bestellung
Sobald du das $order Objekt hast, kannst du grundlegende Informationen über die Bestellung abrufen. Hier sind einige Beispiele:
- Auftrags-ID – Der eindeutige Identifikator für den Auftrag.
$order_id = $order->get_id(); echo 'Order ID: ' . $order_id; - Bestelldatum – Das Datum, an dem die Bestellung erstellt wurde.
$order_date = $order->get_date_created(); echo 'Order date: ' . wc_format_datetime( $order_date ); - Bestellsumme – Der Gesamtbetrag für die Bestellung.
$order_total = $order->get_formatted_order_total(); echo 'Order total: ' . $order_total;
3. Rechnungsinformationen
Zu den Rechnungsinformationen gehören die Angaben, die der Kunde während des Bezahlvorgangs macht. Du kannst diese Daten mit den folgenden Methoden abrufen:
- Rechnungsadresse:
$billing_address = $order->get_formatted_billing_address(); echo 'Billing address: ' . $billing_address; - Rechnungs-E-Mail:
$billing_email = $order->get_billing_email(); echo 'Billing email: ' . $billing_email; - Rechnungstelefon:
$billing_phone = $order->get_billing_phone(); echo 'Billing phone: ' . $billing_phone;
4. Versandinformationen
Die Versandinformationen enthalten die Details, wohin die Bestellung versandt wird. Ähnlich wie bei den Rechnungsinformationen kannst du auf diese Details über das Objekt $order zugreifen:
- Lieferadresse:
$shipping_address = $order->get_formatted_shipping_address(); echo 'Shipping address: ' . $shipping_address;
5. Artikel der Bestellung
Du kannst die in einer Bestellung enthaltenen Artikel abrufen, was besonders nützlich ist, wenn du gekaufte Produkte anzeigen möchtest. Hier erfährst du, wie du die Bestellartikel abrufst:
$items = $order->get_items();
foreach ( $items as $item_id => $item ) {
$product_name = $item->get_name();
$product_quantity = $item->get_quantity();
$product_total = $item->get_total();
echo 'Product name: ' . $product_name . '<br>';
echo 'Quantity: ' . $product_quantity . '<br>';
echo 'Total: ' . wc_price( $product_total ) . '<br>';
}6. Zahlungs- und Versandmethoden
Du kannst auch Informationen über die für die Bestellung verwendeten Zahlungs- und Versandmethoden abrufen:
- Zahlungsmethode:
$payment_method = $order->get_payment_method_title(); echo 'Payment method: ' . $payment_method; - Versandart:
$shipping_methods = $order->get_shipping_methods(); foreach ( $shipping_methods as $shipping_method ) { echo 'Shipping method: ' . $shipping_method->get_name(); }
7. Bestellstatus
Der Status der Bestellung kann für verschiedene Funktionen hilfreich sein, z.B. um den Fortschritt der Bestellung zu verfolgen:
$order_status = wc_get_order_status_name( $order->get_status() );
echo 'Order status: ' . $order_status;Erstellen einer Website zur Anzeige von Bestelldetails nach Bestell-ID
Um deinen Kunden ein nahtloses Erlebnis zu bieten, ist es von Vorteil, eine benutzerdefinierte Seite zu erstellen, auf der sie ihre Bestelldetails durch Eingabe ihrer Bestell-ID einsehen können.
Wir führen dich durch die Erstellung einer Website, einschließlich der Einrichtung der Vorlage und der Anzeige der Bestellinformationen.
Schritt 1: Eine benutzerdefinierte Seitenvorlage erstellen
Als Erstes erstellst du eine benutzerdefinierte Seitenvorlage in deinem WordPress-Theme. Diese Vorlage wird für die Anzeige der Bestelldaten verwendet.
Navigiere dazu zum Quellcode deines Projekts. Wenn du dein Projekt mit DevKinsta erstellt hast, ist dieser leicht zugänglich. Du kannst auch einen FTP-Client verwenden, indem du die Einstellungen auf deiner Website-Infoseite verwendest (WordPress Websites > sitename > Info).
Erstelle in deinem Child-Theme-Verzeichnis eine neue Datei namens page-order-details.php. Füge den folgenden Code in diese Datei ein:
<?php
/**
* Template Name: Order Details
*/
get_header();
?>
<div id="primary" class="content-area">
<main id="main" class="site-main">
<?php
if ( isset( $_GET['order_id'] ) ) {
$order_id = intval( $_GET['order_id'] );
display_order_details( $order_id );
} else {
echo '<p>No order ID provided.</p>';
}
?>
</main>
</div>
<?php
get_footer();
// Function to display order details
function display_order_details( $order_id ) {
$order = wc_get_order( $order_id );
if ( ! $order ) {
echo '<p>Invalid order ID.</p>';
return;
}
echo '<h2>Order Details</h2>';
echo '<ul>';
echo '<li>Order ID: ' . $order->get_id() . '</li>';
echo '<li>Order Date: ' . wc_format_datetime( $order->get_date_created() ) . '</li>';
echo '<li>Order Total: ' . $order->get_formatted_order_total() . '</li>';
echo '<li>Billing Address: ' . $order->get_formatted_billing_address() . '</li>';
echo '<li>Shipping Address: ' . $order->get_formatted_shipping_address() . '</li>';
echo '<li>Billing Email: ' . $order->get_billing_email() . '</li>';
echo '<li>Billing Phone: ' . $order->get_billing_phone() . '</li>';
echo '<li>Payment Method: ' . $order->get_payment_method_title() . '</li>';
echo '<li>Order Status: ' . wc_get_order_status_name( $order->get_status() ) . '</li>';
echo '</ul>';
echo '<h3>Order Items</h3>';
echo '<ul>';
$items = $order->get_items();
foreach ( $items as $item_id => $item ) {
echo '<li>';
echo 'Product Name: ' . $item->get_name() . '<br>';
echo 'Quantity: ' . $item->get_quantity() . '<br>';
echo 'Total: ' . wc_price( $item->get_total() ) . '<br>';
echo '</li>';
}
echo '</ul>';
}Schauen wir uns diesen Code an, damit du ihn verstehst.
Als Erstes fallen dir die Funktionen get_header() und get_footer() auf, die die Standard-Kopf- und Fußzeile von WordPress für die Seite enthalten und dafür sorgen, dass das Gesamtdesign und -layout der Seite erhalten bleibt.
Außerdem haben wir einige grundlegende HTML-Auszeichnungen, die für die Darstellung von Text im Web wichtig sind. Der nächste wichtige Code ist die Bedingung, die prüft, ob ein order_id als URL-Parameter übergeben wird.
if ( isset( $_GET['order_id'] ) ) {
$order_id = intval( $_GET['order_id'] );
display_order_details( $order_id );
} else {
echo '<p>No order ID provided.</p>';
}Wenn ein order_id vorhanden ist, wird die Eingabe mit intval() bereinigt und die Funktion display_order_details aufgerufen. Wenn kein order_id übergeben wird, wird eine entsprechende Meldung ausgegeben.
Die Funktion display_order_details ist die Funktion, die unter get_footer() deklariert ist. Diese Funktion nimmt die Auftrags-ID als Eingabe und ruft das entsprechende Auftragsobjekt mit wc_get_order() ab.
Wenn die Bestellungsnummer ungültig ist, gibt sie eine Fehlermeldung aus. Andernfalls werden verschiedene Bestelldetails wie Bestell-ID, Datum, Gesamtbetrag, Rechnungs- und Lieferadresse, E-Mail, Telefon, Zahlungsmethode und Bestellstatus abgerufen und in einer ungeordneten Liste angezeigt.
Außerdem werden in einer Schleife die Bestellpositionen durchlaufen und der Produktname, die Menge und der Gesamtpreis für jede Position in einer weiteren ungeordneten Liste angezeigt.
Schritt 2: Füge die Vorlage zu deinem Theme hinzu und erstelle eine neue Website in WordPress
Speichere die Datei page-order-details.php in deinem Child-Theme-Verzeichnis. Dadurch wird die Vorlage zur Auswahl verfügbar, wenn du eine neue Seite in WordPress erstellst.
Gehe dann in deinem WordPress-Admin-Dashboard auf Websites > Neu hinzufügen. Gib der Seite einen Namen und wähle dann im Abschnitt Seitenattribute auf der rechten Seite die Vorlage Bestelldetails aus dem Dropdown-Menü Vorlage.
Wenn du den Abschnitt Seitenattribute nicht siehst, kannst du zurück zu Websites navigieren, wo du eine Liste aller Websites mit einigen Optionen siehst, wenn du den Mauszeiger über jede Seite bewegst. Wähle Schnellbearbeitung und du siehst den Abschnitt Seitenattribute.
Veröffentliche die Seite und du kannst jetzt die benutzerdefinierte Bestellungsdetailseite testen.
Um sie zu testen, rufe deinen Browser auf und hänge ?order_id=ORDER_ID an die URL an, wobei du ORDER_ID durch eine gültige WooCommerce-Bestellnummer ersetzt. Zum Beispiel, https://yourwebsite.com/order-details/?order_id=70
Dies sollte die Bestelldetails für die angegebene Bestell-ID anzeigen.
Du kannst die Vorlage dann nach Belieben stylen.
Erstellen einer Website mit Bestelldetails mit dem WooCommerce Shortcode für die Bestellverfolgung
Eine weitere Option, die du vielleicht noch nicht kennst, ist der WooCommerce-Shortcode für die Bestellverfolgung, mit dem du durch Eingabe der Bestellnummer und der E-Mail-Adresse nach den Details deiner Bestellung suchen kannst.
Diese Seite zeigt die Bestellnummer, das Datum, den Status, die Artikel, die Versand- und die Rechnungsadresse an. Dies kann nützlich sein, wenn du keine detaillierteren Informationen anzeigen willst.
Die Erstellung einer Website zur Auftragsverfolgung mit dem WooCommerce Shortcode zur Auftragsverfolgung ist eine unkomplizierte Möglichkeit, die Kundenerfahrung zu verbessern, ohne dass du dich in eigene Programmierung vertiefen musst.
Befolge dazu die folgenden Schritte:
- Logge dich in dein WordPress-Dashboard ein.
- Erstelle dann eine neue Seite, indem du zu Websites > Neu hinzufügen navigierst.
- Gib der Seite einen Titel und füge im Seiteneditor den folgenden Shortcode ein:
[woocommerce_order_tracking] - Klicke dann auf die Schaltfläche Veröffentlichen, um die Website zu aktivieren.
So einfach ist das. Aber das gibt dir vielleicht nicht die Flexibilität, die du dir wünschst.
Zusammenfassung
Die Erstellung einer Bestelldetailseite in WooCommerce verbessert das Kundenerlebnis, indem sie einen einfachen Zugang zu den Bestellinformationen bietet und die Transparenz und Kundenzufriedenheit erhöht.
Wenn dein WordPress-Shop zu langsam ist, vor allem bei großen Shops mit vielen Produkten, solltest du wissen, dass ein großer Teil der Leistung deiner Website von der Qualität deines Hostings abhängt.
Mit Kinsta als Hosting-Anbieter für deinen WooCommerce-Shop musst du dir darüber keine Sorgen machen.
Joel ist Frontend-Entwickler und arbeitet bei Kinsta als Technical Editor. Er ist ein leidenschaftlicher Lehrer mit einer Vorliebe für Open Source und hat über 200 technische Artikel geschrieben, die sich hauptsächlich um JavaScript und seine Frameworks drehen.
Schreibe einen Kommentar