So erstellen Sie eine WooCommerce-Checkout-Seitenvorlage mit Divi

Rifat Divi Tutorials Dec 27, 2021

Das Erstellen einer WooCommerce-Checkout-Seite erfordert normalerweise eine erhebliche Anpassung der PHP-Vorlagendatei im Backend und eine erhebliche Menge an benutzerdefiniertem CSS. Durch Divi 's Woo-Module ist dieses Verfahren jedoch unterhaltsam und unkompliziert geworden! Wenn Sie Divi verwenden, um eine WC-Checkout-Seite zu aktualisieren, verwandelt sich der WC-Shortcode in ein strukturiertes Layout dynamischer Woo-Checkout-Module, die mit ausgeklügelten integrierten Designoptionen visuell gestaltet werden können. Dadurch haben Sie die vollständige Kontrolle über das Design der Checkout-Seite.

In diesem Handbuch erfahren Sie, wie Sie mit Divi eine völlig einzigartige WooCommerce-Checkout-Seite erstellen. Zuerst erstellen wir die WooCommerce-Checkout-Seite, indem wir die dynamischen Woo-Module verwenden, die für die Checkout-Seite zugänglich sind. Wenn Sie fertig sind, zeigen wir Ihnen, wie Sie das Checkout-Seitendesign auf eine Checkout-Seitenvorlage im Theme Builder anwenden. Egal, ob Sie die Checkout-Seite selbst ändern oder eine Checkout-Seitenvorlage entwickeln möchten, Divi bietet Ihnen alles. Sie sind auf dem besten Weg, im Handumdrehen optisch ansprechende Checkout-Seiten zu erstellen.

Designvorschau

So wird unser Design aussehen.

WooCommerce Check-Out-Seite und Divi

Wenn Sie WooCommerce auf Ihrer Divi-Site installieren, werden primäre WC-Seiten wie eine Warenkorbseite, eine Warenkorbseite, ein Checkout-Prozess und eine Kontoseite erstellt. Anschließend wird der Inhalt der Seite mithilfe eines Shortcodes im Backend-WordPress-Blockeditor bereitgestellt.

Erstellen Sie erstaunliche Websites

Mit dem besten kostenlosen Seite Builder Elementor

Jetzt anfangen

Wenn Sie den Divi Builder auf dieser Checkout-Seite aktivieren, werden alle Inhaltskomponenten der WooCommerce Checkout-Seite als Divi Woo-Module geladen, die zum Anpassen der Seite verwendet werden können.

Woo-Module zum Entwerfen einer Checkout-Seite in Divi

Divi verfügt über mehrere wesentliche Module zum Hinzufügen interaktiver Inhalte zu einer Seitenvorlage. Einige davon enthalten Woo-Module, die auf die Checkout-Seite zugeschnitten sind.

Die folgenden Module sind für die Erstellung der Checkout-Seite oder -Vorlage unerlässlich:

Beitragstitel: Â Beim Erstellen einer Checkout-Seitenvorlage wird der Titel der Checkout-Seite dynamisch angezeigt.

Woo Notification: Â Dieses Modul kann vielen Seitenarten (Warenkorb, Produkt und Kasse) zugewiesen werden. Es zeigt dem Benutzer bei Bedarf dynamisch wichtige Benachrichtigungen an.

Woo Checkout Billing: Â Dieses Modul zeigt das Rechnungsdetails-Formular an, das während des Checkout-Prozesses verwendet wird.

Woo Checkout-Versand: Â Dieses Modul zeigt das Versanddetails-Formular an, das während des Checkout-Prozesses angezeigt wird.

Woo Checkout-Informationen: Â Dieses Modul zeigt das zusätzliche Informationsformular, das während des gesamten Checkout-Prozesses verwendet wird.

Woo Checkout-Details: Â Dieses Modul zeigt Bestelldetails während des Checkouts an, einschließlich der gekauften Produkte und deren Preise.

Woo Checkout Payment: Â Dieses Modul zeigt die Zahlungsarten und Zahlungsformulardetails während des Checkouts an.

Eine weitere Woo-Modul-Option:

