So erstellen Sie eine WooCommerce-Cart-Flow-Timeline in Divi

WooCommerce ist eines der beliebtesten E-Commerce-Plugins für WordPress. Um dies zu unterstützen, hat Divi eine Reihe neuer Woo-zentrischer Module veröffentlicht, die Ihnen mehr Freiheit beim Erstellen Ihrer Standard-WooCommerce-Seiten geben. Wir werden uns im heutigen Beitrag mit der Erstellung einer WooCommerce-Warenkorb-Timeline für Divi befassen. Für diesen Zeitraum entwerfen wir eine visuelle Darstellung der User Journey. Der Weg des Nutzers vom Geschäft bis zur Kasse soll sichtbar dargestellt werden.

Entwurfsvorschau

Bevor wir direkt mit dem Design beginnen, schauen wir uns an, wie unser Design aussehen wird, wenn wir fertig sind. Hier ist die Vorschau der Warenkorbseite.

So wird auch unsere Checkout-Seite aussehen.

Um die Vorlage herunterzuladen, klicken Sie hier und erhalten Sie die Datei. Dann entpacken Sie es.

Erstellen Sie erstaunliche Websites

Mit dem besten kostenlosen Seite Builder Elementor

Jetzt anfangen

Installieren Sie die Vorlage

Gehen Sie zum Divi Theme Builder im Backend der WordPress-Website, um die Vorlage hochzuladen.

Dann erscheint ein Symbol mit zwei Pfeilen in der oberen rechten Ecke. Schalten Sie das Symbol um.

Klicken Sie auf „Divi Theme Builder-Vorlagen importieren“, nachdem Sie die JSON-Datei, die Sie von diesem Beitrag heruntergeladen haben, auf die Registerkarte „Import“ hochgeladen haben.

Wenn Sie die Datei hochgeladen haben, werden Sie einen neuen Warenkorb, eine Checkout- und Shop-Vorlage bemerken. Sobald Sie möchten, dass die Vorlagen aktiviert werden, speichern Sie Ihre Änderungen im Divi Theme Builder.

Erstellen Sie die WooCommerce-Einkaufswagen-Timeline

Der nächste Abschnitt unseres Blogbeitrags zeigt, wie Sie die WooCommerce-Einkaufswagen-Timeline für Divi neu erstellen, wenn Sie nach einer etwas größeren Herausforderung suchen. Die Verfahren in diesem Leitfaden können verwendet werden, um eine für Sie einzigartige Warenkorb-Zeitachse zu erstellen. Nutzen Sie es als Motivation für Ihre späteren WooCommerce- und Divi-Bemühungen! So sieht die WooCommerce-Warenkorb-Timeline aus, die wir erstellen werden:

Beginnen wir jetzt, da wir eine visuelle Darstellung dessen haben, was wir erstellen werden!

Divi Theme Builder einrichten

Diese Vorlagen, die wir entwickeln, werden sich auf die Kassen- und Warenkorbseiten von WooCommerce auswirken. Somit beginnen wir mit der Arbeit an unserem Projekt im Divi Theme Builder.

Klicken Sie auf der Karte Neue Vorlage hinzufügen auf das Pluszeichen.

Wählen Sie als Nächstes Neue Vorlage erstellen.

Danach wird Ihnen ein modales Feld mit allen verschiedenen Aufgaben angezeigt, die Sie an die neue Vorlage anhängen können, die Sie erstellen. In diesem Fall erstellen wir eine Vorlage für die Warenkorbseite des WooCommerce-Shops. Navigieren Sie also zur WooCommerce-Überschrift im Modalfeld und klicken Sie auf Warenkorb. Wählen Sie nach der Auswahl Vorlage erstellen. Auf diese Weise taggen wir die Warenkorbseite mit der neu erstellten Vorlage.

Um die Checkout-Vorlage zu entwickeln, gehen wir ähnlich vor. Klicken Sie auf der Karte Neue Vorlage hinzufügen auf das Pluszeichen.

Wählen Sie erneut „Neue Vorlage erstellen“.

Wir müssen das modale Fenster nach unten scrollen und Checkout aus der Überschrift WooCommerce auswählen, um auf die Checkout-Seite zuzugreifen. Wählen Sie nach der Auswahl Vorlage erstellen.

Wir können jetzt unsere Warenkorb- und Checkout-Vorlagen speichern, nachdem wir sie erstellt haben. Wählen Sie oben im Divi Theme Builder die grüne Schaltfläche Änderungen speichern.

Aufbau des WooCommerce-Warenkorbflusses

