Mit dem Block „Verwandte Produkte“ können Sie verwandte Produkte in Ihren WooCommerce-Vorlagen für einzelne Produkte anzeigen. WooCommerce ermittelt verwandte Produkte automatisch anhand der Kategorien und Tags, die jedem Produkt zugewiesen sind. Wenn Sie also ein Produkt einer Kategorie zuordnen oder ein Tag hinzufügen, wird sichergestellt, dass nur Produkte aus derselben Kategorie oder Tag-Gruppe angezeigt werden.
Dieser Block ist ausschließlich für die Verwendung in Vorlagen für einzelne Produkte vorgesehen. Über die Registerkarte „Erweitert“ können Sie steuern, wie viele Produkte angezeigt werden und wie sie sortiert werden, und die Typografie, die Schaltflächenstile und die Bilddarstellung des Rasters vollständig anpassen.
Hinzufügen des Blocks „Verwandte Produkte“ zu Ihren Seiten
Befolgen Sie diese Schritte, um einen Block „Produkte“ zu Ihrer SeedProd-Vorlage für einzelne Produkte hinzuzufügen:
Schritt 1: Block hinzufügen
Ziehen Sie unter „Design > Blöcke > WooCommerce-Vorlagen-Tags“ den Block „Produkte“ per Drag & Drop in den gewünschten Abschnitt Ihrer Einzelproduktvorlage.
Schritt 2: Einstellungen konfigurieren
Nach dem Hinzufügen klicken Sie auf den Block „Produkte“ , um dessen 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 sollen – nach Datum, ID, Menüfolge, Beliebtheit, Zufall, Bewertung oder Titel.
- Reihenfolge: Legen Sie die Sortierreihenfolge fest – ASC (aufsteigend) oder DESC (absteigend).
Schritt 3: Design anpassen
Auf der Registerkarte „Erweitert“ können Sie das Erscheinungsbild Ihres Blocks „Produkte“ anpassen. Die Einstellungen sind in drei Abschnitte unterteilt.
Stile:
- Ausrichtung: Legen Sie die horizontale Ausrichtung des Rasters für verwandte Produkte fest – links, mittig oder rechts – mit gerätespezifischen Steuerelementen für Desktop-PCs, Tablets und Mobilgeräte.
- Titeltypografie: Legen Sie die Schriftfamilie, Größe, Zeilenhöhe, Buchstabenabstand, Schriftstärke, Schriftstil und Groß-/Kleinschreibung für den Produkttiteltext fest.
- Beschreibung Typografie: Legen Sie die Schriftart, Größe, Zeilenhöhe, Zeichenabstand, Schriftstärke, Stil und Groß-/Kleinschreibung für den Produktbeschreibungstext fest.
- Preistypografie: Legen Sie die Schriftfamilie, Größe, Zeilenhöhe, Buchstabenabstand, Schriftstärke, Stil und Groß-/Kleinschreibung für den Produktpreistext fest.
- Preis Farbe: Legen Sie die Farbe des regulären Produktpreises fest.
- Verkaufsfarbe: Legen Sie die Farbe des Verkaufspreises fest, wenn ein Produkt rabattiert ist.
Schaltfläche:
- Schaltflächenstil: Wählen Sie einen visuellen Stil für die Schaltfläche „Zum Warenkorb hinzufügen“ – Flach, 2D, Vintage, Ghost oder Link.
- Schaltflächenfarbe: Legen Sie die Hintergrundfarbe der Schaltfläche „Zum Warenkorb hinzufügen“ fest.
- Schaltflächentypografie: Legen Sie die Schriftfamilie, Größe, Zeilenhöhe, Buchstabenabstand, Schriftstärke, Schriftstil und Groß-/Kleinschreibung für den Schaltflächentext fest.
- Schaltflächengröße: Wählen Sie eine voreingestellte Schaltflächengröße – Klein, Mittel, Groß, Sehr groß oder 2X Groß.
- Border Radius: Passen Sie die Eckenrundung der Schaltfläche „Zum Warenkorb hinzufügen” mithilfe eines Schiebereglers an.
Bild:
- Schatten: Wenden Sie einen Schatten auf Produktbilder an, indem Sie voreingestellte Größen verwenden – Keine, Haarlinie, Klein, Mittel, Groß, X Groß, 2X Groß oder Unterer Schlagschatten.
- Rahmenstil: Legen Sie den Rahmenstil für Produktbilder fest – durchgehend, gepunktet oder gestrichelt.
- Bildrahmenfarbe: Legen Sie die Farbe des Produktbildrahmens fest.
- Bildrandbreite: Legen Sie die Randstärke auf jeder Seite (oben, rechts, unten, links) des Produktbildes fest.
- Bild-Weißraum-Abstand: Fügen Sie einen inneren Abstand um Produktbilder innerhalb ihres Rahmens hinzu.
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: Speichern Sie Ihre Änderungen
Wenn Sie die Konfiguration des Blocks „Produkte“ abgeschlossen und dessen Erscheinungsbild angepasst haben, speichern Sie Ihre Arbeit.
Sie haben erfolgreich einen Block mit produktbezogenen Artikeln zu Ihrer Einzelproduktvorlage hinzugefügt! Die Anzeige verwandter Produkte ist eine bewährte Methode, um den durchschnittlichen Bestellwert zu steigern und Kunden dazu zu bewegen, Ihren Katalog weiter zu durchsuchen. Stellen Sie sicher, dass Ihre Produkte mit einheitlichen Kategorien und Tags organisiert sind, damit WooCommerce für jeden Artikel die relevantesten Empfehlungen anzeigen kann.