Der Archivprodukte-Block ermöglicht es Ihnen, ein Raster von WooCommerce-Produkten auf Ihren Produktarchivvorlagen anzuzeigen. Dieser Block zeigt automatisch Produktlisten auf Shop-Seiten, Kategorie-Archiven, Tag-Archiven und anderen Produktkollektionsseiten mit anpassbaren Layouts und Filteroptionen an.
Dieser Block ist unerlässlich für die Erstellung benutzerdefinierter Produktarchivvorlagen, bei denen Sie die vollständige Kontrolle darüber haben möchten, wie Ihre Produkte angezeigt werden. Sie können die Anzahl der Spalten anpassen, die Paginierung aktivieren, Sortieroptionen hinzufügen und filtern, welche Produkte basierend auf Kategorien, Tags, Attributen oder anderen Kriterien angezeigt werden, um ein Einkaufserlebnis zu schaffen, das perfekt zu Ihrer Marke passt.
Hinzufügen des Archivprodukte-Blocks zu Ihren Seiten
Befolgen Sie diese Schritte, um einen Archivprodukte-Block zu Ihrer SeedProd-Produktarchivvorlage hinzuzufügen:
Schritt 1: Block hinzufügen
Ziehen Sie unter Design > Blöcke > WooCommerce-Vorlagenelemente den Block Archivprodukte per Drag & Drop in den gewünschten Bereich Ihrer Produktarchivvorlage.
Der Archivprodukte-Block befindet sich unter WooCommerce-Vorlagenelemente und kann zu Ihrer Produktarchivvorlage hinzugefügt werden.
Schritt 2: Inhaltseinstellungen konfigurieren
Nach dem Hinzufügen klicken Sie auf den Archivprodukte-Block, um seine Einstellungen zu öffnen. Im Tab Inhalt können Sie konfigurieren, wie Produkte angezeigt und gefiltert werden.
Layout-Einstellungen:
- Spalten: Legen Sie die Anzahl der Spalten in Ihrem Produktgitter fest. Mehr Spalten passen mehr Produkte pro Zeile, während weniger Spalten jedem Produkt mehr Hervorhebung verleihen. Gängige Layouts sind 3 oder 4 Spalten.
- Paginierung: Schalten Sie um, um Paginierungssteuerelemente zu aktivieren oder zu deaktivieren. Wenn aktiviert, werden Produkte über mehrere Seiten mit Navigationsschaltflächen aufgeteilt.
- Anzahl der Elemente anzeigen: Schalten Sie um, um die Gesamtzahl der gefundenen Produkte anzuzeigen (z. B. „Anzeige 1-12 von 48 Ergebnissen“).
- Sortieren nach anzeigen: Schalten Sie um, um ein Dropdown-Menü anzuzeigen, mit dem Besucher Produkte nach Kriterien wie Beliebtheit, Bewertung, Preis oder Neuheit sortieren können.
- Limit: Legen Sie die maximale Anzahl der pro Seite anzuzeigenden Produkte fest. Dies funktioniert mit der Paginierung, um zu bestimmen, wie viele Produkte angezeigt werden, bevor Besucher auf „Weiter“ klicken müssen.
Abfrage:
- Typ: Stellen Sie auf „Archivprodukte“ ein, um Produkte basierend auf dem aktuell angezeigten Archiv (Kategorie, Tag usw.) anzuzeigen.
- Abfragen nach: Wählen Sie aus, wie gefiltert werden soll, welche Produkte angezeigt werden. Optionen sind Attribut (Filtern nach Produktattributen), Tags (Produkte mit bestimmten Tags anzeigen), Kategorie (Produkte aus bestimmten Kategorien anzeigen), SKU (Filtern nach Produkt-SKU), Gruppe (Filtern nach Produktgruppierungen) oder Sichtbarkeit (Steuern, welche Produkte basierend auf den Einstellungen zur Katalog-Sichtbarkeit angezeigt werden).
- Nach Tags auswählen: Wenn Sie nach Tags abfragen, wählen Sie aus, welche Produkttags ein- oder ausgeschlossen werden sollen.
- Nach Kategorie auswählen: Wenn Sie nach Kategorie abfragen, wählen Sie aus, welche Produktkategorien angezeigt werden sollen
- Nach SKU auswählen: Wenn Sie nach SKU abfragen, geben Sie bestimmte Produkt-SKUs ein, die angezeigt werden sollen
- Nach Gruppe auswählen: Wenn Sie nach Gruppe abfragen, wählen Sie Produktgruppierungen zum Filtern aus
- Nach Sichtbarkeit auswählen: Steuern Sie, ob Produkte angezeigt werden sollen, die als im Katalog sichtbar, in der Suche sichtbar, ausgeblendet oder hervorgehoben gekennzeichnet sind
Der Tab "Inhalt" ermöglicht es Ihnen, Spalten, Paginierung, Produktlimits und Filteroptionen für Ihr Produktarchiv zu konfigurieren.
Schritt 3: Design anpassen
Im Tab Erweitert können Sie das visuelle Erscheinungsbild Ihres Blocks "Archivprodukte" anpassen:
Stile:
- Ausrichtung: Legen Sie die horizontale Ausrichtung für Produktelemente innerhalb des Rasters fest (links, mitte oder rechts)
- Typografie Beschreibung: Steuern Sie die Schriftarteigenschaften für Produktbeschreibungen, einschließlich Schriftfamilie, Größe, Schriftschnitt und Stil
- Typografie Preis: Passen Sie die Schriftarteigenschaften für Produktpreise an
- Farbe Preis: Legen Sie die Farbe für Produktpreise fest, damit sie hervorstechen
- Farbe Sale-Badge: Wählen Sie die Farbe für Sale-Badges, die auf reduzierten Produkten angezeigt werden
Schaltfläche:
- Button-Stil: Wählen Sie den visuellen Stil für "In den Warenkorb"-Buttons. Optionen sind Flat (modernes flaches Design), 2D (subtile Tiefe), Vintage (klassischer Look), Ghost (transparent mit Rahmen) oder Link (einfacher Textlink)
- Farbe Button: Legen Sie die Hintergrundfarbe für Produktbuttons fest
- Typografie Button: Passen Sie die Schriftarteigenschaften für Button-Text an
- Button-Größe: Wählen Sie die Button-Größe aus Klein, Mittel, Groß, X-Groß oder 2X-Groß
- Radius Ecken: Steuern Sie die Rundung von Button-Ecken. Höhere Werte erzeugen rundere Buttons
Bild:
- Schatten: Fügen Sie Schatteneffekte zu Produktbildern hinzu, um Tiefe zu erzeugen. Wählen Sie aus Keine, Haarlin, Klein, Mittel, Groß, X-Groß, 2X-Groß oder Schatten unten
- Rahmen Bild: Aktivieren Sie Rahmen um Produktbilder
- Radius Ecken: Steuern Sie die Rundung von Bild-Ecken
- Rahmenstil: Wählen Sie das Aussehen des Rahmens: Durchgezogen (kontinuierliche Linie), Gepunktet (kleine Punkte) oder Gestrichelt (kurze Striche)
- Farbe Rahmen: Wählen Sie die Farbe für Bild-Rahmen
- Breite Rahmen: Legen Sie die individuelle Rahmenstärke für jede Seite fest (Oben, Rechts, Unten, Links)
- Abstand Bild: Fügen Sie internen Abstand um Produktbilder hinzu, um Platz zum Atmen zu schaffen
Abstand:
- Abstand Außen: Steuern Sie den äußeren Abstand um Ihren Block "Archivprodukte" (Oben, Rechts, Unten, Links). Dies bestimmt, wie viel Platz zwischen dem Produkt-Raster und den umgebenden Elementen erscheint
- Abstand Innen: Passen Sie den inneren Abstand innerhalb Ihres Blocks "Archivprodukte" an (Oben, Rechts, Unten, Links). Dies schafft Platz zwischen dem Produkt-Raster und den Blockrändern
Attribute:
- CSS-ID: Zeigt die automatisch generierte eindeutige Kennung für Ihren Block "Archivprodukte" an. Diese ID wird automatisch von SeedProd für benutzerdefinierte Stile oder JavaScript-Zielgruppen erstellt
- Benutzerdefinierte Klasse: Fügen Sie benutzerdefinierte CSS-Klassen hinzu, um bestimmte Stile aus Ihrem Theme oder benutzerdefinierten CSS anzuwenden.
- Benutzerdefinierte Attribute: Fügen Sie dem Block-Wrapper-Element beliebige HTML-Attribute hinzu. Geben Sie jedes Attribut in eine neue Zeile im Format ein: attribut-name|wert (z. B. data-products|archive)
Gerätesichtbarkeit:
- Auf dem Desktop ausblenden: Blenden Sie den Archivprodukte-Block auf Desktop-Bildschirmen aus
- Auf Tablets ausblenden: Blenden Sie den Archivprodukte-Block auf Tablet-Geräten aus
- Auf Mobilgeräten ausblenden: Blenden Sie den Archivprodukte-Block auf Mobilgeräten aus
Animationseffekte:
- Eingabeanimation: Wählen Sie aus verschiedenen Animationseffekten, die abgespielt werden, wenn das Produktgitter in die Ansicht gescrollt wird. Optionen sind Bounce, Fade In, Zoom In, Rotate In und viele mehr. Dies lenkt die Aufmerksamkeit auf Ihre Produktangebote
Die Registerkarte „Erweitert“ bietet umfangreiche Styling-Optionen für Produktlayout, Typografie, Schaltflächen, Bilder, Abstände und Animationen.
Schritt 4: Speichern Sie Ihre Änderungen
Wenn Sie die Konfiguration des Archivprodukte-Blocks abgeschlossen und sein Erscheinungsbild angepasst haben, stellen Sie sicher, dass Sie Ihre Arbeit speichern.
Sie haben erfolgreich einen Archivprodukte-Block zu Ihrer Produktarchivvorlage hinzugefügt! Dieser leistungsstarke Block zeigt automatisch Ihre WooCommerce-Produkte in einem anpassbaren Gitterlayout mit Filter-, Sortier- und Paginierungsoptionen an. Experimentieren Sie mit verschiedenen Spaltenlayouts, Schaltflächenstilen und Abfrageeinstellungen, um ein Produktarchiv zu erstellen, das perfekt zu Ihrer Marke passt und den Kunden hilft, genau das zu finden, wonach sie suchen.