Die Shop-Seite ist die Schaufenster-Übersicht deines WooCommerce-Shops: alle Produkte auf einen Blick. Divi zeigt sie standardmäßig im selben Raster wie jede andere Archivseite, mit Seitenleiste und Sortierfeld. Wenn du Einleitung, Spaltenzahl und Hintergrund selbst bestimmen willst, brauchst du eine eigene Vorlage im Theme Builder.
Hier zeige ich dir, wie das geht. Getestet mit Divi 5.13 (deutsche Oberfläche) und WooCommerce 11.2, Stand Oktober 2026. Die Grundlagen zu Vorlagen und Zuweisung stehen im Rundgang durch den Theme Builder. Wie dasselbe für eine einzelne Produktkategorie funktioniert, erkläre ich in Kategorieseiten mit eigener Vorlage.
Voraussetzung: die WooCommerce-Seite „Shop“
WooCommerce legt beim Einrichten mehrere Seiten an: Shop, Warenkorb, Kasse und Mein Konto. Divi erkennt sie und bietet sie bei der Zuweisung einer Vorlage extra an. Die Seite „Shop“ muss also vorhanden sein.
Schritt 1: Vorlage für „Shop“ anlegen
Öffne Divi → Theme Builder und klick auf „Neue Vorlage Hinzufügen“, dann auf „Neue Vorlage Erstellen“. Im Dialog „Template-Einstellungen“ scrollst du in der Liste „Verwenden Für“ nach unten bis zur Gruppe „WooCommerce Pages“. Die Überschrift ist in Divi 5 englisch geblieben. Darunter stehen vier Einträge: „Shop“, „Wagen“, „Kasse“ und „My Account“. Setz das Häkchen bei „Shop“ und klick auf „Vorlage Erstellen“.
Unter „WooCommerce Pages“ wählst du „Shop“.
Die neue Karte heißt schlicht „Shop“. Header und Footer lässt du leer, dann bleiben die globalen Bereiche deiner Website erhalten.
Die Karte „Shop“ wartet auf ihren Hauptinhalt.
Schritt 2: Layout bauen
Klick auf „Benutzerdefinierten Hauptinhalt Hinzufügen“ und wähle „Benutzerdefinierten Hauptinhalt Erstellen“. Im Visual Builder trägst du oben unter „Titel“ einen Namen ein. Danach baust du zwei Abschnitte:
- Einleitung: eine Zeile mit einer Spalte und einem „Text“-Modul. Ein bis zwei Sätze reichen, etwa was du verkaufst und wie schnell du lieferst.
- Produkte: ein zweiter Abschnitt (unten auf das Plus klicken, Zeile mit einer Spalte wählen) mit dem Modul „Woo Produkte“. Das findest du, wenn du in der Modulsuche „Woo Produkte“ eintippst.
Im Modul „Woo Produkte“ sind drei Felder wichtig:
- „Aktuelle Schleife Verwenden“: einschalten. Dann übernimmt das Modul die Produktliste, die WooCommerce für die Shop-Seite ohnehin ermittelt.
- „Produktzähler“: wie viele Produkte pro Seite erscheinen. Ich habe 8 eingetragen, der Standard ist 12.
- „Spaltenlayout“: hier habe ich „4 Spalten“ gewählt. Zur Auswahl stehen „Standard“ und 1 bis 6 Spalten.
Die drei wichtigen Felder im Modul „Woo Produkte“.
Für den beigen Hintergrund habe ich im Pfad oben im Einstellungsfeld auf „Sektion“ geklickt und in der Gruppe „Hintergrund“ die „Hintergrundfarbe“ gesetzt. Was du in den Gruppen „Elemente“ und „Design“ einstellen kannst, ist dasselbe wie bei der Kategorieseite, nachzulesen im Artikel dazu.
Eine Stolperfalle aus meinem Test: Ich wollte oben ursprünglich den Posttitel als Überschrift einsetzen. Im Builder zeigt er aber ein sehr großes graues Platzhalterbild, und alles darunter rutscht weit aus dem Blick. Das Plus für den nächsten Abschnitt ist dann schwer zu finden. Für die Shop-Übersicht kommst du mit einem kurzen Text gut aus.
Schritt 3: Speichern und prüfen
Klick im Builder auf „Speichern“ und dann auf „Beenden“. Im Theme Builder musst du danach noch einmal auf „Änderungen Speichern“ klicken, erst dann gilt die Vorlage live.
Die Vorlage „Shop“ mit Hauptinhalt.
Ruf dann deine Shop-Seite auf. Bei mir erschien oben der Einleitungssatz, darunter die Produkte in vier Spalten auf beigem Grund, und zwar in der Reihenfolge „Standard (Menüreihenfolge + Name)“, also alphabetisch, solange du keine Reihenfolge vergeben hast.
Die fertige Shop-Seite.
Was in der Vorlage fehlt
Die Seitenleiste, das Sortierfeld und der Satz „Alle Ergebnisse werden angezeigt“ aus dem Standardlayout sind weg. Für diese Elemente gibt es in der Liste der „Woo“-Module keinen Ersatz. Für einen kleinen Shop mit wenigen Produkten ist das in Ordnung. Bei einem großen Sortiment brauchst du eine Möglichkeit zum Filtern und Sortieren. Dafür gibt es Zusatz-Plugins, einen Überblick findest du unter Divi-Plugins für Divi 5. Prüf vor dem Einsatz, ob ein Plugin mit Divi 5 funktioniert.
Wie die Shop-Seite in den Gesamtaufbau eines Shops passt, erkläre ich in der Anleitung WooCommerce-Shop mit Divi.
Divi gibt es bei Elegant Themes (Werbung).
