Der Produktpreis-Block zeigt den Preis für jedes WooCommerce-Produkt auf Ihren Einzelproduktvorlagen an. Er ruft dynamisch den aktuellen Preis aus WooCommerce ab, einschließlich Sonderangeboten, sodass Käufer immer genaue Preise sehen, ohne dass Sie manuell etwas aktualisieren müssen.
Dieser Block ist ausschließlich für die Verwendung auf Einzelproduktvorlagen konzipiert. Über die reine Preisanzeige hinaus haben Sie die volle Kontrolle über Typografie, Farbe und Ausrichtung sowohl des regulären Preises als auch des Sonderangebots – einschließlich der Option, den ursprünglichen und den Sonderangebotspreis vertikal zu stapeln, damit Kunden den Rabatt sofort sehen.
Hinzufügen des Produktpreis-Blocks zu Ihren Seiten
Befolgen Sie diese Schritte, um einen Produktpreis-Block zu Ihrer SeedProd-Einzelproduktvorlage hinzuzufügen:
Schritt 1: Block hinzufügen
Ziehen Sie unter Design > Blöcke > WooCommerce-Vorlagen-Tags den Produktpreis-Block per Drag & Drop in den gewünschten Bereich Ihrer Einzelproduktvorlage.
Schritt 2: Inhaltseinstellungen konfigurieren
Nach dem Hinzufügen klicken Sie auf den Produktpreis-Block, um seine Einstellungen zu öffnen. Der Tab Inhalt ermöglicht es Ihnen, die Anzeige des regulären Preises oben zu gestalten, und erweitern Sie dann den Abschnitt Sonderangebotspreis, um zu konfigurieren, wie rabattierte Preise angezeigt werden.
Regulärer Preis:
- Typografie: Legen Sie Schriftfamilie, Größe, Schriftschnitt, Zeilenhöhe und Buchstabenabstand für den Produktpreistext fest.
- Farbe: Legen Sie die Textfarbe des regulären Preises fest.
- Ausrichtung: Legen Sie die horizontale Ausrichtung des Preises fest – Links, Mitte oder Rechts. Unterstützt geräteabhängige Ausrichtung für Desktop, Tablet und Mobilgeräte.
Sonderangebotspreis:
- Sonderangebotspreis-Typografie: Legen Sie Schriftfamilie, Größe, Schriftschnitt und Stil speziell für den Sonderangebotspreistext fest, damit er sich vom regulären Preis unterscheidet – zum Beispiel, indem er größer oder fetter gemacht wird, um das Angebot hervorzuheben.
- Farbe: Legen Sie die Textfarbe des Sonderangebotspreises fest. Verwenden Sie eine kontrastierende Farbe wie Rot oder Grün, um die Aufmerksamkeit auf den rabattierten Betrag zu lenken.
- Gestapelt: Aktivieren Sie diese Option, um den Sonderangebotspreis unter dem ursprünglichen (durchgestrichenen) Preis in einem vertikalen Stapel anstelle von nebeneinander anzuzeigen. Dieses Layout erleichtert es Käufern, den ursprünglichen und den rabattierten Preis auf einen Blick zu vergleichen.
- Abstand: Legen Sie den Abstand (1–100px) zwischen dem ursprünglichen Preis und dem Sonderangebotspreis fest, wenn die Option „Gestapelt“ aktiviert ist.
Schritt 3: Design anpassen
Im Tab Erweitert können Sie den Abstand, Attribute und die Sichtbarkeit Ihres Produktpreis-Blocks steuern.
Abstand:
- Abstand (Außen): Steuern Sie den äußeren Abstand um Ihren Produktpreis-Block (Oben, Rechts, Unten, Links). Dies bestimmt, wie viel Platz zwischen dem Preis und den umliegenden Elementen auf der Produktseite vorhanden ist.
- Abstand: Passen Sie den Innenabstand Ihres Produktpreis-Blocks an (Oben, Rechts, Unten, Links). Dies schafft Freiraum zwischen dem Preistext und den Blockrändern.
Attribute:
- CSS-ID: Zeigt die automatisch generierte eindeutige Kennung für Ihren Produktpreis-Block an. Diese ID wird automatisch von SeedProd für benutzerdefinierte Stile oder JavaScript-Ziele erstellt.
- Benutzerdefinierte Klasse: Fügen Sie benutzerdefinierte CSS-Klassen hinzu, um spezifische Stile aus Ihrem Theme oder benutzerdefinierten CSS anzuwenden.
- Benutzerdefinierte Attribute: Fügen Sie dem Wrapper-Element des Blocks HTML-Attribute hinzu. Geben Sie jedes Attribut in eine neue Zeile im Format ein: attribut-name|wert (z. B. data-price|produkt).
Gerätesichtbarkeit:
- Auf Desktop ausblenden: Blenden Sie den Produktpreis-Block auf Desktop-Bildschirmen aus.
- Auf Tablet ausblenden: Blenden Sie den Produktpreis-Block auf Tablet-Geräten aus.
- Auf Mobilgeräten ausblenden: Blenden Sie den Produktpreis-Block auf Mobilgeräten aus.
Animationseffekte:
- Eingabeanimation: Wählen Sie aus verschiedenen Animationseffekten, die abgespielt werden, wenn der Produktpreis-Block ins Sichtfeld gescrollt wird. Optionen sind Bounce, Fade In, Zoom In, Rotate In und viele mehr.
Schritt 4: Speichern Sie Ihre Änderungen
Wenn Sie die Konfiguration des Produktpreis-Blocks abgeschlossen und sein Aussehen angepasst haben, stellen Sie sicher, dass Sie Ihre Arbeit speichern.
Sie haben erfolgreich einen Produktpreis-Block zu Ihrer Einzelproduktvorlage hinzugefügt! Der Block zeigt automatisch den korrekten Preis für jedes Produkt an, einschließlich Sale-Preisen, wenn diese aktiv sind. Experimentieren Sie mit der Farbe des Sale-Preises, dem gestapelten Layout und den Typografieeinstellungen, um eine Preisanzeige zu erstellen, die Ihre Angebote hervorhebt und mehr Conversions in Ihrem WooCommerce-Shop erzielt.