Was sind Woo Module in Divi 5?
WooCommerce-Kategorieseiten funktionieren standardmäßig, aber das Layout ist oft eingeschränkt. Produktgitter, Kartenlayouts, Abstände, Typografie und Button-Stile werden meist von WooCommerce und deinem Theme gesteuert, weshalb tiefere Anpassungen oft das Bearbeiten von Templates oder CSS erfordern.
Divi 5 ändert das, indem es WooCommerce-Elemente in visuelle Bausteine verwandelt. Wir haben neue Woo-Produktmodule für Divi 5 veröffentlicht, die das Design von Produkt- und Kategorieseiten abdecken und dabei die Kompatibilität mit der Kernfunktionalität von WooCommerce beibehalten.
Das bedeutet, dass Du Produktelemente genau dort platzieren und gestalten kannst, wo Du möchtest, mit den gleichen Designkontrollen, die Du bereits in Divi verwendest.
Du kannst die Woo Module nutzen, um Produkt-Templates, Kategorie-Templates und breitere Shop-Erlebnisse neben Divi 5’s Warenkorb- und Checkout-Tools anzupassen.
Aufbau einer einfachen Woo-Kategorieseite in Divi 5
Es gibt zwei gute Ansätze für eine einfache Kategorieseite in Divi 5:
- Verwende das Woo Products Modul, wenn Du die schnellste Einrichtung und ein dynamisches Raster möchtest, das automatisch Produkte aus einer Kategorie zieht.
- Verwende einzelne Woo Module, wenn Du eine benutzerdefinierte Produktkarte für ausgewählte Artikel, empfohlene Produkte oder einen Kategorie-Landeabschnitt gestalten möchtest.
Wenn Du möchtest, dass jedes Produkt in einer Kategorie automatisch in einem vollständig benutzerdefinierten Kartenlayout angezeigt wird, verwende den Loop Builder.
Einrichtung Deines Theme Builder Templates
- Gehe zu Divi > Theme Builder und klicke auf Neues Template hinzufügen.
- Wähle Neues Template erstellen.
- In den ‚Use On‘-Einstellungen, scrolle zu ‚Produkte‘, wähle ‚Produkte in bestimmten Kategorien‘ und wähle die gewünschte Kategorie aus, z.B. ‚Dekor‘. Klicke auf ‚Template erstellen‘.
- Füge einen neuen ‚Custom Body‘ hinzu und bearbeite ihn mit dem Visual Builder.
Design 1: Bau eines dynamischen Kategorie-Rasters mit Woo Products
Dieses Verfahren ist am einfachsten und für die meisten Kategorieseiten am praktischsten. Das Woo Products Modul ist darauf ausgelegt, eine dynamische Galerie von WooCommerce-Produkten anzuzeigen und kann nach Kategorien gefiltert werden.
- Füge einen neuen Abschnitt hinzu und setze eine einspaltige Zeile ein.
- Öffne die Zeileneinstellungen und füge 60px Padding hinzu, um dem Layout Raum zu geben.
- Wende einen 8px Border-Radius an.
- Setze den Hintergrund auf Schwarz.
- Klicke auf den schwarzen Plus-Button innerhalb der Zeile, öffne die Woo Module und füge das Woo Products Modul ein.
- Im Content-Tab des Moduls setze ‚Product Type‘ auf ‚Product Category‘ und wähle ‚Dekor‘ unter ‚Included Categories‘. Das macht das Raster dynamisch.
Von hier aus kannst Du das Modul an Deine Marke anpassen. Gehe zu Design > Overlay und setze Icon-Farbe auf #FB7248. Setze die Overlay-Hintergrundfarbe auf #000000 bei 50 % Deckkraft.
Design 2: Bau eines kuratierten Produktbereichs mit einzelnen Woo Modulen
Dieser Ansatz bietet mehr visuelle Kontrolle, funktioniert jedoch anders. Anstatt ein dynamisches Archiv-Raster zu erstellen, kreierst Du eine benutzerdefinierte Karte für bestimmte Produkte, indem Du separate Woo Module kombinierst.
Das macht diese Methode geeigneter für empfohlene Produkte, redaktionelle Kategorie-Landeseiten oder einen kleinen kuratierten Bereich innerhalb eines Kategorietemplates.
- Füge einen neuen Abschnitt hinzu und setze eine vier-spaltige Zeile ein. Wende 60px Padding, einen 8px Border-Radius und einen weißen Hintergrund an.
- In die erste Spalte füge folgende Module in Reihenfolge hinzu: Woo Produktbild, Woo Produkttitel, Woo Produktpreis, Woo In den Warenkorb Button.
Öffne die Einstellungen des Woo Produktbilds und füge einen 8px Border-Radius zum Sale Badge hinzu. Ändere seine Farbe zu #467040.
Anschließend style Titel, Preis und Button so, dass die Karte konsistent wirkt. Passe Typografie, Abstände, Rahmen und Farben an, bis das Design zu deinem Shop passt.
Sobald das Styling fertig ist, öffne den Content-Tab in jedem Modul und weise allen vier Modulen das gleiche Produkt zu. In diesem Beispiel verwende ‚Holzstuhl-Set‘. Das verbindet das Bild, den Titel, Preis und Button zu einem spezifischen Produkt.
Wichtig: Wann Loop Builder verwenden
Die manuelle Kartenmethode oben ist nicht die beste Wahl, wenn Du ein echtes Produktarchiv möchtest, das automatisch eine benutzerdefinierte Karte für jedes Produkt in der aktuellen Kategorie wiederholt.
Für diesen Zweck verwende den Loop Builder.
In Divi 5 ist der Loop Builder das bessere Werkzeug für benutzerdefinierte dynamische Kategorieseiten, weil Du ein einzelnes Produktkartenlayout entwerfen kannst, WooCommerce-Produkte abfragen kannst und Divi dieses Layout automatisch über die Kategorieseite wiederholt.
Praktische Tipps bevor Du veröffentlichst
Einige abschließende Überprüfungen können den Unterschied ausmachen zwischen einer Kategorieseite, die im Builder gut aussieht, und einer, die für Käufer im Frontend gut funktioniert. Bevor Du veröffentlichst, überprüfe diese Details:
- Halte Kategorie-Templates zunächst einfach und verfeinere Abstände und Styling, sobald die Struktur steht.
- Verwende konsistente Bildseitenverhältnisse, um die Produktkarten im Raster ausbalanciert zu halten.
- Überprüfe Hover-Zustände, Sale Badges und ‚In den Warenkorb‘-Buttons auf Mobilgeräten und Desktops.
- Schau Dir die Vorschau des Templates in einer Kategorie mit genügend Produkten an, um Zeilenumbrüche, Paginierung und Abstände zu testen.
- Wenn Du einen dunklen Hintergrund verwendest, überprüfe den Kontrast von Titel, Preis und Button auf Lesbarkeit.
Probiere Divi 5 Woo Module auf Deinen Kategorieseiten
Divi 5 bietet Dir verschiedene Möglichkeiten, WooCommerce-Kategorieseiten zu gestalten. Das Woo Products Modul ist der schnellste Weg zu einem sauberen dynamischen Raster, während Einzelmodule mehr Kontrolle für kuratierte Produktbereiche bieten. Sollte es ein vollständig benutzerdefiniertes, sich wiederholendes Archivlayout sein, ist der Loop Builder die stärkere Option.
Diese Flexibilität macht Divi 5 so nützlich für WooCommerce-Stores. Du kannst einfach anfangen, das Layout visuell verbessern und die Methode wählen, die zum Typ der Kategorieseite passt, die Du baust.
Wenn Sie Unterstützung benötigen, können Sie sich jederzeit per E-Mail an hello@mikas.at wenden.