Woo Breadcrumbs: Â Die WooCommerce Breadcrumb-Navigationsleiste wird angezeigt.

Erstellen Sie eine Checkout-Seite oder eine Vorlage

Wie bereits erwähnt, können wir mit den Divi Woo-Modulen ganz einfach eine benutzerdefinierte WooCommerce-Checkout-Seite erstellen. Sie können jedoch denselben Designprozess verwenden, um eine benutzerdefinierte Checkout-Vorlage zu erstellen. In diesem Tutorial wird ein benutzerdefiniertes Checkout-Seitenlayout für die Checkout-Seite erstellt. Anschließend zeigen wir Ihnen mit dem Divi Theme Builder, wie Sie das benutzerdefinierte Checkout-Seitenlayout nutzen, um eine Checkout-Seitenvorlage zu erstellen.

Verwenden von Divi zum Erstellen eines WooCommerce-Checkout-Seitenlayouts

Der Zweck dieses WooCommerce-Checkout-Seiten-Tutorials besteht darin, ein benutzerdefiniertes Seitenlayout für die WooCommerce-Checkout-Seite zu entwickeln, die in WooCommerce als WooCommerce-Checkout-Seite bezeichnet wird. Am Ende der Lektion zeigen wir Ihnen, wie Sie dieses Checkout-Seitenlayout mühelos speichern und in den Theme Builder importieren können, um eine neue Checkout-Seitenvorlage zu erstellen.

Bearbeiten der WooCommerce Checkout-Seite

Klicken Sie hier, um die WooCommerce-Checkout-Seite im WordPress-Dashboard zu bearbeiten. Die Seite enthält standardmäßig den Shortcode, der zum Erstellen des Inhalts der Checkout-Seite verwendet wird.

Klicken Sie oben im Seiteneditor auf die Option Divi Builder verwenden.

Wählen Sie Bearbeiten mit dem Divi-Builder.

Von vorne beginnen

Wie bereits erwähnt, wird die Seite mit allen anpassbaren Divi-Modulen (einschließlich der entscheidenden Woo-Module) geladen, die den Inhalt der Checkout-Seite umfassen. Wenn Sie möchten, können Sie natürlich das vorhandene Layout verwenden und bereits dort mit dem Ändern der Module beginnen. Aber für diesen Leitfaden fangen wir bei Null an.

Rufen Sie das Optionsmenü unten auf der Seite auf und wählen Sie JA für die Schaltfläche Layout löschen (das Papierkorbsymbol), um das Layout zu löschen.

Abschnitt Hintergrund

Fügen Sie zunächst wie folgt eine Hintergrundfarbe zu einem neuen regulären Abschnitt hinzu:

  • Hintergrundfarbe: #264653

Zeile und Spalte

Im nächsten Schritt wird diesem Abschnitt eine einspaltige Zeile hinzugefügt.

Erstellen des dynamischen Checkout-Seitentitels

Um den Seitentitel für die Checkout-Seite dynamisch zu gestalten, fügen Sie der Spalte ein Beitragstitelmodul hinzu.

Inhalt des Beitragstitels

Aktualisieren Sie in den Einstellungen für den Beitragstitel die Elemente, um nur den Titel wie folgt anzuzeigen:

  • Titel anzeigen: JA
  • Meta anzeigen: NEIN
  • Ausgewähltes Bild anzeigen: NEIN

Titeltext des Beitrags

Um den Text des Beitragstitels zu formatieren, aktualisieren Sie Folgendes auf der Registerkarte „Design“:

  • Titelschriftart: DM Serif Display
  • Titeltextfarbe: #e9c46a
  • Titeltextgröße: 80 Pixel (Desktop), 60 Pixel (Tablet), 42 Pixel (Telefon)
  • Höhe der Titelzeile: 1.2em

Dynamisches Woo-Hinweismodul

Es ist immer eine gute Idee, das Woo Notice-Modul oben auf der Seite zu platzieren, um die Hinweise zu sehen, wenn Sie mit der Checkout-Seite interagieren. Beachten Sie, dass wir Hinweise erstellen, die nur bei Bedarf angezeigt werden.

