Wenn du einen WooCommerce Shop betreibst, ist eine gute User Experience oft ausschlaggebend für Erfolg oder Misserfolg.
Dazu zählt auch ein WooCommerce Dashboard, das ganz an deine Brand und nach deinen Vorstellungen angepasst ist.
Wenn du wissen möchtest, wie du das eher starre und langweilige Standard Dashboard ganz ohne zusätzliche Plugins anpassen kannst, bist du hier genau richtig.
Bereit? Legen wir los!
In diesem Video benutze ich mal nicht Thrive Architect*, sondern den Breakdance-Builder*. Es funktioniert aber in allen PageBuildern (also auch Elementor, Bricks, etc.) auf die gleiche gezeigte Art und Weise.
1. Grundlage für dein WooCommerce Dashboard schaffen
Unser Custom-WooCommerce-Dashboard auf unserer Mein-Konto Seite soll folgendermaßen aussehen:
Um das zu erreichen starten wir wie folgt:
- Lege eine neue Section an und füge ein Columns-Element ein:
Damit hast du die Grundstruktur für dein Dashboard geschaffen - Definiere die Breite:
Ungeachtet der Gesamtbreite des Dashboards sollte dein linker Menübereich ca. 30% und der rechte Content-Bereich 70% einnehmen - Achte auf horizontale Ausrichtung auf Desktop:
Auf größeren Bildschirmen sollten deine Spalten definitiv horizontal (also nebeneinander) angezeigt werden. Je nach Builder und Breakpoints kannst du das auch auf großen Tablets so handhaben - Hintergrundfarbe:
Lege für den Menübereich eine Hintergrundfarbe fest, damit dieser sich optisch vom rechten Bereich abhebt - Gesamthöhe:
Damit das Dashboard eine schöne Mindesthöhe hat, lege 80VH (Viewport Height) als Mindesthöhe des Elements an
2. Menübereich anlegen
- Icon-List als Grundlage:
Damit du möglichst wenig Arbeit hast, nimm eine Icon-List als Basis für dein Menü - Style Icons und Text:
Benenne die einzelnen Menüpunkte deines Dashboards (z.B. Dashboard, Bestellungen, Downloads, etc.) und passe die einzelnen Icons an - Hover State (falls notwendig):
Wenn du die UX im WooCommerce Dasboard verbessern möchtest, lege einen Hover State für die einzelnen Menüpunkte fest, damit der User immer gleich weiß, welcher Menüpunkt ausgewählt wird
3. Menübereich erweitern
- Icon-List für eigene Links (optional):
Kopiere dir die gestylte Icon List aus Punkt 2 und füge diese unter den Mein-Konto-Menüpunkten hinzu. Hier kannst du später bei Bedarf individuelle Links z.B. zu deiner Community, deinem Lernbereich, etc. hinterlegen. - Logout-Link:
Es wird zwar im WooCommerce-Mein-Konto-Element ohnehin noch ein Logout angezeigt, ich würde hier an dieser Stelle trotzdem einen Link hinzufügen. Hinterlege hier einfach nen dynamischen Link aus WordPress. - Kundendaten (optional):
Füge dir ein weiteres Columns Element hinzu und packe in die linke Spalte ein dynamisches Bild (Benutzer-Bild) und in die rechte Spalte 2 dynamische Textelemente (Benutzer-Name und Benutzer-Email), damit sich die Mein-Konto Seite für den Benutzer „heimisch“ anfühlt
4. WooCommerce Mein-Konto-Element einfügen
Nachdem wir nun den linken Menübereich erstellt haben, müssen wir nun dafür sorgen, daß in der rechten Spalte nun der Mein-Konto-Bereich des WooCommerce-Dashboards angezeigt wird.
Benutzt du einen PageBuilder wie Breakdance oder Thrive Theme Builder, dann kannst du hier einfach das „Mein-Konto“-Element in der rechten Spalte ablegen.
Sollte das dein PageBuilder nicht können, dann lege in die rechte Spalte ein Shortcode-Element und hinterlege dort den Shortcode [woocommerce_my_account].
Das Problem, welches hier nun auftritt ist, daß nun 2 Menüs vorhanden sind: jenes das du gebaut hast und das ursprüngliche WooCommerce-Dashboard-Menü.
Um das Menü in der rechten Spalte auszublenden, brauchst du lediglich folgendes CSS in deinem PageBuilder oder im Customizer hinterlegen:
.woocommerce-MyAccount-navigation { display:none;}
5. Links hinterlegen
Bisher haben wir lediglich den Text des Menüs erstellt, jedoch noch keine passenden Links hinterlegt. Das machen wir jetzt, nachdem wir alles fertig gestylt haben.
- WooCommerce Endpoints:
Die passenden Links für dein WooCommerce-Dashboard legst du genau so an, wie du jeden anderen internen Link anlegen würdest. Entscheidend für dich ist nur, was eben die URL ist. und falls du keine Änderungen daran vorgenommen hast, findest du hier eine Liste aller WooCommerce-Endpoints. Du musst nur darauf achten, daß vor diesen Endpoints standardmäßig „/mein-konto/“ stehen muß (falls du auf Englisch eingestellt hast „/my-account/“ - Individuelle Links (optional):
Falls du individuelle Menüpunkte eingefügt hast, hinterlege jetzt dazu die passenden URLs, so wie du sie standardmäßig in deinem Pagebuilder anlegst.
6. Finaler Test
Natürlich solltest du jetzt zum Abschluß nochmal alles durchtesten, damit auch alle deine hinterlegten Links funktionieren.
Wenn alles klappt, bist du an dieser Stelle fertig, kannst aber natürlich jederzeit in Zukunft hierher zurückkehren und beliebige Änderungen an deinem Design und der Funktionalität vornehmen!
7. Optional Template erstellen
Möchtest du auch bei anderen Pages auf deiner Website den Eindruck erwecken, daß User sich immer noch auf der Mein-Konto-Seite befinden, dann kopiere einfach dein Template und füge es auf weiteren Pages ein.
Statt des Mein-Account-Elements bzw. des [woocommerce_my_account]-Shortcodes hinterlegst du in der rechten Spalte einfach anderen Content und die Illusion ist perfekt.
