Der Produkt-Metablock zeigt die Metadaten an, die jedem WooCommerce-Produkt auf Ihren Einzelproduktvorlagen zugeordnet sind. Dazu gehören Informationen wie Produktkategorien, Tags und SKU – Details, die Kunden helfen, mehr über ein Produkt zu erfahren und verwandte Artikel zu finden.
Dieser Block ist ausschließlich für die Verwendung auf Einzelproduktvorlagen konzipiert und ruft dynamisch die richtigen Metadaten für jedes Produkt ab. Sie können festlegen, wie die Metadaten angeordnet werden, den Abstand und die Ausrichtung steuern, Text- und Linkfarben anpassen und ein Trennzeichen zwischen Inline-Elementen hinzufügen – so haben Sie die volle Kontrolle darüber, wie Produktdetails dargestellt werden.
Hinzufügen des Produkt-Metablocks zu Ihren Seiten
Befolgen Sie diese Schritte, um einen Produkt-Metablock zu Ihrer SeedProd-Einzelproduktvorlage hinzuzufügen:
Schritt 1: Block hinzufügen
Ziehen Sie unter Design > Blöcke > WooCommerce-Vorlagentags den Produkt-Meta-Block 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. Der Tab Inhalt ist in zwei Abschnitte unterteilt – Layout zur Steuerung der Anzeige von Metadaten und Layout-Einstellungen zur Feinabstimmung von Typografie und Farben.
Layout:
- Ansicht: Wählen Sie, wie die Metadaten-Elemente angeordnet werden. Tabelle zeigt jedes Element in einem zweispaltigen Label/Wert-Layout an. Gestapelt platziert das Label über dem Wert in einem vertikalen Stapel. Inline zeigt alle Elemente nebeneinander in einer einzigen Zeile an, getrennt durch das Trennzeichen.
- Abstand dazwischen: Legen Sie den vertikalen Abstand (1–100px) zwischen jeder Metadatenzeile fest, wenn Sie die Ansicht Tabelle oder Gestapelt verwenden.
- Ausrichtung: Legen Sie die horizontale Ausrichtung des Metadateninhalts fest – Links, Mitte oder Rechts.
- Trennzeichen: Geben Sie ein Zeichen oder Symbol ein, das Metadaten-Elemente in der Inline-Ansicht trennt (Standard ist ein Komma). Sie können jedes Zeichen verwenden, z. B. einen senkrechten Strich (|), einen Gedankenstrich (–) oder einen Punkt (•).
Layout-Einstellungen:
- Texttypografie: Legen Sie Schriftfamilie, Größe, Schriftschnitt, Zeilenhöhe und Buchstabenabstand für die normalen Textteile der Metadaten fest (z. B. Labels wie „Kategorie:“ oder „SKU:“).
- Textfarbe: Legen Sie die Farbe des normalen Metadatentextes fest.
- Linktypografie: Legen Sie die Typografie für Metadatenwerte fest, die als klickbare Links angezeigt werden (z. B. Kategorien- und Tagnamen).
- Linkfarbe: Legen Sie die Farbe des Metadaten-Linktexts fest, damit er sich visuell vom umgebenden Labeltext abhebt.
- Trennzeichentypografie: Legen Sie die Schriftgröße und den Stil des Trennzeichens fest, das zwischen Inline-Metadaten-Elementen verwendet wird.
- Trennfarbe: Legt die Farbe des Trennzeichens zwischen Inline-Metadaten-Elementen fest.
Schritt 3: Design anpassen
Im Tab Erweitert können Sie den Block weiter gestalten mit Hintergrundoptionen, Rahmen, Abständen und Sichtbarkeitsreglern.
Hintergrund:
- Hintergrund: Legt eine Hintergrundfarbe, einen Verlauf oder ein Bild hinter dem gesamten Produkt-Meta-Block fest. Dies ist nützlich, um den Metadatenbereich visuell vom umgebenden Inhalt auf der Produktseite zu trennen.
Abstand:
- Abstand (Außen): Steuert den äußeren Abstand um Ihren Produkt-Meta-Block (Oben, Rechts, Unten, Links). Dies bestimmt, wie viel Platz zwischen den Metadaten und den umgebenden Elementen auf der Seite vorhanden ist.
- Abstand (Innen): Passt den inneren Abstand innerhalb Ihres Produkt-Meta-Blocks an (Oben, Rechts, Unten, Links). Dies schafft Freiraum zwischen dem Metadateninhalt und den Blockrändern.
Attribute:
- CSS-ID: Zeigt die automatisch generierte eindeutige Kennung für Ihren Produkt-Meta-Block 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 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-meta|produkt).
Rahmen:
- Abgerundete Ecken: Legt die Abrundung der Ecken für den Produkt-Meta-Block fest.
- Rahmenstil: Wählen Sie einen Rahmenstil – Durchgezogen, Gepunktet oder Gestrichelt.
- Rahmenfarbe: Legt die Rahmenfarbe für den Block fest.
- Rahmenbreite: Legen Sie die Dicke des Rahmens pro Seite fest (Oben, Rechts, Unten, Links).
Gerätesichtbarkeit:
- Auf Desktop ausblenden: Blendet den Produkt-Meta-Block auf Desktop-Bildschirmen aus.
- Auf Tablet ausblenden: Blendet den Produkt-Meta-Block auf Tablet-Geräten aus.
- Auf Mobilgeräten ausblenden: Blendet den Produkt-Meta-Block auf Mobilgeräten aus.
Animationseffekte:
- Eingangs-Animation: Wählen Sie aus verschiedenen Animationseffekten, die abgespielt werden, wenn der Produkt-Meta-Block ins Sichtfeld scrollt. Optionen sind Bounce, Fade In, Zoom In, Rotate In und viele mehr.
Schritt 4: Speichern Sie Ihre Änderungen
Wenn Sie die Konfiguration des Produkt-Meta-Blocks abgeschlossen und sein Aussehen angepasst haben, stellen Sie sicher, dass Sie Ihre Arbeit speichern.
Sie haben erfolgreich einen Produkt-Meta-Block zu Ihrer Single Product Template hinzugefügt! Der Block ruft automatisch Kategorien, Tags, SKU und andere Produktmetadaten direkt von WooCommerce für jedes Produkt ab. Experimentieren Sie mit dem Layout, den Linkfarben und den Trenneinstellungen, um Produktmetadaten so darzustellen, dass sie zum Design Ihres Shops passen und den Käufern helfen, verwandte Produkte schnell zu finden.