SeedProd-Dokumentation

Dokumentation, Referenzmaterialien und Tutorials für SeedProd

Produkt-Inhaltsblock (WooCommerce)

Der Block „Produktinhalt“ zeigt die vollständige Produktbeschreibung für WooCommerce-Produkte in Ihren Einzelproduktvorlagen an. Er ruft die Produktbeschreibung für jedes Produkt dynamisch aus WooCommerce ab, sodass immer der richtige Inhalt angezeigt wird, ohne dass manuelle Aktualisierungen erforderlich sind.

Dieser Block ist ausschließlich für die Verwendung in Einzelproduktvorlagen vorgesehen. Sie können ihn unverändert verwenden, um die Produktbeschreibung genau so anzuzeigen, wie sie in WooCommerce eingegeben wurde, oder Sie können ergänzenden Text und Formatierungen um den Shortcode herum hinzufügen, um die Darstellung der Inhalte auf Ihren Produktseiten anzupassen.

Produktinhaltsblock, der eine WooCommerce-Produktbeschreibung anzeigt

Anforderungen:Der Produktinhaltsblock ist in unseremElite-Lizenzplan verfügbar. Bevor Sie beginnen, stellen Sie sicher, dass WooCommerce auf Ihrer WordPress-Website installiert und aktiviert ist.


Hinzufügen des Produktinhaltsblocks zu Ihren Seiten

Befolgen Sie diese Schritte, um einen Produktinhaltsblock zu Ihrer SeedProd-Einzelproduktvorlage hinzuzufügen:

Schritt 1: Block hinzufügen

Ziehen Sie unter „Design > Blöcke > WooCommerce-Vorlagen-Tags“ den Block „Produktinhalt“ per Drag & Drop in den gewünschten Abschnitt Ihrer Seite.

Ziehen Sie den Block „Produktinhalt“ auf eine SeedProd-Vorlage für einzelne Produkte.

Schritt 2: Inhaltseinstellungen konfigurieren

Sobald Sie ihn hinzugefügt haben, klicken Sie auf den Block „Produktinhalt“, um dessen Einstellungen zu öffnen. Auf der Registerkarte „Inhalt“ finden Sie einen Textbereich, der bereits mit dem SeedProd-Shortcode vorbelegt ist, der die WooCommerce-Produktbeschreibung dynamisch abruft.

Text:

  • Inhaltsfeld: Enthält die Standardmäßig wird ein Shortcode verwendet. Dieser Shortcode ruft für jedes Produkt dynamisch die Produktbeschreibung aus WooCommerce ab – entfernen Sie ihn nicht, es sei denn, Sie möchten den Produktinhalt vollständig ersetzen. Sie können zusätzlichen Text, HTML-Code oder Formatierungen über oder unter dem Shortcode hinzufügen, um die Produktbeschreibung zu ergänzen.
  • Visueller Editor / HTML bearbeiten: Wechseln Sie zwischen einem visuellen Rich-Text-Editor (für formatierten Text mit Symbolleistensteuerelementen) und dem HTML-Editor (für die direkte Bearbeitung von Code). In beiden Modi können Sie mit dem dynamischen Shortcode arbeiten.
  • Ausrichtung: Legen Sie die horizontale Ausrichtung des Textinhalts fest – links, mittig oder rechts. Unterstützt die gerätespezifische Ausrichtung für Desktop-PCs, Tablets und Mobilgeräte.
  • Schriftgröße: Stellen Sie die Grundschriftgröße für den Inhaltsbereich mit dem Schieberegler ein (10–72 px).
Produktinhalt-Block Einstellungen für die Registerkarte „Inhalt“ mit dem WooCommerce-Shortcode

Schritt 3: Design anpassen

Auf der Registerkarte „Erweitert“ können Sie die Typografie, Farbe und visuelle Gestaltung Ihres Produktinhaltsblocks anpassen.

Stile:

  • Typografie: Legen Sie die Schriftart, Größe, Stärke, Zeilenhöhe, Zeichenabstand und den Stil für den Produktinhaltstext fest.
  • Farbe: Legen Sie die Textfarbe für den Inhalt der Produktbeschreibung fest.
  • Textschatten: Fügen Sie dem Text einen Schatteneffekt hinzu – wählen Sie zwischen „Keine“, „Haarfein“, „Klein“, „Mittel“, „Groß“, „X Groß“ oder „2X Groß“.
  • Schatten: Füge dem gesamten Block einen Kastenschatten hinzu, um einen subtilen Tiefeneffekt zu erzielen.

Abstand:

  • Rand: Steuert den äußeren Abstand um Ihren Produktinhaltsblock (oben, rechts, unten, links). Damit legen Sie fest, wie viel Platz zwischen der Produktbeschreibung und den umgebenden Elementen auf der Seite angezeigt wird.
  • Abstand: Passen Sie den inneren Abstand innerhalb Ihres Produktinhaltsblocks an (oben, rechts, unten, links). Dadurch entsteht ein Luftraum zwischen dem Beschreibungstext und den Blockrändern.

Attribute:

  • CSS-ID: Zeigt die automatisch generierte eindeutige Kennung für Ihren Produktinhaltsblock an. Diese ID wird automatisch von SeedProd für benutzerdefiniertes Styling oder JavaScript-Targeting erstellt.
  • Benutzerdefinierte Klasse: Fügen Sie benutzerdefinierte CSS-Klassen hinzu, um bestimmte Stile aus Ihrem Theme oder benutzerdefiniertem CSS anzuwenden.
  • Benutzerdefinierte Attribute: Fügen Sie beliebige HTML-Attribute zum Block-Wrapper-Element hinzu. Geben Sie jedes Attribut in einer neuen Zeile im folgenden Format ein: Attributname|Wert (z. B. data-section|description).

Geräte-Sichtbarkeit:

  • Auf dem Desktop ausblenden: Blendet den Block „Produktinhalt“ auf Desktop-Bildschirmen aus.
  • Auf Tablet ausblenden: Blendet den Produktinhaltsblock auf Tablet-Geräten aus.
  • Auf Mobilgeräten ausblenden: Blendet den Produktinhaltsblock auf Mobilgeräten aus.

Animationseffekte:

  • Eingangsanimation: Wählen Sie aus verschiedenen Animationseffekten, die abgespielt werden, wenn der Produktinhaltsblock in den Blickbereich scrollt. Zu den Optionen gehören „Hüpfen“, „Einblenden“, „Vergrößern“, „Eindrehen“ und viele mehr.
Produktinhalt-Block Erweiterte Registerkarteneinstellungen

Schritt 4: Speichern Sie Ihre Änderungen

Wenn Sie die Konfiguration des Produktinhaltsblocks und die Anpassung seines Erscheinungsbilds abgeschlossen haben, speichern Sie Ihre Arbeit.


Sie haben erfolgreich einen Produktinhaltsblock zu Ihrer Einzelproduktvorlage hinzugefügt! Der Block zeigt automatisch die richtige Produktbeschreibung für jedes Produkt an und stellt so sicher, dass Ihre WooCommerce-Seiten immer korrekte und aktuelle Inhalte anzeigen. Verwenden Sie die Steuerelemente für Typografie und Abstände, um die Beschreibung so zu gestalten, dass sie sich nahtlos in das Design Ihrer Produktseite einfügt.

Verwandte Artikel