Der Produktbewertungsblock zeigt die Sternebewertung für ein WooCommerce-Produkt auf Ihren Einzelproduktvorlagen an. Er zieht Bewertungsdaten direkt aus dem Reiter „Bewertungen“ jedes Produkts und gibt Besuchern einen sofortigen visuellen Hinweis auf die Kundenzufriedenheit, ohne die Produktseite verlassen zu müssen.
Dieser Block ist ausschließlich für die Verwendung in Einzelproduktvorlagen konzipiert. Stellen Sie sicher, dass WooCommerce installiert ist und Produktbewertungen aktiviert sind, bevor Sie ihn verwenden. Sie können die Sterngröße, 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-Einzelproduktvorlage hinzuzufügen:
Schritt 1: Block hinzufügen
Ziehen Sie unter Design > Blöcke > WooCommerce-Vorlagentags > Zusätzliche Informationen den Produktbewertung-Block per Drag & Drop in den gewünschten Bereich Ihrer Einzelproduktvorlage.
Schritt 2: Inhaltseinstellungen konfigurieren
Sobald der Block hinzugefügt wurde, klicken Sie darauf, um seine Einstellungen zu öffnen. Im Tab Inhalt finden Sie im Abschnitt Sternebewertung die folgenden Optionen:
- Ausrichtung: Legen Sie die horizontale Ausrichtung der Sternebewertung fest – Links, Mitte oder Rechts – mit gerätespezifischen Steuerelementen für Desktop, Tablet und Mobilgeräte.
- Größe: Legen Sie die Größe der Sternsymbole mit einem Schieberegler fest.
- Abstand dazwischen: Legen Sie den horizontalen Abstand zwischen einzelnen Sternen mit einem Schieberegler fest.
Schritt 3: Design anpassen
Im Tab Erweitert können Sie das visuelle Erscheinungsbild Ihres Produktbewertungsblocks anpassen.
Stile:
- Sternfarbe: Legen Sie die Füllfarbe der aktiven (ausgefüllten) Sterne fest.
- Farbe des leeren Sterns: Legen Sie die Farbe der nicht ausgefüllten Sterne fest.
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
Wenn Sie die Konfiguration des Produktbewertungsblocks abgeschlossen und sein Erscheinungsbild angepasst haben, speichern Sie Ihre Arbeit.
Sie haben erfolgreich einen Produktbewertungsblock zu Ihrer Einzelproduktvorlage hinzugefügt! Sternebewertungen sind ein starkes Vertrauenssignal, das Kunden hilft, sichere Kaufentscheidungen zu treffen. Passen Sie die Sternfarben und -größe an, damit die Bewertungsanzeige wie ein natürlicher Teil Ihres Produktseiten-Designs wirkt.