Die Bestellliste von WooCommerce hat ein Schnellvorschau-Fenster: Ein Klick auf das Augensymbol in einer Zeile öffnet einen Dialog mit Rechnungs- und Lieferdaten sowie den Bestellpositionen. Das ist wirklich nützlich, aber standardmäßig nur lesbar: Um einen Status zu ändern oder die Bestellnotizen einzusehen, muss man das Fenster verlassen und den vollständigen Bearbeitungsbildschirm öffnen.
Den Kern auf die richtige Art erweitern
Statt die Vorlage des WooCommerce-Fensters zu überschreiben – was beim nächsten WooCommerce-Update bricht –, haben wir die zwei offiziellen Erweiterungspunkte genutzt, die es bereits gibt: den Filter woocommerce_admin_order_preview_get_order_details, mit dem sich zusätzliche Daten in das Fenster einspeisen lassen, und woocommerce_admin_order_preview_end, eine Action am Ende der Underscore.js-Vorlage des Fensters, mit der sich Markup mit Zugriff auf dieselben Daten anhängen lässt.
Mit diesen beiden Hooks haben wir ergänzt:
- Ein Status-Dropdown mit Speichern-Button, verbunden mit einem kleinen AJAX-Handler, der die Bestellung aktualisiert und – entscheidend – auch die zugrunde liegende Listenzeile, nicht nur das Fenster, damit die Liste nach dem Schließen nie einen veralteten Status zeigt.
- Eine scrollbare Liste der internen Bestellnotizen, abgerufen über
wc_get_order_notes()und wie im vollständigen Bestellbildschirm mit der neuesten zuerst angezeigt. - Den in einem eigenen Beitrag beschriebenen WhatsApp-Button zur Übergabe an den Kurier, der im selben Fenster sitzt.
Damit es nativ aussieht
Das Schwierigste war nicht die Funktion, sondern den visuellen Rhythmus von WooCommerce so genau zu treffen, dass die Ergänzungen nicht angeflanscht wirken. Wir haben Abstände, Überschriftenstil und Innenabstände übernommen, die WooCommerce bereits für das Panel „Billing details“ nutzt, statt für dieses eine Fenster eine neue Bildsprache zu erfinden. Das Ergebnis wirkt wie eine Erweiterung des Fensters, nicht wie ein darunter getackertes Add-on.
Die wichtigsten Erkenntnisse
- Die offiziellen Hook-Punkte für dieses Fenster gibt es genau dafür, dass man die Vorlage nicht überschreiben muss – wer sie nutzt, bleibt updatesicher.
- Eine AJAX-Aktualisierung im Adminbereich muss jede Stelle berühren, an der die geänderten Daten angezeigt werden, nicht nur das genutzte Bedienelement – sonst veraltet die Oberfläche stillschweigend.
- Visuelle Konsistenz mit den Komponenten der Plattform ist eine echte Designentscheidung, kein Extra – sie sorgt dafür, dass eine individuelle Ergänzung vertrauenswürdig wirkt.
Weiterlesen: steuern, welche Spalten mobil sichtbar sind, eine Produktvariante nach der Bestellung ändern.
Stoßen Sie in Ihrem eigenen WooCommerce- oder WordPress-Adminbereich an eine ähnliche Grenze? Sprechen wir darüber – ArtinTech Solution baut genau diese Art von individuellen Shop-Tools.