Der Block „Produktbewertung“ zeigt die Sternebewertung für ein WooCommerce-Produkt in Ihren Einzelproduktvorlagen an. Er ruft die Bewertungsdaten direkt aus der Registerkarte „Bewertungen“ jedes Produkts ab und gibt Besuchern einen sofortigen visuellen Indikator für die Kundenzufriedenheit, ohne dass sie die Produktseite verlassen müssen.
Dieser Block ist ausschließlich für die Verwendung in Vorlagen für einzelne Produkte vorgesehen. Stellen Sie sicher, dass WooCommerce installiert und Produktbewertungen aktiviert sind, bevor Sie ihn verwenden. Sie können die Größe der Sterne, den Abstand und die Farben an das Branding Ihres Shops anpassen.
Hinzufügen des Produktbewertungsblocks zu Ihren Seiten
Befolgen Sie diese Schritte, um einen Produktbewertungsblock zu Ihrer SeedProd-Vorlage für einzelne Produkte hinzuzufügen:
Schritt 1: Block hinzufügen
Ziehen Sie unter „Design“ > „Blöcke“ > „WooCommerce-Vorlagen-Tags“ > „Zusätzliche Informationen“ den Block „Produktbewertung“ per Drag & Drop in den gewünschten Abschnitt Ihrer Einzelproduktvorlage.
Schritt 2: Inhaltseinstellungen konfigurieren
Klicken Sie nach dem Hinzufügen auf den Block „Produktbewertung“, um dessen Einstellungen zu öffnen. Auf der Registerkarte „Inhalt“ finden Sie unter dem Abschnitt „Sternbewertung“ die folgenden Optionen:
- Ausrichtung: Legen Sie die horizontale Ausrichtung der Sternebewertung fest – links, mittig oder rechts – mit gerätespezifischen Steuerelementen für Desktop, Tablet und Mobilgeräte.
- Größe: Stellen Sie die Größe der Sternsymbole mit einem Schieberegler ein.
- Abstand zwischen: Stellen Sie den horizontalen Abstand zwischen einzelnen Sternen mit einem Schieberegler ein.
Schritt 3: Design anpassen
Auf der Registerkarte „Erweitert“ können Sie das Erscheinungsbild Ihres Produktbewertungsblocks anpassen.
Stile:
- Sternfarbe: Legt die Füllfarbe der aktiven (gefüllten) Sterne fest.
- Farbe leerer Sterne: Legt die Farbe der nicht gefüllten Sterne fest.
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 Produktbewertungsblocks und die Anpassung seines Erscheinungsbilds abgeschlossen haben, speichern Sie Ihre Arbeit.
Sie haben erfolgreich einen Produktbewertungsblock zu Ihrer Einzelproduktvorlage hinzugefügt! Sternebewertungen sind ein starkes Vertrauenssignal, das Kunden dabei hilft, sichere Kaufentscheidungen zu treffen. Passen Sie die Farben und die Größe der Sterne an, damit sich die Bewertungsanzeige wie ein natürlicher Bestandteil Ihres Produktseitendesigns anfühlt.