Um das Woo-Benachrichtigungsmodul hinzuzufügen, gehen Sie zum Beitragstitelmodul und klicken Sie auf , um ein neues Woo-Benachrichtigungsmodul hinzuzufügen.

Woo Hinweis Seitentyp und Hintergrund

Aktualisieren Sie als Nächstes den Seitentyp und die Hintergrundfarbe des Woo-Hinweises wie folgt:

  • Seitentyp: Checkout-Seite
  • Hintergrundfarbe: #2a9d8f

Titeltext

Aktualisieren Sie auf der Registerkarte "Design" die folgenden Einstellungen.

  • Titelschriftart: Roboto
  • Schriftstärke des Titels: Mittel
  • Titeltextfarbe: #e9c46a
  • Titeltextgröße: 14px
  • Höhe der Titelzeile: 1,8 em
  • Linktextfarbe: #f4a261

Woo-Hinweisfelder

Felder und Feldnamen für Artikel wie ein Anmeldeformular und ein Gutscheincode sind in den Hinweisen zur Checkout-Seite enthalten. Um den Stil der Feldbeschriftungen für diese Felder zu ändern, nehmen Sie die folgenden Änderungen vor:

  • Erforderliche Feldanzeigefarbe: #e9c46a
  • Schriftart der Feldbeschriftung: Roboto
  • Schriftstärke der Feldbeschriftung: Fett
  • Platzhalterfarbe: #e9c46a
  • Felder Hintergrundfarbe: transparent
  • Feldtextfarbe: #e9c46a
  • Textfarbe des Feldfokus: #e9c46a
  • Feldauffüllung: 12px oben, 12px unten
  • Feldrandbreite: 1px
  • Rahmenfarbe der Felder: rgba(255,255,255,0.32)

Woo Hinweis-Schaltfläche

Es ist Zeit, die Tasten anzupassen.

  1. Benutzerdefinierte Stile für Schaltfläche verwenden: JA
  2. Schaltflächentextgröße: 14px
  3. Schaltflächentextfarbe: #e9c46a
  4. Schaltflächenhintergrundfarbe: #2a9d8f
  5. Breite des Tastenrahmens: 1px
  6. Farbe des Knopfrahmens: #e9c46a
  7. Schaltflächenrandradius: 0px
  8. Tastenabstand der Buchstaben: 1px
  9. Schaltflächenschriftart: Roboto
  10. Schriftstärke der Schaltfläche: Fett
  11. Schaltflächenschriftart: TT
  12. Tastenpolsterung: 12 Pixel oben, 12 Pixel unten, 24 Pixel links, 24 Pixel rechts

Woo-Benachrichtigungsformular

Unter der Optionsgruppe Formular kann jedes der Benachrichtigungsformulare gestaltet werden. Aktualisieren Sie Folgendes, um den Formularen einen hellen Rahmen zu geben:

  1. Abgerundete Ecken bilden: 0px
  2. Breite des Formularrahmens: 1px
  3. Rahmenfarbe des Formulars: rgba(255,255,255,0.32)

Woo Hinweisbox Schatten

Um ein oberes randähnliches Design in der Woo-Hinweisleiste hinzuzufügen, aktualisieren Sie die Box-Shadow-Optionen wie folgt:

  1. Box Shadow: siehe Screenshot
  2. Horizontale Position des Boxschattens: 0px
  3. Vertikale Position des Boxschattens: 3px
  4. Schattenfarbe: #999e75

Woo Checkout-Abrechnungsmodul

Nachdem wir nun unseren Seitenheader und die Hinweise eingerichtet haben, können wir den Inhalt der Woo Checkout-Abrechnung hinzufügen, der eine weitere wesentliche Komponente der Checkout-Seite ist.

Erstellen Sie eine neue Zeile mit einer Drei-Fünftel-Zwei-Fünftel-Spaltenanordnung, bevor Sie das Fakturamaterial hinzufügen.

Fügen Sie in Spalte 1 ein Woo Checkout-Abrechnungsmodul hinzu.

