WooCommerce Produktseite mit Divi5 erstellen: Schritt-für-Schritt Anleitung

Die wichtigsten Fragen und Antworten in Kürze:

In diesem Beitrag erfährst Du, wie Du eine verkaufsstarke Produktseite für Deinen WordPress-Online-Shop anlegst — konkret zeige ich Dir, wie Du eine Woocommerce Produktseite mit Divi5 erstellen kannst, die automatisch für alle Produkte gilt. In diesem Beitrag führe ich Dich Schritt für Schritt, mit zusätzlichen Tipps, damit Du das Template sicher umsetzt.

Warum Du eine Woocommerce Produktseite mit Divi5 erstellen solltest

Wenn Du das kostenlose WordPress-Plugin WooCommerce nutzt, brauchst Du eine klare, ansprechende Produktseite. Divi 5 bietet den Theme Builder und Flexbox-Optionen, mit denen sich Produktseiten ohne mühsames CSS sauber gestalten lassen. Eine einmalig erstellte Vorlage spart Zeit, sorgt für Konsistenz und macht Upselling einfacher — deshalb zeige ich Dir, wie Du eine Woocommerce Produktseite mit Divi5 erstellen kannst, die für alle Produkte automatisch greift.

Das Beispiel eines fertigen Divi 5 Templates für die Woocommerce Produktseite mit Hintergrundbild und Produktseite

Die Ansicht des Divi 5 Theme Builders im Backend, mit der die WooCommerce Produktseite umgesetzt wird.

Voraussetzungen (Kurzcheck)

• WordPress installiert
• WooCommerce (kostenlos)
• Divi Theme in Version 5 (Theme Builder)
• Für Deutschland: Germanized (kostenlos oder Pro) oder German Market zur rechtskonformen Preisauszeichnung
• Mindestens ein Produkt mit Featured Image und Preis angelegt

Wichtig zu Germanized

Auf dem deutschen Markt ist Germanized sehr empfehlenswert, weil es die gesetzlich notwendige Preisauszeichnung und Hinweise (z. B. Mehrwertsteuer) sauber handhabt. Nutze am Anfang ruhig die kostenlose Version — Pro bringt zwar mehr Komfort, ist aber nicht zwingend nötig, um loszulegen. Alternativ kannst Du auch das Plugin German Market verwenden.

Schritt 1: Template im Divi 5 Theme Builder anlegen

Gehe in den Divi Theme Builder und klicke auf „Neues Template“ (plus). Wähle die Option für WooCommerce-Produkte — Du kannst das Template für „alle Produkte“ oder für einzelne Kategorien anlegen. Ich empfehle, zuerst für alle Produkte zu arbeiten; später kannst Du bei Bedarf spezielle Templates für Kategorien anlegen.

Der Divi 5 Theme Builder im WordPress-Backend. Hier erstellst Du das neue Template für die WooCommerce Produktseite Deines Online-Shops.

Schritt 2: Grundstruktur bauen — Header mit Hintergrundbild

Ich beginne mit einer neuen Sektion und einer aufgeteilten Zeile (zwei Spalten). In die linke/obere Spalte kommt das Divi Modul WooCommerce Produkttitel, in die rechte der WooCommerce-Preis. Ergänze das Produktmeta-Modul, damit die Steuer- oder Mehrwertsteuer-Angaben korrekt angezeigt werden.

Wichtig: Für ein stimmiges Design nutze ich das Featured Image dynamisch als Background-Image der Sektion. In Divi 5 kannst Du das Hintergrundbild als dynamischen Inhalt auf „Featured Image“ setzen — so wird für jedes Produkt automatisch das richtige Bild geladen. Um Text lesbar zu halten, lege ich eine schwarze Hintergrundfarbe über das Bild und benutze den Blend-Mode „Multiplizieren“. Danach reduziere ich die Deckkraft auf ca. 70%.

Tipps zur Lesbarkeit

• Weißer, fetter Titeltext funktioniert meist am besten auf dunklen Overlays.
• Prüfe Kontrast mit echten Produktbildern — manche Bilder benötigen stärkeren Overlay.
• Verwende keine zu kleine Schrift: mobile Lesbarkeit testen!

Schritt 3: Flexbox nutzen — Elemente sauber ausrichten

In Divi 5 sind Flexbox-Optionen in jeder Sektion verfügbar. Statt mit Padding zu tricksen, benutze ich Design → Layout → Flex, um den Inhalt z.B. am unteren Rand auszurichten. Das ist deutlich stabiler und responsivefreundlicher als alte Workarounds.

Mit der neues Divi 5 – Flexbox Funktion kannst Du die Sektion so einstellen, dass die darin enthaltene Zeile unten in der Sektion ausgerichtet wird.

Optional richtest Du Text in der rechten Spalte nach rechts aus — das gibt oft ein aufgeräumtes Layout.

Schritt 4: Produktbereich mit Bild, Preis und Meta

