Der Produkte verwandter Block ermöglicht es Ihnen, verwandte Produkte in Ihren WooCommerce Single Product-Vorlagen anzuzeigen. WooCommerce ermittelt automatisch verwandte Produkte basierend auf den Kategorien und Tags, die jedem Produkt zugewiesen sind. Wenn Sie also ein Produkt in eine Kategorie einfügen oder ein Tag hinzufügen, stellen Sie sicher, dass nur Produkte aus derselben Kategorie- oder Tag-Gruppe angezeigt werden.
Dieser Block ist ausschließlich für die Verwendung in Single Product-Vorlagen konzipiert. Sie können steuern, wie viele Produkte angezeigt werden, wie sie sortiert werden, und die Typografie, Schaltflächenstile und Bilddarstellung des Rasters vollständig über die Registerkarte "Erweitert" anpassen.
Hinzufügen des Produkts verwandter Block zu Ihren Seiten
Befolgen Sie diese Schritte, um einen Produkts verwandter Block zu Ihrer SeedProd Single Product-Vorlage hinzuzufügen:
Schritt 1: Block hinzufügen
Ziehen Sie unter Design > Blöcke > WooCommerce-Vorlagen-Tags den Produkte verwandter Block in den gewünschten Abschnitt Ihrer Single Product-Vorlage.
Schritt 2: Einstellungen konfigurieren
Nach dem Hinzufügen klicken Sie auf den Produkts verwandter Block, um seine Einstellungen zu öffnen. Auf der Registerkarte Einstellungen finden Sie die folgenden Optionen:
- Spalten: Legen Sie die Anzahl der Produktspalten fest, die im Raster der verwandten Produkte angezeigt werden sollen.
- Beiträge pro Seite: Legen Sie die maximale Anzahl der anzuzeigenden verwandten Produkte fest.
- Sortieren nach: Legen Sie fest, wie verwandte Produkte sortiert werden – nach Datum, ID, Menüreihenfolge, Beliebtheit, Zufall, Bewertung oder Titel.
- Reihenfolge: Legen Sie die Sortierrichtung fest – ASC (aufsteigend) oder DESC (absteigend).
Schritt 3: Design anpassen
Auf der Registerkarte Erweitert können Sie das visuelle Erscheinungsbild Ihres Produkts verwandter Blocks anpassen. Die Einstellungen sind in drei Abschnitte unterteilt.
Stile:
- Ausrichtung: Legen Sie die horizontale Ausrichtung des Rasters der verwandten Produkte fest – Links, Mitte oder Rechts – mit gerätespezifischen Steuerelementen für Desktop, Tablet und Mobilgeräte.
- Titel-Typografie: Legen Sie Schriftfamilie, Größe, Zeilenhöhe, Buchstabenabstand, Gewicht, Stil und Groß-/Kleinschreibung für den Produktiteltext fest.
- Typografie der Beschreibung: Legen Sie Schriftfamilie, Größe, Zeilenhöhe, Buchstabenabstand, Schriftschnitt, Stil und Groß-/Kleinschreibung für den Text der Produktbeschreibung fest.
- Schriftart für Preise: Legen Sie Schriftfamilie, Größe, Zeilenhöhe, Buchstabenabstand, Schriftschnitt, Stil und Groß-/Kleinschreibung für den Produktpreis fest.
- Farbe für Preise: Legen Sie die Farbe des regulären Produktpreises fest.
- Farbe für Angebote: Legen Sie die Farbe des Angebotspreises fest, wenn ein Produkt reduziert ist.
Schaltfläche:
- Button-Stil: Wählen Sie einen visuellen Stil für die Schaltfläche „In den Warenkorb“ – Flach, 2D, Vintage, Ghost oder Link.
- Button-Farbe: Legen Sie die Hintergrundfarbe der Schaltfläche „In den Warenkorb“ fest.
- Schriftart für Buttons: Legen Sie Schriftfamilie, Größe, Zeilenhöhe, Buchstabenabstand, Schriftschnitt, Stil und Groß-/Kleinschreibung für den Button-Text fest.
- Button-Größe: Wählen Sie eine voreingestellte Button-Größe – Klein, Mittel, Groß, X-Groß oder XX-Groß.
- Abgerundete Ecken: Passen Sie die Rundung der Ecken der Schaltfläche „In den Warenkorb“ mit einem Schieberegler an.
Bild:
- Schatten: Wenden Sie einen Schatten auf Produktbilder an, indem Sie vordefinierte Größen verwenden – Keine, Haarlin, Klein, Mittel, Groß, X-Groß, 2X-Groß oder Schatten unten.
- Rahmenstil: Legen Sie den Rahmenstil von Produktbildern fest – Durchgezogen, Gepunktet oder Gestrichelt.
- Bildrahmenfarbe: Legen Sie die Farbe des Produktbildrahmens fest.
- Rahmenbreite des Bildes: Legen Sie die Rahmenstärke auf jeder Seite (Oben, Rechts, Unten, Links) des Produktbildes fest.
- Leerraum-Abstand des Bildes: Fügen Sie einen inneren Abstand um Produktbilder innerhalb ihres Rahmens hinzu.
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: Speichern Sie Ihre Änderungen
Sobald Sie die Konfiguration des Produkte verwandter Block abgeschlossen und sein Erscheinungsbild angepasst haben, stellen Sie sicher, dass Sie Ihre Arbeit speichern.
Sie haben erfolgreich einen Produkts verwandter Block zu Ihrer Single Product-Vorlage hinzugefügt! Die Anzeige verwandter Produkte ist eine bewährte Methode, um den durchschnittlichen Bestellwert zu erhöhen und Kunden dazu zu bringen, Ihren Katalog weiter zu erkunden. Stellen Sie sicher, dass Ihre Produkte mit konsistenten Kategorien und Tags organisiert sind, damit WooCommerce die relevantesten Empfehlungen für jeden Artikel anzeigen kann.