Woo Checkout-Abrechnungstiteltext

Öffnen Sie im Woo Checkout Billing-Modul die Einstellung und passen Sie das Folgende unter der Registerkarte Design an.

  • Titelschriftart: DM Serif Display
  • Titeltextfarbe: #fff
  • Titeltextgröße: 30 Pixel (Desktop), 24 Pixel (Tablet), 18 Pixel (Telefon)
  • Höhe der Titelzeile: 1,4 em

Woo Checkout-Abrechnungsfeld und Feldbezeichnungen

Wie das Hinweismodul enthält dieses Modul Optionen zum Gestalten des Felds und der Feldbeschriftungen. Da wir möchten, dass alle unsere Felder und Feldbeschriftungen auf der gesamten Seite konsistent sind, können wir die Feld- und Feldbeschriftungsstile aus dem Hinweismodul kopieren und in das Woo Checkout-Abrechnungsmodul einfügen.

So gehen Sie vor:

  1. Öffnen Sie die Einstellungen für das Hinweismodul oben auf der Seite.
  2. Klicken Sie auf der Registerkarte Design mit der rechten Maustaste auf die Optionsgruppe Feldbeschriftungen.
  3. Wählen Sie im Kontextmenü "Feldbeschriftungsstile kopieren".

Fügen Sie den kopierten Stil in das neu hinzugefügte Modul ein.

Und es wird ungefähr so aussehen.

Hinweis zum Woo Checkout-Rechnungsformular

Der Formularhinweis ist dafür verantwortlich, Benachrichtigungen oder Fehler beim Ausfüllen des Formulars dynamisch anzuzeigen. Um den Formularhinweis zu gestalten, navigieren Sie zu den Woo Checkout-Abrechnungseinstellungen und nehmen Sie die folgenden Änderungen vor:

  • Formularhinweis Hintergrundfarbe: #e58991
  • Auffüllen von Formularhinweisen: 8 Pixel oben, 8 Pixel unten
  • Formularhinweis Schriftart: Roboto
  • Formularhinweis Textgröße: 14px

Woo Checkout-Abrechnungsabstand und -rahmen

Um das Design abzuschließen, fügen wir dem Modul wie folgt eine kleine Polsterung und einen hellen Rand hinzu:

  • Padding: 16px oben, 16px unten, 16px links, 16px rechts
  • Randbreite: 1px
  • Rahmenfarbe: rgba(255,255,255,0.1)

Woo Checkout-Versand- und Woo-Checkout-Informationen

Das Woo Checkout-Versandmodul und das Woo Checkout-Informationsmodul sind wesentliche Komponenten zum Erstellen der Checkout-Seitenvorlage. Vor dem Beenden des Checkouts zeigt das Woo Checkout-Versandmodul das Formular an, das für die Eingabe von Versanddetails erforderlich ist. Darüber hinaus zeigt das Woo Checkout-Informationsmodul ein Eingabeformular an, mit dem Benutzer vor dem Checkout zusätzliche Informationen eingeben können.

Module hinzufügen

Gehen Sie jetzt los und fügen Sie ein Woo-Checkout-Versandmodul hinzu.

Fügen Sie auch ein Woo Checkout-Informationsmodul hinzu.

Jedes woo-Modul (Checkout-Versand- und Checkout-Informationen) muss wie das Woo-Checkout-Abrechnungsmodul aussehen. Wir können die Stile, die wir für jeden benötigen, auf jeden kopieren. Lassen Sie uns das Design hier kopieren und einfügen.

Woo Checkout-Details-Modul

Nachdem wir nun unseren Versand- und zusätzlichen Informationsinhalt entworfen haben, sind wir bereit, den Inhalt der Woo Checkout-Details hinzuzufügen. Dies ist eine weitere wichtige Komponente der Checkout-Seite, die die Bestelldetails anzeigt. Es enthält eine Produktliste, Zwischensummen und den Gesamtpreis des Kaufs. Es zeigt auch alle Coupon-Einsparungen, die verwendet wurden und über einen Link abgehoben werden können.

