Wer mit WooCommerce einen Shop baut, landet früher oder später bei den Kategorieseiten. Standardmäßig zeigt Divi dort ein schlichtes Raster mit Seitenleiste und Sortierfeld. Das funktioniert, sieht aber überall gleich aus. Mit dem Theme Builder gibst du einer Kategorie, mehreren oder allen ein eigenes Layout, das du wie eine normale Seite im Visual Builder gestaltest.
Ich zeige dir den Weg an einer Beispielkategorie: Vorlage anlegen, auf genau diese Kategorie begrenzen, Module einsetzen und das Ergebnis prüfen. Getestet mit Divi 5.13 (deutsche Oberfläche) und WooCommerce 11.2, Stand Oktober 2026. Die Beschriftungen stehen so da, wie Divi sie zeigt, auch wenn manche holprig übersetzt sind.
Was sich in Divi 5 geändert hat
Die Woo-Module sind in Divi 5 keine versteckte Sonderkategorie mehr. Sobald WooCommerce aktiv ist, tauchen sie in der normalen Modulauswahl auf, jeweils mit dem Vorsatz „Woo“. Wenn du in der Suche „Woo“ eingibst, bekommst du unter anderem „Woo Produkte“, „Woo Produkttitel“, „Woo Produktpreis“, „Woo Produktbilder“ und „Woo Produkt in den Warenkorb legen“. Eine Kuriosität: Die Breadcrumb-Navigation heißt in der deutschen Oberfläche „Woo Semmelbrösel“. Wer nach „Breadcrumb“ sucht, findet sie also nicht.
Die Suche nach „Woo“ listet alle Shop-Module auf.
Schritt 1: Vorlage anlegen und der Kategorie zuweisen
Öffne Divi → Theme Builder. Klick auf „Neue Vorlage Hinzufügen“ und dann auf „Neue Vorlage Erstellen“. Im Dialog „Template-Einstellungen“ bleibst du im Reiter „Verwenden Für“ und scrollst zur Gruppe „Archivseiten“. Dort stehen mit aktivem WooCommerce zusätzliche Einträge:
- „Alle Produktkategorie-Seiten“: das Layout gilt für jede Produktkategorie.
- „Bestimmte Produktkategorie-Seiten“: das Layout gilt nur für Kategorien, die du ankreuzt.
Hinter dem zweiten Eintrag sitzt ein kleiner Pfeil. Er klappt rechts die Liste „Produktkategorien“ auf. Setz dort das Häkchen bei deiner Kategorie und klick auf „Vorlage Erstellen“.
Der Pfeil neben „Bestimmte Produktkategorie-Seiten“ öffnet die Liste der Kategorien.
Meine Empfehlung: Fang mit einer einzelnen Kategorie an. So siehst du das Ergebnis, ohne dass gleich dein ganzer Shop umgebaut wird. Wenn das Layout steht, kannst du die Zuweisung später erweitern oder auf „Alle Produktkategorie-Seiten“ umstellen.
Die neue Karte trägt den Namen der Zuweisung, bei mir „Bestimmte Produktkategorie-Seiten: Tutorial TB3 Taschen“. Sie hat drei gestrichelte Felder für Header, Hauptinhalt und Footer. Header und Footer lässt du leer, dann gelten die globalen Bereiche deiner Website weiter. Wie du die baust, steht in Globale Kopfzeile bauen und Eigene Fußzeile im Theme Builder.
Die neue Vorlage wartet auf ihren Hauptinhalt.
Schritt 2: Den Hauptinhalt bauen
Klick auf „Benutzerdefinierten Hauptinhalt Hinzufügen“ und wähle „Benutzerdefinierten Hauptinhalt Erstellen“. Der Visual Builder öffnet sich, der Bereich heißt oben im Einstellungsfeld „Fließtext“, gemeint ist der Hauptinhalt. Gib dem Layout unter „Titel“ einen Namen, an dem du es später erkennst. Dann legst du eine Zeile mit einer Spalte an und setzt drei Module hintereinander:
- „Woo Semmelbrösel“: die Brotkrumen-Navigation. Im Builder zeigt sie „Home / Produktname“, live steht dort der echte Kategoriename. Mehr zu dem Modul steht in Breadcrumbs im Divi Builder.
- „Posttitel“: liefert die Überschrift. Auf einer Kategorieseite zeigt er den Namen der Kategorie. Schalte unter „Elemente“ den Schalter „Meta Zeigen“ aus, sonst steht darunter eine Zeile mit Autor und Datum, die bei einer Kategorie keinen Sinn ergibt.
- „Woo Produkte“: das eigentliche Produktraster.
Beim Posttitel gibt es eine Stolperfalle: Im Builder erscheint die Platzhalterzeile „Ihr dynamischer Beitragstitel wird hier angezeigt“ samt großem grauen Bild. Das sieht aus wie ein Fehler, ist aber nur die Vorschau. Auf der fertigen Seite stand bei mir nur der Kategoriename, ohne Bild.
Schritt 3: „Aktuelle Schleife Verwenden“ einschalten
Das ist die wichtigste Einstellung der ganzen Vorlage. Das Modul „Woo Produkte“ zeigt ohne sie einfach Produkte aus dem Shop. Bei mir waren es alle sechs Testprodukte, egal in welcher Kategorie. Erst der Schalter „Aktuelle Schleife Verwenden“ im Reiter „Inhalt“ sagt dem Modul: Zeig nur die Produkte, die zur gerade aufgerufenen Kategorie gehören.
Darunter findest du weitere Felder, die auf einer Kategorieseite sinnvoll sind:
- „Produktzähler“: wie viele Produkte pro Seite erscheinen (Standard 12).
- „Spaltenlayout“: „Standard“ oder 1 bis 6 Spalten. Ich habe „3 Spalten“ gewählt.
- „Auftrag“: die Sortierung, voreingestellt auf „Voreingestellte Sortierung“.
„Aktuelle Schleife Verwenden“ ist der Schalter, auf den es ankommt.
Unter „Elemente“ schaltest du einzelne Bestandteile der Produktkarte ein oder aus: „Name Anzeigen“, „Bild Anzeigen“, „Preis Anzeigen“, „Bewertung Anzeigen“, „Verkaufsabzeichen Anzeigen“ und „Nummerierung Anzeigen“. Im Reiter „Design“ gibt es dazu eigene Gruppen wie „Bild“, „Titeltext“, „Preistext“ und „Paginierungstext“. Für die Farbe der ganzen Fläche klickst du im Pfad oben auf „Sektion“ und stellst in der Gruppe „Hintergrund“ die „Hintergrundfarbe“ ein, bei mir ein warmes Beige.
Schritt 4: Speichern, und zwar zweimal
Klick im Builder auf „Speichern“ und dann auf „Beenden“. Du landest wieder im Theme Builder, und dort ist die Arbeit noch nicht erledigt: Der blaue Knopf oben links hat von „All Changes Saved“ auf „Änderungen Speichern“ gewechselt. Erst wenn du den anklickst, wird die Vorlage live geschaltet. Das vergisst man leicht, denn im Builder selbst sieht alles schon fertig aus.
Der Hauptinhalt ist gefüllt, jetzt noch „Änderungen Speichern“.
Das Ergebnis prüfen
Ruf die Kategorieseite im Frontend auf, am besten in einem Fenster ohne Login. Bei mir stand dort die neue Vorlage mit Breadcrumb („Home / Tutorial TB3 Taschen“), dem Titel und den vier Produkten der Kategorie in drei Spalten auf beigem Hintergrund.
Die fertige Kategorieseite mit eigener Vorlage.
Eine zweite Kategorie, die ich nicht angehakt hatte, blieb unverändert: Sie zeigt weiter Divis Standardlayout mit Seitenleiste und Sortierfeld. Genau das willst du beim Ausprobieren, denn so bleibt der Rest deines Shops unberührt.
Nicht zugewiesene Kategorien behalten das Standardlayout.
Beachte außerdem: Das Sortierfeld und der Hinweis „Alle 2 Ergebnisse werden angezeigt“ aus dem Standardlayout gehören zum WooCommerce-Archiv und sind in meiner Vorlage nicht dabei. Wenn du sie brauchst, musst du sie bewusst nachbauen. Und falls WooCommerce bei dir noch englische Texte zeigt, fehlt vermutlich nur das deutsche Sprachpaket des Plugins. Bei mir waren die Texte vor der Installation englisch, danach deutsch.
Wie es weitergeht
Dieselbe Technik gilt für die anderen Shop-Seiten: Die Shop-Übersicht und die Einzelproduktseite bekommen eigene Vorlagen. Einen Überblick, wie die Theme-Builder-Oberfläche aufgebaut ist, gibt der Rundgang durch den Theme Builder. Und wenn du deinen Shop von Grund auf planst, hilft die umfassende Anleitung zum WooCommerce-Shop mit Divi.
Divi gibt es bei Elegant Themes (Werbung).