Der Spaß beginnt jetzt! Wir beginnen mit dem Entwurf des Zeitplans für den Warenkorbablauf der Warenkorbseite. Um dies zu erreichen, öffnen wir die Warenkorbvorlage, die wir gerade erstellt haben, und wählen die Schaltfläche „Benutzerdefinierten Körper hinzufügen“.

Wir werden die Schaltfläche "Benutzerdefinierten Körper erstellen" auswählen, die im Modalfeld angezeigt wird, genau wie wir es beim Erstellen dieser Vorlagen und ihrer Zuweisungen getan haben.

Neuer Abschnitt und neue Zeile

Wir werden jetzt, da wir uns im Divi Builder befinden, eine neue Zeile erstellen. In dieser Zeile gibt es fünf Spalten.

Fügen Sie den Spalten 1, 3 und 5 Ihrer neuen Zeile drei Blurb-Module hinzu.

Befolgen Sie die Einstellungen des Klappentextmoduls:

Erster Klappentext (Spalte 1)

• Titel: Laden
• Körper: Leer lassen
• Symbol verwenden: Ja
• Symbol: Siehe Screenshot unten
• Modul-Link-URL: /shop (Oder Ihr benutzerdefinierter Link zu Ihrer Shop-Seite)

Zweiter Klappentext (Spalte 3)

• Titel: Rezension
• Körper: Leer lassen
• Symbol verwenden: Ja
• Symbol: Siehe Screenshot unten
• Modul-Link-URL: /cart (Oder Ihr benutzerdefinierter Link zu Ihrer Warenkorbseite)

Dritter Klappentext (Spalte 5)

• Titel: Kasse
• Körper: Leer lassen
• Symbol verwenden: Ja
• Symbol: Siehe Screenshot unten
• Modul-Link-URL: /checkout (Oder Ihr benutzerdefinierter Link zu Ihrer Checkout-Seite)

Zu diesem Zeitpunkt sieht unsere WooCommerce-Zeitleiste wie folgt aus:

Ganz gleich, auf welchen Seiten Kunden landen, wir benötigen einfachen Zugriff auf unsere Blurb-Module, wenn wir Vorlagen für die Einkaufswagen- und Checkout-Seite erstellen. Die Fähigkeit des Endbenutzers—Ihres Kunden—, sich nahtlos zwischen den verschiedenen Checkout-Phasen zu bewegen, ist eine Schlüsselkomponente der WooCommerce-Zeitleiste. Wir werden zuerst die Moduleinstellungen des ersten Klappentexts, Shop, eingeben, um den Link zu den Standardseiten Shop, Warenkorb und Kasse der Website hinzuzufügen.

Ganz gleich, auf welchen Seiten Kunden landen, wir benötigen einfachen Zugriff auf unsere Blurb-Module, wenn wir Vorlagen für die Einkaufswagen- und Checkout-Seite erstellen. Die Fähigkeit des Endbenutzers—Ihres Kunden—, sich nahtlos zwischen den verschiedenen Checkout-Phasen zu bewegen, ist eine Schlüsselkomponente der WooCommerce-Zeitleiste. Wir werden zuerst die Moduleinstellungen des ersten Klappentexts, Shop, eingeben, um den Link zu den Standardseiten Shop, Warenkorb und Kasse der Website hinzuzufügen.

Jedes Blurb-Modul erhält Links zu den normalen WooCommerce-Seiten. Nehmen Sie die erforderlichen Anpassungen an allen benutzerdefinierten Links vor, die Sie möglicherweise für diese Seiten in Ihrer WooCommerce-Installation eingerichtet haben. Wir beginnen zuerst mit dem Shop Blurb-Modul. Wir geben /shop in das Feld Module Link URL ein. Dies ist die Standard-URL der Shop-Seite von WooCommerce. Denken Sie daran, diese URL durch Ihre personalisierte URL zu ersetzen, wenn Sie sie aktualisiert haben.

Um Ihre Änderungen zu speichern, klicken Sie auf das grüne Häkchen. Als nächstes gehen wir zum Überprüfungs-Blurb-Modul. Der Link zur Warenkorbseite wird von diesem Modul bereitgestellt. Erneut wird die Registerkarte „Link“ ausgewählt, und die Modul-Link-URL /cart wird zur Modul-URL hinzugefügt.

Wir werden für das letzte Blurb-Modul, das Checkout-Blurb-Modul, auf den Standardlink der WooCommerce-Checkout-Seite (/checkout) verlinken.

Stil-Blurb-Module

Anschließend beginnt das Styling unserer neu hinzugefügten Blurb-Module. Auf den Modulen wenden wir Hover-Stile an. Dies verbessert die Benutzererfahrung (UX) der WooCommerce-Einkaufswagen-Timeline. Wir wünschen eine andere Farbe für das Blurb-Modul, das die Seite darstellt, auf der wir uns gerade befinden. Außerdem möchten wir, dass das Symbol seine Farbe ändert und größer wird, wenn wir den Mauszeiger darüber bewegen.

