Mit dem Warenkorb-Block können Sie einen WooCommerce-Warenkorb nahtlos in jede SeedProd-Seite integrieren. Er zeigt die Artikel an, die ein Kunde hinzugefügt hat, bietet Echtzeit-Aktualisierungen des Warenkorbs und gibt Ihnen die volle Kontrolle über das visuelle Design des Warenkorbs – von den Farben der Felder und dem Design der Schaltflächen bis hin zu den Einstellungen für Schriftart und Rahmen.
Verwenden Sie diesen Block, um eine vollständig angepasste WooCommerce-Warenkorbseite zu erstellen, die zu Ihrer Marke passt, ohne dass Sie Code bearbeiten müssen. Sobald Ihre Seite veröffentlicht ist, legen Sie sie einfach in den WooCommerce-Einstellungen als Ihre Warenkorbseite fest, damit Kunden automatisch dorthin weitergeleitet 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 Block „Warenkorb“ per Drag & Drop in den gewünschten Bereich Ihrer Seite.
Schritt 2: Stileinstellungen konfigurieren
Nach dem Hinzufügen klicken Sie auf den Warenkorb-Block, um dessen Einstellungen zu öffnen. Auf der Registerkarte „Stile“ sind die Einstellungen in fünf Abschnitte unterteilt.
Kopfzeilen:
- Header-Farbe: Legen Sie die Textfarbe für Abschnittsüberschriften im Warenkorb fest.
Knöpfe:
- Schaltflächenstil: Wählen Sie einen visuellen Stil für Warenkorb-Schaltflächen – Flach, 2D, Vintage, Ghost oder Link.
- Schaltflächenfarbe: Legen Sie die Hintergrundfarbe für die Schaltflächen zum Ausführen von Warenkorbaktionen fest.
- Border Radius: Passen Sie die Eckenrundung der Warenkorb-Schaltflächen mithilfe eines Schiebereglers an.
Felder:
- Hintergrundfarbe des Feldes: Legen Sie die Hintergrundfarbe der Eingabefelder im Warenkorb fest (z. B. Felder für Gutscheincode und Menge).
- Feldtextfarbe: Legen Sie die Textfarbe innerhalb der Eingabefelder fest.
- Feldrandfarbe: Legen Sie die Randfarbe der Eingabefelder fest.
- Feldrandbreite: Legen Sie die Randstärke auf jeder Seite der Eingabefelder fest.
Warnmeldungen:
- Info-Hervorhebungsfarbe: Legen Sie die Farbe fest, die für informative Warnmeldungen verwendet wird.
- Fehler-Hervorhebungsfarbe: Legen Sie die Farbe fest, die für Fehlerwarnmeldungen verwendet wird.
- Farbe für Erfolgshighlights: Legen Sie die Farbe fest, die für Erfolgsmeldungen verwendet wird.
Warenkorb:
- Farbe des Warenkorb-Rahmens: Legen Sie die Farbe des Rahmens des Warenkorb-Containers fest.
- Breite des Warenkorb-Rahmens: Legen Sie die Dicke des Rahmens auf jeder Seite des Warenkorb-Containers fest.
- Border Radius: Passen Sie die Eckenrundung des Warenkorb-Containers mithilfe eines Schiebereglers an.
- Hintergrundfarbe: Legen Sie die Hintergrundfarbe des Warenkorb-Containers fest.
- Textfarbe: Legen Sie die allgemeine Textfarbe im Warenkorb fest.
- Schriftfamilie: Wählen Sie die Schriftart für den Text im Warenkorb aus.
- Hintergrundfarbe der Kopfzeile: Legen Sie die Hintergrundfarbe der Kopfzeile des Warenkorbs fest.
- Schriftart für Kopfzeile: Wählen Sie die Schriftart für den Text in der Kopfzeile des Warenkorbs aus.
- Header-Farbe: Legen Sie die Textfarbe der Kopfzeile des Warenkorbs fest.
Schritt 3: Design anpassen
Auf der Registerkarte „Erweitert“ können Sie das Layout und Verhalten Ihres Warenkorb-Blocks weiter anpassen.
Abstand:
- Rand: Legen Sie den äußeren Abstand um den Block herum auf allen vier Seiten fest, mit unabhängigen Steuerelementen für Desktop, Tablet und Mobilgeräte.
- Abstand: Legen Sie den inneren Abstand innerhalb des Block-Wrappers an allen vier Seiten fest, mit gerätespezifischen Steuerelementen.
Attribute:
- Benutzerdefinierte Klasse: Fügen Sie dem Block-Wrapper eine oder mehrere benutzerdefinierte CSS-Klassen hinzu, um ein gezieltes Styling zu erzielen.
- CSS-ID: SeedProd generiert automatisch eine eindeutige CSS-ID für diesen Block. Sie können diese ID 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 Format Schlüssel|Wert ein.
Geräte-Sichtbarkeit:
- Auf dem Desktop ausblenden: Umschalten, um den Block bei der Anzeige auf Desktop-Bildschirmen auszublenden.
- Auf Tablet ausblenden: Umschalten, um den Block bei der Anzeige auf Tablet-Bildschirmen auszublenden.
- Auf Mobilgeräten ausblenden: Schalten Sie diese Option ein, um den Block auf Mobilgeräten auszublenden.
Animationseffekte:
- Scroll-Effekt: Wende eine scroll-gesteuerte Animation auf den Block an, einschließlich Optionen für vertikales und horizontales Scrollen mit Steuerelementen für Richtung, Geschwindigkeit und Viewport-Offset.
- Mouse Effect: Wende einen durch Mausbewegungen gesteuerten Parallax-Effekt auf den Block an.
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 die festgelegte Warenkorbseite fest. Dadurch wird sichergestellt, dass Kunden zu Ihrer benutzerdefinierten Warenkorbseite weitergeleitet werden, wenn sie auf das Warenkorb-Symbol klicken oder von einer Produktseite aus fortfahren.
Schritt 5: Speichern Sie Ihre Änderungen
Wenn Sie die Konfiguration des Warenkorb-Blocks und die Anpassung seines Erscheinungsbilds abgeschlossen haben, speichern Sie Ihre Arbeit.
Sie haben erfolgreich einen Warenkorb-Block zu Ihrer Seite hinzugefügt! Mit vollständiger Kontrolle über Schaltflächenstile, Feldfarben, Typografie und das Design des Warenkorb-Containers können Sie ein WooCommerce-Warenkorb-Erlebnis schaffen, das sich vollkommen wie ein Teil Ihrer Marke anfühlt. Vergessen Sie nicht, die Seite in den WooCommerce-Einstellungen als Ihre Warenkorb-Seite festzulegen, damit Ihre Kunden immer an der richtigen Stelle landen.