Fügen Sie ein neues Woo Checkout-Details-Modul zu den Checkout-Details in Spalte 2 derselben Zeile hinzu.

Woo Checkout-Details Titeltext

Aktualisieren Sie die Einstellungen für den Titeltext wie folgt:

  • Titelschriftart: DM Serif Display
  • Schriftstärke des Titels: Fett
  • Titeltextfarbe: #e9c46a
  • Titeltextgröße: 24 Pixel (Desktop), 22 Pixel (Tablet), 18 Pixel (Telefon)
  • Höhe der Titelzeile: 1,4 em

Woo Checkout Details Spaltenbezeichnung

Lassen Sie uns die Spaltenbeschriftungen gestalten:

  • Schriftart für Spaltenbeschriftung: Roboto
  • Schriftstärke der Spaltenbeschriftung: Fett
  • Textfarbe der Spaltenbeschriftung: #ddb17c

Woo Checkout-Details Textkörper

Um den Textkörper zu formatieren, der auf die Elemente unter jeder Spalte in der Liste abzielt, aktualisieren Sie Folgendes:

  • Körperschriftart: Roboto
  • Textkörperfarbe: #fff

Aktualisieren Sie auf der Registerkarte Link die Textfarbe des Links:

  • Linktextfarbe: #e0816b

Woo Checkout Details Tabellenrahmen

Für dieses Design werden wir die Tabellenumrandung ganz herausnehmen. Aktualisieren Sie dazu Folgendes:

  • Tabellenrandbreite: 0px

Woo Checkout Details Tabellenzelle

Um die Tabellenzellen innerhalb der Tabelle zu formatieren, aktualisieren Sie Folgendes:

  • Auffüllen von Tabellenzellen: 0 Pixel übrig
  • Tabellenzellenrahmenstil: keine

Woo Checkout Details Polsterung und Rand

Um das Design des Moduls mit den anderen Modulen konsistent zu halten, aktualisieren Sie die Auffüllung und den Rahmen wie folgt:

  • Padding: 16px oben, 16px unten, 16px links, 16px rechts
  • Randbreite: 1px
  • Rahmenfarbe: rgba(255,255,255,0.1)

Woo Checkout-Zahlungsmodul

Wir sind bereit, den Inhalt von Woo Checkout Details hinzuzufügen, nachdem wir unseren Versand- und zusätzlichen Informationsinhalt erstellt haben. Dies ist ein weiterer wichtiger Teil der Checkout-Seite, auf der die Bestelldetails angezeigt werden. Es enthält eine Produktliste, Zwischensummen und den endgültigen Kaufpreis. Es zeigt auch alle Coupon-Ersparnisse an, die angewendet wurden und die durch Klicken auf einen Link abgehoben werden können.

Fügen Sie ein neues Woo Checkout-Details-Modul zu den Checkout-Details in der Spalte 2 derselben Zeile hinzu.

Nehmen Sie die folgenden Anpassungen vor.

  • Hintergrundfarbe des Formulars: #E58991
  • Schriftart für Formularhinweis: Roboto
  • Schriftstärke des Formularhinweis: Fett
  • Schriftgröße für Formularhinweise: 16px
  • Tasteneinstellung: Wie zuvor
  • Abstand: 0px (Oben, Unten, Links, Rechts)

Endergebnis

So sieht unsere letzte Checkout-Seite aus.

Einpacken

Mit Divis robustem Page Builder und intuitiven Woo-Modulen wird das Erstellen einer benutzerdefinierten WooCommerce-Checkout-Seitenvorlage erheblich vereinfacht und erweitert. Dieses Tutorial konzentrierte sich auf die Integration der wesentlichen Teile, aus denen eine Checkout-Seite besteht. Denken Sie jedoch daran, dass Ihnen alle anderen einzigartigen Divi-Module und -Funktionen zur Verfügung stehen, um Ihre Checkout-Seiten auf die nächste Stufe zu heben. Dies sollte dazu beitragen, Ihre Divi- Designfähigkeiten zu verbessern und, was noch wichtiger ist, zu mehr Konvertierungen führen.

Divi WordPress Theme