Der Warenkorb-Block ermöglicht es Ihnen, einen WooCommerce-Warenkorb nahtlos in jede SeedProd-Seite zu integrieren. Er zeigt die vom Kunden hinzugefügten Artikel an, bietet Echtzeit-Warenkorb-Updates und gibt Ihnen die volle Kontrolle über den visuellen Stil des Warenkorbs – von Feld- und Schaltflächenfarben über Typografie bis hin zu Randeinstellungen.
Verwenden Sie diesen Block, um eine vollständig benutzerdefinierte WooCommerce-Warenkorbseite zu erstellen, die zu Ihrer Marke passt, ohne eine einzige Zeile Code anfassen zu müssen. Sobald Ihre Seite veröffentlicht ist, weisen Sie sie einfach in den WooCommerce-Einstellungen als Ihre Warenkorbseite zu, damit Kunden automatisch dorthin geleitet werden.
Hinzufügen des Warenkorb-Blocks zu Ihren Seiten
Befolgen Sie diese Schritte, um einen Warenkorb-Block zu Ihrer SeedProd-Seite hinzuzufügen:
Schritt 1: Block hinzufügen
Ziehen Sie unter Design > Blöcke > WooCommerce den Warenkorb-Block in den gewünschten Bereich Ihrer Seite.
Schritt 2: Stileinstellungen konfigurieren
Nach dem Hinzufügen klicken Sie auf den Warenkorb-Block, um seine Einstellungen zu öffnen. Im Tab Stile sind die Einstellungen in fünf Abschnitte unterteilt.
Kopfzeilen:
- Kopfzeilenfarbe: Legt die Textfarbe für Abschnittsüberschriften im Warenkorb fest.
Schaltflächen:
- Schaltflächenstil: Wählen Sie einen visuellen Stil für die Warenkorb-Schaltflächen – Flach, 2D, Vintage, Ghost oder Link.
- Schaltflächenfarbe: Legt die Hintergrundfarbe für die Aktionsschaltflächen des Warenkorbs fest.
- Radius des Rahmens: Passen Sie die Rundung der Ecken von Warenkorb-Schaltflächen mit einem Schieberegler an.
Felder:
- Hintergrundfarbe des Feldes: Legt die Hintergrundfarbe der Eingabefelder im Warenkorb fest (z. B. Gutscheincode und Mengenfelder).
- 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.
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:
- Rahmenfarbe des Warenkorbs: Legt die Rahmenfarbe des Warenkorb-Containers fest.
- Rahmenbreite des Warenkorbs: Legt die Dicke des Rahmens auf jeder Seite des Warenkorb-Containers fest.
- Radius des Rahmens: Passen Sie die Rundung der Ecken des Warenkorb-Containers mit einem Schieberegler an.
- Hintergrundfarbe: Legt die Hintergrundfarbe des Warenkorb-Containers fest.
- Textfarbe: Legt die allgemeine Textfarbe innerhalb des Warenkorbs fest.
- Schriftfamilie: Wählen Sie die Schriftart für den Textkörper des Warenkorbs.
- Hintergrundfarbe der Kopfzeile: Legt die Hintergrundfarbe der Kopfzeile des Warenkorbs fest.
- Schriftfamilie der Kopfzeile: Wählen Sie die Schriftart für den Text der Warenkorbkopfzeile.
- Farbe der Kopfzeile: Legen Sie die Textfarbe der Warenkorbkopfzeile fest.
Schritt 3: Design anpassen
Im Tab Erweitert können Sie das Layout und Verhalten Ihres Warenkorb-Blocks weiter anpassen.
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 4: Als Ihre WooCommerce-Warenkorbseite festlegen
Nachdem Sie Ihre Seite veröffentlicht haben, navigieren Sie zu WooCommerce > Einstellungen > Erweitert und legen Sie Ihre neue SeedProd-Seite als Warenkorbseite fest. Dies stellt sicher, dass Kunden zu Ihrer benutzerdefinierten Warenkorbseite weitergeleitet werden, wenn sie auf das Warenkorbsymbol klicken oder von einer Produktseite dorthin wechseln.
Schritt 5: Änderungen speichern
Sobald Sie die Konfiguration des Warenkorb-Blocks abgeschlossen und sein Aussehen angepasst haben, stellen Sie sicher, dass Sie Ihre Arbeit speichern.
Sie haben erfolgreich einen Warenkorb-Block zu Ihrer Seite hinzugefügt! Mit voller Kontrolle über Button-Stile, Feld-Farben, Typografie und das Styling des Warenkorb-Containers können Sie ein WooCommerce-Warenkorb-Erlebnis schaffen, das sich vollständig in Ihre Marke einfügt. Vergessen Sie nicht, die Seite in den WooCommerce-Einstellungen als Ihre Warenkorbseite zuzuweisen, damit Ihre Kunden immer am richtigen Ort landen.