Stil des Blurb-Moduls

• Symbolfarbe: #eac989
• Farbe des Hover-Symbols: #9fa2ce
• Textausrichtung: Zentriert

Titeltext:

• Titelüberschrift Text: H4

• Titelschriftart: Baskerville
• Schriftstärke des Titels: Fett
• Titeltextfarbe: #354e7c

Verwandeln:

• Transformationsskalierung (Desktop): 100%
• Transformationsskalierung (Hover): 115%

Wir wenden die Designparameter auf die anderen Blurb-Module in unserer Reihe an, nachdem wir sie für das erste Blurb-Modul konfiguriert haben.

Nur die Module in unserem Abschnitt sind die Objekte, auf die wir unsere Stile erweitern möchten. Denken Sie daran, besonders wenn Sie an einer Seite mit vorhandenem Inhalt arbeiten.

Styling des Warenkorb-Blurb-Moduls

Wir geben der Phase, in der sich unser Benutzer jetzt befindet, eine separate Symbolfarbe, um die verschiedenen Phasen des Checkout-Prozesses anzuzeigen. Beispielsweise ändern wir die Farbe des Blurb-Moduls, das auf die Warenkorbphase des Prozesses verweist, wenn es sich auf der Warenkorbseite befindet.

Warenkorb-Seite Blurb-Modul:

• Symbolfarbe (Desktop): #f6c6c5
• Symbolfarbe (Hover): #9fa2ce

Zeitleisten-Teiler hinzufügen

Wir beginnen mit dem Hinzufügen und Anpassen unserer Teilermodule, nachdem wir unser Blurb-Modul erstellt und gestaltet haben. Die zweite und vierte Spalte unserer Reihe beinhalten das Teilermodul.

Style Timeline Divider

Als nächstes werden wir Teilermodule anpassen. Nehmen Sie die folgenden Änderungen in den Teilereinstellungen vor.

Sichtweite:

• Teiler anzeigen: Ja

Linie:

• Linienfarbe: #354e7c
• Linienstil: Gepunktet
• Zeilenposition: Vertikal zentriert

Dimensionierung

• Teilergewicht: 5px

Lassen Sie uns die Stile aus diesem Teilermodul kopieren und in das andere Modul in unserer Reihe einfügen, indem wir eine wirklich clevere Divi-Funktion verwenden. Dann klicken wir mit der rechten Maustaste auf das fertige Teilermodul. Dann wählen wir Copy Module Settings. Dann klicken wir mit der rechten Maustaste auf das Divider-Modul, das im Moment nicht gestylt ist. Der letzte Schritt besteht darin, auf Moduleinstellungen einfügen zu klicken. Zeit sparen ist Zeit gewinnen!

Benutzerdefinierte CSS

Unsere WooCommerce-Warenkorb-Timeline sieht derzeit so aus:

Wir werden unserer Zeile etwas CSS hinzufügen, um sicherzustellen, dass unsere Teilermodule richtig ausgerichtet sind, und um unser Timeline-Modul mobil reagieren zu lassen.

Wir müssen zuerst die Zeilenoptionen für unsere WooCommerce-Warenkorb-Timeline eingeben, bevor wir unser benutzerdefiniertes CSS hinzufügen können. Wir wählen dann die Registerkarte Erweitert. Zu guter Letzt fügen wir das folgende CSS in das Hauptelement ein:

display:flex;
align-items: center;
justify-content: center;
flex-wrap: nowrap;

Klicken Sie nun auf das grüne Häkchen, um die Einstellungen zu speichern.

Einrichten der Checkout-Seite

Auf unserer Warenkorbseite haben wir den Grundstein für unsere WooCommerce-Warenkorbablauf-Zeitleiste gelegt. Aber wir müssen unsere Checkout-Seitenvorlage mit unserer abgeschlossenen Arbeit aktualisieren, um unseren Zeitplan fertigzustellen. Um unser Verfahren für die Checkout-Seite zu vereinfachen, verwenden wir das Rechtsklick-Menü, das eine der ursprünglichen Funktionen von Divi war. Lasst uns anfangen!

Kopieren Sie die Zeitachse des Warenkorbflusses von der Warenkorbseite

Wir kehren zur Warenkorbseite zurück. Wir werden den Divi Builder jedoch nicht für den Körper verwenden.

Klicken Sie mit der rechten Maustaste auf den benutzerdefinierten Körper der Einkaufswagenvorlage. Wählen Sie danach Kopieren aus dem Rechtsklickmenü.