Weitere Zeile: links das Produktbild (dynamischer Inhalt mit dem Featured Image), rechts WooCommerce Titel, Preis und Meta. Kopiere in Divi 5 Design-Attribute, um Konsistenz zu wahren: Das Border-Attribut entfernen, negative Margin fürs Meta-Element setzen (damit das WooCommerce Produkt-Meta enger an den Preis rückt). In Divi 5 kannst Du modular genau auswählen, welche Attribute von einem Modul in ein anderes kopiert und eingefügt werden — super praktisch.

Schritt 5: Add-to-Cart Button stylen — ganz ohne CSS

Füge das Modul „Product Add to Cart“ ein. In Divi 5 lassen sich Button-Farben, Textfarbe, Hover-Stile usw. direkt im Modul einstellen. Du brauchst kein eigenes CSS (Cascading Style Sheets), was viele User erleichtert. Wähle hier Deine Markenfarbe für den Button-Hintergrund und Weiß für den Text — fertig.

Schritt 6: Produktbeschreibung, Tabs und Video einbinden

Unterhalb füge die Produktbeschreibung mit dem Modul „Product Description“ hinzu. Für zusätzliche Informationen nutze die „Woocommerce Product Tabs“.

Für ein modernes Erlebnis integriere ich ein Video-Modul neben den Tabs. Tipp: Du kannst im Video-Modul als Overlay das Featured Image als dynamischen Inhalt setzen — beim Hover/Play sieht das toll aus.

Auch für das Video kannst Du den dynamischen Inhalt des Featured Image nutzen. So wird im Frontend der Website das jeweilige Produktbild als Overlay des Videos angezeigt.

Schritt 7: Layout nebeneinander anordnen und Feintuning

Wenn Video und Tabs nebeneinander stehen sollen, ändere die Spaltenrichtung per Flexbox von vertikal zu horizontal (links → rechts). Füge der gesamten Zeile ein Padding mit rem-Werten hinzu (z. B. 2rem), verketten für links/rechts, und setze eine dezente Hintergrundfarbe für den Bereich, z. B. ein helles Grau.

Schritt 8: Vorschau und Test

Speichere das Template sowohl im Theme Builder Frontend, als auch im Backend des Theme Builders und öffne eines Deiner Produkte in der Vorschau. Das Template sollte jetzt automatisch Produktname, Preis (inkl. Umsatzsteuer) und Featured Image ziehen. Prüfe:

• Wird das Featured Image geladen?
• Sind Textkontraste gut lesbar?
• Steht die Steuerangabe an der korrekten Stelle (unter dem Preis)?
• Funktioniert der Add-to-Cart Button für Varianten?

Die fertige WooCommerce Produktseite ist in Divi 5 erstellt und liefert einen Mehrwert für Deine Shop-Kunden.

Wichtiger Hinweis: Preisauszeichnung in Deutschland

Gerade wichtig auf dem deutschen Markt: Die Mehrwertsteuer-Angabe muss sichtbar und rechtlich korrekt positioniert sein. Damit die Angabe z. B. „inkl. 19% MwSt.“ direkt unter dem Preis erscheint, stellst Du das in den Germanized-Einstellungen ein: Produktseite → Preisauszeichnung am Produktmeta platzieren. Ohne diese Einstellung springt die Anzeige nicht automatisch an die richtige Stelle.

Die Ansicht des Germanized Plugins im Backend von WordPress integriert im WooCommerce-Plugin.

Best Practices & Troubleshooting

• Nutze dynamische Inhalte so oft wie möglich (Featured Image, Titel, Preis) — so bleibt das Template universell.
• Wenn das Overlay-Featured-Image des Videos im Builder nicht angezeigt wird, prüfe die Live-Vorschau oder öffne das Produkt im Frontend. Manche dynamischen Inhalte zeigt der Builder nicht 1:1 an.
• Teste Varianten-Produkte: Add-to-Cart muss für Varianten korrekt funktionieren.
• Denke an Accessibility: Alt-Texte, ausreichender Kontrast und große Klickflächen sind Pflicht.
• Sichere regelmäßig Deine Templates und teste auf mobilen Geräten.

Warum mir diese Methode gefällt

Weil sie schnell ist, flexibel und ohne tiefes CSS auskommt. Divi 5 bringt mit Flexbox und modularen Designoptionen echte Produktivitätsgewinne. Du erstellst eine hochwertige Woocommerce Produktseite mit Divi5, die sowohl für Benutzer als auch für Suchmaschinen sauber strukturiert ist.

Abschluss & Motivation

Wenn Du diese Anleitung Schritt für Schritt durchgehst, kannst Du in kurzer Zeit eine wiederverwendbare, verkaufsfördernde Produktseite bauen. Ich spreche aus Erfahrung: die größte Zeitersparnis ist die Template-Wiederverwendbarkeit. Du musst nur einmal sauber arbeiten — danach profitieren alle Produkte. Also leg los und erstelle Deine Woocommerce Produktseite mit Divi5  — es macht tatsächlich Spaß, wenn man die Flexbox-Logik einmal verinnerlicht hat.

Viel Erfolg beim Umsetzen — wenn Du Fragen hast, schreib sie gern in die Kommentare oder in Deine Notizen. Wir schaffen das gemeinsam!