Die Produktseite entscheidet, ob jemand kauft. Hier siehst du Bild, Preis, Beschreibung und den Knopf „In den Warenkorb“. Standardmäßig zeigt Divi sie in einem schlichten Layout, das für viele Shops reicht. Wenn du aber selbst bestimmen willst, was wo steht, baust du im Theme Builder eine eigene Vorlage. Sie gilt dann für alle Produkte oder für eine Auswahl.
Ich zeige dir den Weg an einer Beispielkategorie. Getestet mit Divi 5.13 (deutsche Oberfläche) und WooCommerce 11.2, Stand Oktober 2026. Wenn du den Theme Builder noch nicht kennst, lies zuerst den Rundgang. Die gleiche Technik für Kategorieseiten steht in diesem Artikel, die Shop-Übersicht behandelt dieser.
Schritt 1: Vorlage anlegen und zuweisen
Öffne Divi → Theme Builder, klick auf „Neue Vorlage Hinzufügen“ und „Neue Vorlage Erstellen“. Im Dialog „Template-Einstellungen“ findest du eine eigene Gruppe „Produkte“ mit diesen Einträgen:
- „Alle Produkte“
- „Produkte-Archivseite“
- „Produkte mit Spezifischem Produktmarken“
- „Produkte in Spezifischem Kategorien“
- „Produkte mit Spezifischem Tags“
- „Bestimmte Produkte“
Die Übersetzung ist holprig, die Funktion klar. Ich habe „Produkte in Spezifischem Kategorien“ gewählt. Dort öffnet der Pfeil rechts eine Liste „Produktkategorien“, in der ich meine Testkategorie angehakt habe. Das ist meine Empfehlung für den Anfang: Du testest das Layout an einer Kategorie, ohne den ganzen Shop umzustellen. Wenn es steht, wechselst du auf „Alle Produkte“.
Zuweisung auf eine Produktkategorie.
Klick auf „Vorlage Erstellen“, dann auf „Benutzerdefinierten Hauptinhalt Hinzufügen“ und „Benutzerdefinierten Hauptinhalt Erstellen“. Header und Footer lässt du leer, die globalen Bereiche bleiben aktiv.
Schritt 2: Zwei Abschnitte anlegen
Gib dem Layout oben im Feld „Titel“ einen Namen. Dann legst du zuerst die Struktur an, bevor du Module einsetzt:
- Abschnitt 1 mit einer Zeile aus zwei gleich breiten Spalten. Links kommt das Produktbild hin, rechts die Kaufinformationen.
- Abschnitt 2 mit einer Zeile aus einer Spalte, für Reiter und ähnliche Produkte.
Die Reihenfolge hat einen Grund. Das Produktbild und der Text füllen den Bildschirm schnell, und das Plus für einen weiteren Abschnitt rutscht aus dem sichtbaren Bereich. Mit leerer Struktur bleibt alles erreichbar.
Schritt 3: Woo-Module einsetzen
Gib in der Modulsuche „Woo Produkt“ ein. Du bekommst die Module für Titel, Preis, Bild, Beschreibung und weitere.
Die Suche zeigt die Produkt-Module.
So habe ich sie verteilt:
- Linke Spalte: „Woo Produktbilder“. Auf der Live-Seite erscheint mit dem Bild ein Lupen-Symbol zum Vergrößern.
- Rechte Spalte, von oben nach unten: „Woo Produkttitel“, „Woo Produktpreis“, „Woo Produktbeschreibung“, „Woo Produkt in den Warenkorb legen“ und „Woo Produkt-Meta“ (Kategorie, bei Bedarf Artikelnummer).
- Abschnitt 2: „Woo-Produktregisterkarten“ mit den Reitern „Beschreibung“ und „Rezensionen“, darunter „Woo verwandte Produkte“.
Ein neues Modul unter ein vorhandenes setzt du so: Maus aufs Modul, dann unten auf das dunkle Plus an dessen Rand klicken.
Die Module „Woo Produktbeschreibung“ und „Woo verwandte Produkte“ haben eigene Optionen. Bei der Beschreibung bestimmt das Feld „Beschreibung Typ“, was erscheint. Bei mir stand es auf „kurze Beschreibung“, also dem Kurztext, den du im Produkt selbst einträgst. Die ausführliche Beschreibung liefern die Reiter weiter unten. Die verwandten Produkte haben „Produktzähler“, „Spaltenlayout“ (Standard „4 Spalten“), „Auftrag“ (Standard „Zufällige Reihenfolge“) und „Enthaltene Kategorien“.
Das Modul „Woo Produktbeschreibung“ mit dem Feld „Beschreibung Typ“.
Im Builder siehst du keine echten Daten, sondern Platzhalter: „Produktname“, 75,00 €, ein Lorem-ipsum-Text und ein graues Bild. Das ist normal. Die echten Inhalte erscheinen erst auf der Live-Seite.
Das Layout im Builder mit Platzhalterdaten.
Schritt 4: Speichern und prüfen
Klick im Builder auf „Speichern“ und „Beenden“. Danach musst du im Theme Builder noch auf „Änderungen Speichern“ klicken, sonst bleibt die Vorlage inaktiv.
Die Vorlage mit Hauptinhalt.
Ruf dann ein Produkt der Kategorie im Frontend auf. Bei mir stand links das Bild, rechts Titel, Preis, Kurzbeschreibung, Mengenfeld und der Knopf „In den Warenkorb“ (WooCommerce übersetzt ihn mit installiertem Sprachpaket so), darunter „Kategorie: …“. Unten folgten die Reiter „Beschreibung“ und „Rezensionen (0)“ sowie „Ähnliche Produkte“, in meinem Fall drei, weil die Kategorie nur vier Produkte hat.
Die fertige Produktseite.
Was dir bei der Gestaltung hilft
Die Module sind normale Divi-Module mit den üblichen Reitern „Inhalt“, „Design“ und „Erweitert“. Du kannst Schriften, Farben und Abstände wie überall sonst einstellen, am bequemsten über globale Farben.
Den Aufbau eines ganzen Shops, von der Einrichtung bis zu den rechtlichen Punkten, findest du in der Anleitung WooCommerce-Shop mit Divi.
Divi gibt es bei Elegant Themes (Werbung).
