Der Checkout-Block ermöglicht es Ihnen, ein vollständig angepasstes WooCommerce-Checkout-Formular auf jeder SeedProd-Seite einzubetten. Er gibt Ihnen die volle Kontrolle über das Checkout-Layout und den visuellen Stil – von Feld-Farben, Beschriftungs-Typografie und Zeilenabständen bis hin zum Button-Design, der Warenkorb-Gestaltung und dem Erscheinungsbild des Zahlungsbereichs – sodass Sie ein Checkout-Erlebnis schaffen können, das zu Ihrer Marke passt, ohne eine Zeile Code anfassen zu müssen.
Verwenden Sie diesen Block, um eine optimierte, markenkonforme Checkout-Seite zu erstellen, die Reibungsverluste reduziert und die Kunden auf den Abschluss ihres Kaufs konzentriert. Sobald Ihre Seite veröffentlicht ist, weisen Sie sie einfach in den WooCommerce-Einstellungen als Ihre Checkout-Seite zu, damit die Kunden automatisch dorthin geleitet werden.
Hinzufügen des Checkout-Blocks zu Ihren Seiten
Befolgen Sie diese Schritte, um einen Checkout-Block zu Ihrer SeedProd-Seite hinzuzufügen:
Schritt 1: Block hinzufügen
Ziehen Sie unter Design > Blöcke > WooCommerce den Checkout-Block in den gewünschten Bereich Ihrer Seite.
Schritt 2: Stileinstellungen konfigurieren
Nach dem Hinzufügen klicken Sie auf den Checkout-Block, um seine Einstellungen zu öffnen. Im Tab Stile sind die Einstellungen in sieben Abschnitte unterteilt.
Layout:
- Layout-Spalten: Wählen Sie zwischen einem Einspalten-Layout (Rechnungsfelder und Bestellübersicht vertikal gestapelt) oder einem Zwei-Spalten-Layout (Rechnungsfelder links, Bestellübersicht rechts).
Kopfzeilen:
- Kopfzeilenfarbe: Legen Sie die Textfarbe für die Abschnittsüberschriften im Checkout-Formular fest.
- Typografie: Legen Sie Schriftfamilie, Größe, Zeilenhöhe, Buchstabenabstand, Schriftschnitt, Stil und Groß-/Kleinschreibung für den Text der Checkout-Kopfzeile fest.
Felder:
- Hintergrundfarbe der Felder: Legen Sie die Hintergrundfarbe der Checkout-Eingabefelder fest.
- Textfarbe des Feldes: Legt die Textfarbe innerhalb der Eingabefelder fest.
- Rahmenfarbe des Feldes: Legt die Rahmenfarbe der Eingabefelder fest.
- Rahmenbreite des Feldes: Legt die Dicke des Rahmens auf jeder Seite der Eingabefelder fest.
- Farbe der Beschriftung: Legen Sie die Textfarbe für die Feld-Beschriftungen fest.
- Typografie der Beschriftung: Legen Sie Schriftfamilie, Größe, Zeilenhöhe, Buchstabenabstand, Schriftschnitt, Stil und Groß-/Kleinschreibung für den Text der Feld-Beschriftungen fest.
- Zeilenabstand: Passen Sie den vertikalen Abstand zwischen den Zeilen des Formularfelds mit einem Schieberegler an (Standard: 6px).
Schaltflächen:
- Button-Stil: Wählen Sie einen visuellen Stil für die Checkout-Buttons – Flach, 2D, Vintage, Ghost oder Link.
- Button-Farbe: Legen Sie die Hintergrundfarbe der Checkout-Aktionsbuttons fest.
- Abrundung: Passen Sie die Rundung der Ecken von Checkout-Buttons mit einem Schieberegler an.
Benachrichtigungen:
- Info-Hervorhebungsfarbe: Legt die Farbe fest, die für informative Benachrichtigungsnachrichten verwendet wird.
- Fehler-Hervorhebungsfarbe: Legt die Farbe fest, die für Fehlermeldungen verwendet wird.
- Erfolgs-Hervorhebungsfarbe: Legt die Farbe fest, die für Erfolgsmeldungen verwendet wird.
Warenkorb:
- Warenkorb-Rahmenfarbe: Legen Sie die Rahmenfarbe der Bestellübersichtstabelle fest.
- Warenkorb-Rahmenbreite: Legen Sie die Rahmenstärke auf jeder Seite der Warenkorbtabelle fest.
- Abrundung: Passen Sie die Rundung der Ecken der Warenkorbtabelle mit einem Schieberegler an.
- Hintergrundfarbe: Legen Sie die Hintergrundfarbe der Warenkorbtabelle fest.
- Textfarbe: Legen Sie die allgemeine Textfarbe innerhalb der Warenkorbtabelle fest.
- Schriftfamilie: Wählen Sie die Schriftart für den Textkörper des Warenkorbs.
- Hintergrundfarbe der Kopfzeile: Legen Sie die Hintergrundfarbe der Kopfzeile der Warenkorbtabelle fest.
- Schriftfamilie der Kopfzeile: Wählen Sie die Schriftart für den Text der Warenkorbkopfzeile.
- Farbe der Kopfzeile: Legen Sie die Textfarbe der Kopfzeile der Warenkorbtabelle fest.
Zahlungsbereich:
- Hintergrundfarbe: Legen Sie die Hintergrundfarbe des Abschnitts für Zahlungsmethoden fest.
- Textfarbe: Legen Sie die Textfarbe im Abschnitt für Zahlungsmethoden fest.
- Schriftfamilie: Wählen Sie die Schriftart für den Text im Zahlungsabschnitt.
Schritt 3: Vorlage auswählen
Im Tab Vorlagen können Sie aus einer Sammlung von vordefinierten Checkout-Stilen wählen. Jede Vorlage wendet mit einem Klick einen abgestimmten Satz von Feld-, Button- und Layoutstilen auf Ihr Checkout-Formular an. Verfügbare Eingabefeldstile umfassen Hell, Keine Umrandung, Breite Umrandung, Innenschatten, Grau, Dunkel, Untere Umrandung und Transparent.
Schritt 4: Design anpassen
Im Tab Erweitert können Sie das Layout und Verhalten Ihres Checkout-Blocks weiter verfeinern.
Abstand:
- Abstand: Legen Sie den äußeren Abstand um den Block auf allen vier Seiten fest, mit unabhängigen Steuerelementen für Desktop, Tablet und Mobilgerät.
- Innenabstand: Legen Sie den inneren Abstand innerhalb des Block-Wrappers auf allen vier Seiten fest, mit geräteabhängigen Steuerelementen.
Attribute:
- Benutzerdefinierte Klasse: Fügen Sie dem Block-Wrapper eine oder mehrere benutzerdefinierte CSS-Klassen für gezieltes Styling hinzu.
- CSS-ID: SeedProd generiert automatisch eine eindeutige CSS-ID für diesen Block. Sie können diese verwenden, um den Block in benutzerdefiniertem CSS oder JavaScript zu referenzieren.
- Benutzerdefinierte Attribute: Fügen Sie dem Block-Wrapper-Element benutzerdefinierte HTML-Attribute hinzu. Geben Sie jedes Attribut in einer neuen Zeile im Schlüssel|Wert-Format ein.
Gerätesichtbarkeit:
- Auf Desktop ausblenden: Umschalten, um den Block auf Desktop-Bildschirmen auszublenden.
- Auf Tablet ausblenden: Umschalten, um den Block auf Tablet-Bildschirmen auszublenden.
- Auf Mobilgeräten ausblenden: Umschalten, um den Block auf Mobilgeräten auszublenden.
Animationseffekte:
- Scrolleffekt: Wenden Sie eine scrollgesteuerte Animation auf den Block an, einschließlich Optionen für vertikales und horizontales Scrollen mit Steuerelementen für Richtung, Geschwindigkeit und Ansichtsfensterversatz.
- Mauseffekt: Wenden Sie einen Parallax-Effekt auf den Block an, der durch Mausbewegungen gesteuert wird.
Schritt 5: Als Ihre WooCommerce Checkout-Seite festlegen
Nachdem Sie Ihre Seite veröffentlicht haben, navigieren Sie zu WooCommerce > Einstellungen > Erweitert und legen Sie Ihre neue SeedProd-Seite als die vorgesehene Checkout-Seite fest. Dies stellt sicher, dass Kunden zu Ihrer benutzerdefinierten Checkout-Seite weitergeleitet werden, wenn sie zur Kasse gehen.
Schritt 6: Änderungen speichern
Sobald Sie die Konfiguration des Checkout-Blocks abgeschlossen und dessen Erscheinungsbild angepasst haben, stellen Sie sicher, dass Sie Ihre Arbeit speichern.
Sie haben erfolgreich einen Checkout-Block zu Ihrer Seite hinzugefügt! Mit Layout-Optionen, vordefinierten Vorlagen und granularer Kontrolle über jedes visuelle Detail – von Feldbezeichnungen und Button-Stilen bis hin zu Warenkorb-Tabellenüberschriften und Typografie im Zahlungsabschnitt – können Sie ein nahtloses und professionelles Checkout-Erlebnis aufbauen. Vergessen Sie nicht, die Seite in den WooCommerce-Einstellungen als Ihre Checkout-Seite zuzuweisen, damit Ihre Kunden immer am richtigen Ort landen.