Wir fügen nun die Arbeit, die wir in der Warenkorbvorlage abgeschlossen haben, in die Checkout-Vorlage ein, nachdem wir sie dupliziert haben. In der Checkout-Seitenvorlage klicken wir mit der rechten Maustaste auf die Schaltfläche Benutzerdefinierten Text hinzufügen, um dies zu erreichen. Wenn Sie fertig sind, erscheint die Option Einfügen im Menü. Um den benutzerdefinierten Text aus der Checkout-Seitenvorlage in die Warenkorbseitenvorlage zu kopieren, klicken Sie auf Einfügen.

Sie können jetzt sehen, dass die Checkout-Seitenvorlage und die Warenkorbvorlage beide einen benutzerdefinierten Textkörper haben. Dadurch können wir das Site-Design-Verfahren beschleunigen. Danke Divi. Wir klicken oben im Builder auf die grüne Schaltfläche Änderungen speichern, um unsere Änderungen an der Checkout-Vorlage zu speichern.

Checkout-Seite aktualisieren

Nachdem wir den Designprozess etwas verkürzt haben, nehmen wir die letzten Anpassungen an der Checkout-Seite vor, um sicherzustellen, dass sie sich nahtlos in den Rest unseres Projekts integriert. Um den benutzerdefinierten Text der Checkout-Seitenvorlage zu bearbeiten, klicken Sie zuerst auf das Stiftsymbol.

Checkout-Symbol im Stil

Gestalten Sie jetzt unser Checkout-Symbol. Die Moduleinstellungen des Checkout-Buttons werden geöffnet, wenn Sie auf das Zahnradsymbol klicken.

Wechseln Sie zum Design-Tab des Moduleinstellungen-Moduls. Der Titel "Image & Icon" sollte angeklickt werden. Die Farbe des Symbols wird geändert. Wählen Sie daher das Pipettensymbol und geben Sie den Hexadezimalwert #f6c6c5 ein. Als Ergebnis nimmt das Symbol die Farbe der aktuellen Seite an, die rosa ist.

Warenkorb-Symbol aktualisieren

Sie müssen zurückgehen und die Symbolfarbe des Einkaufswagensymbols ändern. Wir werden zu den Moduleinstellungen zurückkehren, um dies zu erreichen. Dann wählen wir das Zahnradsymbol des Einkaufswagensymbols aus.

Wir navigieren noch einmal zur Registerkarte Design der Moduleinstellungen. Wählen Sie danach das Pipettenwerkzeug aus dem Abschnitt Picture & Icon aus. Geben Sie dann #eac989 im Hexadezimalformat ein.

Wenn Sie den Divi Builder verlassen haben, vergessen Sie nicht, Ihre Einstellungen und all Ihre mühsame Arbeit zu speichern.

Marge alle zusammen

Während die Einkaufswagen-Zeitachse der Hauptfokus dieses Tutorials ist, erfordert die Vorlage auch die Verwendung zusätzlicher WooCommerce-Module. Diese zusätzlichen WooCommerce-Module müssen jeder Vorlagenseite hinzugefügt werden, damit Ihr Geschäft vollständig ist.

Warenkorb-Seitenvorlage

• Woo Cart Products: Dies zeigt den WooCommerce-Warenkorb an
• Woo Cart Totals: Präsentieren Sie mit diesem Modul die Zwischensumme, Steuern und mehr

Checkout-Seitenvorlage

• Woo Notice Module: Wir verwenden dieses Modul, um Fehler, Informationen oder Hinweise anzuzeigen, die sich auf das Bezahlen beziehen
• Woo Checkout Billing: Dieses Modul färbt die Rechnungsdetails Ihrer Kunden ein
• Woo Checkout Details: Im Gegensatz zu den Warenkorbsummen zeigt dieses Modul die tatsächlichen Produktnamen, die Menge und mehr an
• Woo Checkout Billing: Um verfügbare Zahlungsmethoden anzuzeigen, haben wir dieses Modul zur Checkout-Seite hinzugefügt

Einpacken

Eine Warenkorb-Zeitleiste gibt Kunden eine visuelle Darstellung ihrer Reise durch Ihre Website. Sie haben die Möglichkeit, Ihren WooCommerce-Shop mit Divi zu optimieren und eine neue Komponente hinzuzufügen. Dank der Tools von Divi können Sie das, was Sie hier gelernt haben, auf Ihre eigenen Kunden- und persönlichen Websites anwenden. Wenn Sie dieses Tutorial außerhalb des Klassenzimmers verwenden, lassen Sie es mich bitte wissen!