Onlineshop-Erstellung mit Divi 5 und WooCommerce

Einen Onlineshop zu erstellen, bedeutete früher, Design und Funktionalität auszubalancieren. Du wolltest einen Shop, der poliert aussieht, zur Marke passt und reibungslos beim Checkout funktioniert, aber alle drei Aspekte zu erreichen, erforderte oft zusätzlichen Aufwand.

Divi und WooCommerce sind seit langem eine starke Kombination für den Bau von Onlineshops und Divi 5 geht noch einen Schritt weiter. Mit einer neuen Grundlage, modernen Layoutsystemen, einem stärkeren Design-Workflow und nativen WooCommerce-Modulen hast du viel mehr Kontrolle darüber, wie dein Shop aussieht und funktioniert – über Produkt-, Warenkorb-, Checkout- und Archivvorlagen hinweg.

Das bedeutet, dass die frühen Designentscheidungen, wie Farben, Typografie und Produktkarten-Styling, viel einfacher und konsistenter durch den gesamten Shop getragen werden können. Anstatt immer wieder das gleiche Muster neu zu erstellen, legst du einmal die Basis und nutzt sie wieder, während dein Shop wächst.

In diesem Beitrag führen wir dich durch den gesamten Prozess, von der Einrichtung der visuellen Basis deines Shops bis zum Bau deiner Shop-, Produkt-, Warenkorb- und Checkout-Seiten, bis hin zum Live-Gang.

Inhaltsverzeichnis

1. Warum Divi 5 und WooCommerce
2. Native WooCommerce-Module
3. Loop Builder für benutzerdefinierte Produktgitter
4. System-Level Store-Building mit Theme Builder
5. Ein eingebautes Design-System
6. Was du brauchst, bevor du anfängst
7. Verständnis der Ecommerce Architektur in Divi 5
8. Herunterladen & Zugriff auf die in diesem Leitfaden verwendeten Layouts & Templates
9. Kostenloser Download
10. Wie du Divi 5 mit WooCommerce nutzt
11. Setze deine Design-Variablen
12. Baue dein Ecommerce-Header und -Footer
13. Erstelle deine Shop-Seite mit Loop Builder
14. Richte deine Produktseite ein
15. Richte deine Warenkorb- und Checkout-Seiten ein
16. Kategorie- und Produkt-Entdeckungsseiten
17. Vorschau deiner Ecommerce-Templates
18. Konfiguriere deine Shop-Einstellungen
19. Fang heute an, mit Divi 5 zu bauen!

Warum Divi 5 und WooCommerce

WooCommerce ist der Motor. Es verwaltet zuverlässig deine Produkte, Zahlungen, Versand und Inventar. Was es alleine nicht tut, ist dir viel visuelle Kontrolle darüber zu geben, wie dein Shop aussieht und sich anfühlt. Die Standardvorlagen sind funktional, aber sie können sich starr anfühlen, und sie traditionell anzupassen, bedeutet oft, mit Template-Overrides oder benutzerdefiniertem CSS zu arbeiten. Für viele Shop-Betreiber beginnt der Frust in der Lücke zwischen Funktionalität und Wunschdesign.

Divi 5 schließt diese Lücke weitgehend, auf einem Niveau, das frühere Versionen von Divi nicht erreichen konnten. Die neu gestaltete Architektur ist sauberer und moderner, aber der größte Wandel liegt darin, wie das ganze System funktioniert.

Divi 5 ist darauf ausgelegt, deinen Shop ganzheitlich zu verwalten, nicht nur Element für Element. Diese Philosophie zeigt sich auf vier unterschiedliche Arten.

Native WooCommerce-Module

Divi 5 umfasst native WooCommerce-Module für Produktseiten, Produktlisten, Warenkorb-Seiten, Checkout-Seiten, Hinweise, Breadcrumbs und mehr. Jedes Modul zieht Live-Daten direkt aus WooCommerce, sodass die Inhalte mit deinem Store synchron bleiben. Du konzentrierst dich auf das Layout und Styling, während WooCommerce die zugrunde liegenden Shop-Daten verwaltet.

Loop Builder für benutzerdefinierte Produktgitter

Der Loop Builder geht noch einen Schritt weiter. Du gestaltest eine Produktkarte genau so, wie du sie haben möchtest, verbindest sie mit den Live-Daten deines Shops über Dynamischen Inhalt, und der Loop Builder wiederholt dieses Design automatisch für jedes Produkt in deinem Katalog. Veröffentliche ein neues Produkt, und es kann das Kartendesign sofort übernehmen, ohne manuelle Updates oder Neuformatierung. Kombiniere den Loop Builder mit dem Group Carousel Modul, und deine Produkt-Slider können sich auf die gleiche Weise aktualisieren.

System-Level Store-Building mit dem Theme Builder

Die meisten Page Builder behandeln jede Seite als eigenes Projekt. Der Theme Builder in Divi 5 lässt dich deinen Shop als ein verbundenes System betrachten. Du kannst eine Vorlage für deine Shop-Seite erstellen, eine für deine Produktseiten, eine für deinen Warenkorb und eine für den Checkout, und jede Vorlage kann global angewendet werden, sobald du sie speicherst. Aktualisiere eine Schriftart, passe ein Layout an oder tausche eine Farbe aus, und diese Änderung wird über jede relevante Vorlage hinweg ausgerollt.

Das Management eines wachsenden Shops fühlt sich weniger wie sich ständig wiederholende Wartung an und mehr wie das Arbeiten aus einem wiederverwendbaren System.

Ein eingebautes Design-System

Der Unterbau all dessen ist, wie Divi 5 Design-Konsistenz handhabt. Designvariablen, Voreinstellungen und erweiterte Einheiten arbeiten zusammen, um die visuelle Identität deines Shops konsistent zu halten, während du baust.

Du definierst deine Markenfarben, Schriftarten, Abstände, Links und andere wiederverwendbare Werte einmal im Variablen-Manager und kannst sie auf deiner gesamten Website verwenden.

Voreinstellungen lassen dich das Styling eines Elements speichern und es in deinem Shop wiederverwenden, sodass deine Produktkarten, Buttons und Preisschilder visuell konsistent bleiben.

Erweiterte Einheiten geben dir präzise Kontrolle über Abstände und Größen auf jeder Bildschirmgröße, sodass der Shop durchdacht wirkt, egal ob auf einem Laptop oder einem Handy.

Zusätzlich hält Divi 5 WooCommerce-Anpassungen visuell und Drag-and-Drop. Du kannst viel bauen, ohne Code schreiben zu müssen, obwohl benutzerdefiniertes CSS oder tiefere WooCommerce-Anpassungen bei manchen Shops immer noch hilfreich sein können. Um dir einen schnelleren Start zu ermöglichen, haben wir ein kostenloses Set an vorgefertigten Ecommerce-Layouts zusammengestellt, das du direkt importieren und an deine Marke anpassen kannst. Du findest den Download-Link am Anfang dieses Leitfadens und du wirst die neueste Version von Divi 5 verwenden wollen, um mitzumachen.

Was du brauchst, bevor du anfängst

Dieser Leitfaden geht davon aus, dass du WordPress bereits installiert hast. Du benötigst zwei Dinge, bevor wir mit dem Bauen beginnen: WooCommerce und Divi 5.

Wenn du WooCommerce noch nicht installiert hast, gehe zu deinem WordPress-Dashboard, gehe zu Plugins, suche nach WooCommerce und aktiviere es. Der Onboarding-Flow wird dich durch die Grundlagen führen und kann dir helfen, die wesentlichen Shop-Seiten und -Einstellungen einzurichten, die du brauchst, einschließlich Shop, Warenkorb, Checkout und Mein Konto. Diese sind die Seiten, die Divi 5 visuell übernehmen kann, sobald wir starten.

Installiere als nächstes Divi 5. Melde dich im Mitgliedsbereich von Elegant Themes an und lade das neueste Divi zip-Paket herunter. Lade es dann unter Appearance > Themes in deinem WordPress-Dashboard hoch.

Sobald es aktiv ist, authentifiziere dein Elegant Themes Konto, um Updates zu erhalten und auf Divi-Dienste zuzugreifen. Das war’s mit der Einrichtung. Jeder Schritt von hier an passiert innerhalb von Divi 5.

Bevor wir mit dem Bauen beginnen, lohnt es sich, einen Moment zu nehmen, um zu verstehen, wie Divi 5 einen WooCommerce-Shop strukturiert, da es jede Entscheidung von hier an beeinflusst.

Verständnis der Ecommerce Architektur in Divi 5

Bevor wir beginnen, musst du wissen, wo alles liegt. Gehe zu Divi in deiner WordPress-Dashboard-Seitenleiste und klicke auf Theme Builder. Hier erstellst und verwaltest du die Shop-Vorlagen, die in diesem Leitfaden verwendet werden. Jede Vorlage wird einer bestimmten WooCommerce-Seite oder Inhalttyp zugewiesen, und Divi übernimmt das Design von dort.

Hier ist, wie sich die vier Vorlagentypen aufteilen: Die Shop-Vorlage steuert deine Hauptproduktliste-Seite. Die Alle Produkte-Vorlage wird auf einzelne Produktseiten über deinen Katalog angewendet und steuert, was Kunden sehen, wenn sie darauf klicken. Die Warenkorb-Vorlage ist deiner Warenkorb-Seite zugewiesen, und die Checkout-Vorlage ist deiner Checkout-Seite zugewiesen. Jede wird unabhängig im Visual Builder gebaut, einmal gespeichert und dann dort angewendet, wo sie zugewiesen ist.

Wie du Divi 5 mit WooCommerce nutzt

1. Setze deine Design-Variablen

Bevor du eine einzige Seite anfasst, ist es hilfreich, die visuelle Identität deines Shops an einem Ort zu definieren. Betrachte es als das Legen der Basis, von der jede Vorlage, die du erstellst, ziehen wird. Design-Variablen lassen dich genau das tun. Du definierst deine Farben, Schriftarten, Abstände und mehr einmal im Variablen-Manager, und Divi 5 kann diese Werte über deinen gesamten Shop hinweg verwenden. Wenn du später deine Primärfarbe ändern musst, machst du es einmal, und jede verknüpfte Verwendung aktualisiert sich.

Um zu beginnen, öffne irgendeine Seite in deinem WordPress-Dashboard und starte den Visual Builder. Suche nach dem Variable Manager Icon in der linken Seitenleiste und klicke darauf. Dies öffnet ein Panel mit Tabs für Farben, Schriftarten, Zahlen, Text, Bilder und Links.

Für deinen Shop wirst du hauptsächlich mit Farben und Schriftarten arbeiten. Beginne mit dem Farben-Tab. Erstelle oder bearbeite die Variablen, die du für deine Marke verwenden möchtest, wie Haupt-, Sekundär-, Überschrift- und Fließtextfarben.

Klicke in das Hauptfarben-Feld, gib die Hauptfarbe deiner Marke als Hex-Code ein und klicke auf Variablen speichern.

Das gleiche für Sekundär. Diese beiden Farben bestimmen oft den Großteil der visuellen Identität deines Shops, von Buttons und Links bis hin zu Akzenten und Highlights. Wenn dein Shop zusätzliche Töne verwendet, wie eine Hintergrundfarbe oder eine spezifische Schattierung für Verkaufsabzeichen, füge sie als neue Variablen hinzu und gib ihnen klare, beschreibende Namen wie Hintergrund Hell oder Sale-Abzeichen Rot, damit sie später leicht zu identifizieren sind.

Wechsele als nächstes zum Schriftarten-Tab. Hier definierst du die Schriftvariablen, die du für Überschriften und Fließtext über Produktnamen, Preise, Beschreibungen und Navigation verwendest.

Während du hier bist, lohnt es sich auch, einige Minuten in den anderen Tabs zu verbringen. Im Zahlen-Tab speicherst du deine Basis-Abstands-Werte, wie eine Standardpolstergröße für Abschnitte und einen Randradius für Buttons und Produktkarten. Im Text-Tab speicherst du wiederkehrende Inhalte wie deinen Slogan oder Blurbs zur Rückgaberecht, die auf mehreren Seiten erscheinen. Im Links-Tab speicherst du deine Social Media URLs und alle Links, die du im Header, Footer und auf Produktseiten wiederverwenden möchtest. Kleine Entscheidungen, die jetzt getroffen werden, übersetzen sich in viel Zeitersparnis, während du durch jede Vorlage arbeitest.

Sobald deine Variablen gespeichert sind, kann jede Vorlage, die du von diesem Punkt an erstellst, von dieser Basis aus ziehen. Und wenn du die im Anhang enthaltenen kostenlosen Layouts importierst, kann dir das Inspector-Tool helfen, festgeschriebene Stile zu finden und durch deine eigenen Design-Variablen zu ersetzen.

1. Baue dein Ecommerce-Header und -Footer

Dein Header und Footer sind das, was jede Seite deines Shops teilt, sodass deren Aufbau als erstes bedeutet, dass jede Vorlage, die du danach erstellst, sie automatisch erben kann. Du richtest sie einmal ein und machst weiter.

Gehe zu Divi in deiner WordPress-Dashboard-Seitenleiste und klicke auf Theme Builder. Im Feld Default Website Template, klicke auf Add Global Header und dann wähle Build Global Header.

Dies öffnet den Visual Builder, wo du den Header gestalten wirst. Beginne mit einem Zeilen-Layout mit drei Spalten, dein Logo links, die Navigation in der Mitte und ein Button oder ein Utility-Bereich auf der rechten Seite. Dieses praktische Ecommerce-Layout gibt Kunden schnellen Zugriff auf die wichtigsten Teile deines Shops.

Im ersten Feld, füge ein Image-Modul hinzu und lade dein Shop-Logo hoch. In der mittleren Spalte, füge ein Menu-Modul hinzu und wähle das Navigationsmenü, das du in WordPress eingerichtet hast. In der dritten Spalte, füge ein Button-Modul oder Utility-Elemente wie Konto- und Wareneinkaufswagen-Links hinzu. Ziehe deine Markenfarben direkt von deinen Design-Variablen, um alles konsistent zu halten mit dem, was du in Schritt 1 eingerichtet hast.

Für Shortcut-Symbole von Einkaufswagen, Konto und Suche kannst du Icon-Module hinzufügen und sie mit den relevanten Zielen verlinken oder welche Divi-Module auch immer am besten zur Interaktion passen, die du möchtest.

Sobald dein Layout eingerichtet ist, style den Hintergrund der Sektion, setze deine Schriftfarben mit deinen Design-Variablen und überprüfe den Header über verschiedene Bildschirmgrößen hinweg. Divi 5s Responsive Controls lassen dich das Layout an Tablet- und mobilen Haltepunkten anpassen, sodass alles an Ort und Stelle bleibt auf kleineren Bildschirmen.

Wenn du zufrieden bist, klicke auf Save in der Visual Builder Symbolleiste und dann auf Exit, um zum Theme Builder-Dashboard zurückzukehren.

Klicke auf Add Global Footer im gleichen Default Website Template Feld und wähle Build Global Footer. Dein Footer muss nicht komplex sein. Ein klares Layout mit deinem Logo, einer kurzen Reihe von Zweitverlinkungen wie deiner Rückerstattungspolitik und Kontaktseite, sozialen Symbolen und einer Copyright-Zeile deckt ab, was die meisten Shops brauchen. Baue ihn auf dieselbe Weise, wie du den Header gebaut hast, dann speichere, wenn du fertig bist.

Zurück auf dem Theme Builder-Dashboard, klicke auf Save Changes oben rechts, um beide Vorlagen live zu machen.

Jede Seite deines Shops kann nun diesen Header und Footer verwenden, einschließlich der WooCommerce-Vorlagen, die wir gleich bauen.

Du kannst die Header-Footer-Template.json-Datei im Freebie-Ordner zu Beginn dieses Leitfadens finden, bereit, direkt in deinen Theme Builder zu importieren.

1. Erstelle deine Shop-Seite mit Loop Builder

Die Shop-Seite ist der Ort, an dem Kunden stöbern, entdecken und entscheiden. Sie richtig zu machen, ist wichtiger als fast jede andere Seite in deinem Store, und der Loop Builder ist, was es möglich macht, sie so zu gestalten, wie du es möchtest, ohne sie jedes Mal neu zu bauen, wenn dein Katalog wächst.

1. Erstelle die Shop-Seitenvorlage

Gehe zu Divi in deiner WordPress-Dashboard-Seitenleiste und klicke auf Theme Builder. Klicke auf Add New Template und wähle Build New Template.

Im Template Settings Modal, scrolle herunter zu WooCommerce Pages und markiere die Shop-Option. Klicke auf Create Template.

Sobald die Vorlage im Dashboard erscheint, klicke auf Add Custom Body und wähle Build Custom Body.

Dies öffnet den Visual Builder, wo du das gesamte Layout der Shop-Seite gestalten wirst.

1. Baue das Seitenlayout

Beginne mit einem einspaltigen Zeilen-Layout oben für deinen Shop-Titel. Füge ein Heading-Modul hinzu und tippe deinen Shop-Namen oder ein kurzes Etikett wie "Shop" oder "Unsere Produkte." Dies gibt der Seite einen klaren Startpunkt für Besucher.

Darunter, füge eine neue Sektion für dein Produktgitter hinzu. Hier wird der Loop Builder sein. Füge eine Zeile zu dieser Sektion hinzu, bestätige, dass die Zeile Flex verwendet, und aktiviere das Wrapping, falls nötig. Dies hilft, deine Produktkarten ordentlich über Reihen hinweg zu wickeln bei verschiedenen Bildschirmgrößen, überläufe und Layoutbrüche zu verhindern.

1. Gestalte deine Produktkarte

Innerhalb der Zeile, wähle die Spalte und öffne den Content-Tab. Scrolle herunter, um die Loop-Option zu finden und schalte Loop Element ein.

Sobald aktiviert, erscheinen die Loop-Abfrageeinstellungen. Setze den Posttyp auf Product, konfiguriere die Anzahl der Produkte pro Seite und setze Order By auf Datum oder deine bevorzugte Sortierung.

Dies teilt Divi 5 mit, welche Produkte es aus deinem WooCommerce-Store ziehen soll und in welcher Reihenfolge sie erscheinen.

Jetzt ist es Zeit, die Karte selbst zu gestalten. Beginne mit 10px Polsterung und einem 20px Randradius zu der Spalte. Diese kleinen Entscheidungen geben jeder Karte Atmungsraum und eine sauberere visuelle Form, trennen Produkte voneinander.

Für das Produktbild, gehe zu den Hintergrundbilder-Einstellungen der Spalte und verwende die Dynamic Content-Option, um das Produkt-Feature-Bild im Kontext der Schleife zu wählen. Dies verbindet das Hintergrundbild jeder Karte direkt mit dem Produkt-Feature-Bild in WooCommerce, sodass jede Karte automatisch das richtige Bild anzeigt.

Füge ein Icon-Modul und eine Modulgruppe innerhalb der Spalte hinzu. Das Icon kann visuellen Raum über den Produktdetails schaffen, sodass das Hintergrundbild sichtbar bleibt, und die Modulgruppe hält alle Kartenelemente zusammen und leichter als eine Einheit zu verwalten.

Passe das Icon-Modul an und passe seine Abstände an, sodass das Hintergrundbild genug Platz hat.

Innerhalb der Modulgruppe füge ein Heading-Modul für den Produkttitel hinzu. Schwebe über das Überschriftenfeld im Content-Tab, klicke auf das Dynamic Content-Icon, und wähle Loop-Produkt-Titel aus. Jeder Produktname wird automatisch aus deinem Store übernommen. Darunter füge ein Textmodul für den Preis hinzu und verbinde ihn mit Loop-Produkt-Preis, indem du die gleiche Dynamic Content-Option verwendest. Dies zieht den Preis direkt aus WooCommerce, einschließlich Verkaufspreise, wenn zutreffend.

Deine Basis-Shop-Seite ist bereit. Wenn du es weiterführen möchtest, kannst du ein Verkaufsabzeichen mit Bedingungen im Advanced-Tab hinzufügen, damit es nur bei rabattierten Produkten angezeigt wird, einen Hover-Effekt auf die Modulgruppe anwenden für ein runderes Gefühl und die gesamte Karte als Voreinstellung speichern, sodass du sie anderswo auf deiner Site wiederverwenden kannst. Dieser letzte Schritt lohnt sich, bevor du weitermachst, denn dasselbe Kartendesign kann später auf Kategorieseiten übernommen werden, ohne es von Grund auf neu zu erstellen.

Klicke auf Save in der Visual Builder Symbolleiste, dann auf Exit, um zum Theme Builder Dashboard zurückzukehren. Klicke auf Save Changes, um die Vorlage zu veröffentlichen. Besuche deine Shop-Seite im Frontend, um den Loop Builder mit deinen echten Produkten zu arbeiten zu sehen, der das Raster automatisch füllt.

Wenn du lieber einen schnelleren Aufbau mit weniger Anpassung hättest, kannst du auch deine Shop-Seite mit dem Woo Products Modul erstellen, das einen einfacheren Drag-and-Drop-Ansatz für Produktlisten bietet.

Beide Shop-Layout-Designs sind im Freebie enthalten. Importiere Shop-Section-Loop-Builder.json oder Shop-Section-Woo-Products.json aus dem Freebie-Ordner in deine Divi Library, um eines der Designs direkt zu verwenden.

Richte deine Produktseite ein

Jedes Produkt in deinem Shop benötigt seine eigene Seite, aber das bedeutet nicht, dass du jede einzeln entwerfen musst. Du erstellst eine Vorlage, weist sie allen Produkten zu, und WooCommerce zieht automatisch die richtigen Inhalte für jedes Produkt.

Zurück im Theme Builder, klicke auf Add New Template und wähle Build New Template. Im Template Settings Modal scrolle nach unten und markiere Alle Produkte. Klicke auf Create Template, dann klicke auf Add Custom Body und wähle Build Custom Body.

Hinzufügen der Module

Starte mit einem einspaltigen Zeilen-Layout oben und füge das Woo Notice Module hinzu. Dies verwaltet Systemnachrichten wie "Artikel in den Warenkorb gelegt" oder Lagerwarnungen und sollte über allem anderen auf der Seite stehen.

Darunter füge das Woo Breadcrumbs Module hinzu. Dies gibt Kunden einen klaren Navigationstrail, der zeigt, wo sie sich in deinem Shop befinden, wie Home / Kategorie / Produktname, sodass sie sich ohne den Browser-Button durch deinen Store bewegen können.

Füge als nächstes eine Zweispaltenreihe hinzu. Dies ist der Kern deines Produktseitendesigns. Die linke Spalte hält die Produkt-Visuals, und die rechte Spalte hält alles, was ein Kunde zum Kauf benötigt.

In der linken Spalte füge das Woo Produktbilder-Modul hinzu. Es zieht das Produkt-Feature-Bild und Galleriebilder direkt aus WooCommerce.

In der rechten Spalte baue den Kaufablauf von oben nach unten. Füge das Woo Produkttitel-Modul hinzu und setze die Überschriftenstufe auf H1. Darunter füge das Woo Produktbewertung-Modul hinzu, um Sternbewertungen und Rückschauanzahlen anzuzeigen. Füge danach das Woo Produktbeschreibung-Modul hinzu. Im Content Tab kannst du zwischen vollständiger Beschreibung oder kurzer Beschreibung wählen, abhängig davon, wie viel Detail du über der Falte möchtest.

Füge das Woo Produktpreis-Modul als nächstes hinzu, das automatisch sowohl reguläre als auch Verkaufspreise anzeigt. Darunter füge das Woo Produkt in den Warenkorb-Modul hinzu. Dies verwaltet den Menge-Auswahl, die In den Warenkorb-Button und Variationsdropdown für variable Produkte, alle von WooCommerce gezogen. Vervollständige die rechte Spalte mit dem Woo Produkt-Meta-Modul, das unterstützende Details wie SKU, Kategorien und Tags unter dem Warenkorb-Button anzeigt.

Darunter füge eine einspaltige Reihe hinzu und füge das Woo Produkttabs-Modul und, wenn du einen separaten Detailblock möchtest, das Woo Produktinformationen-Modul hinzu. Diese halten den unteren Teil der Seite organisiert und geben Kunden Zugriff auf Spezifikationen und Details, ohne den Hauptkaufbereich zu überladen. Füg eine weitere einspaltige Reihe unten hinzu und platziere das Woo Verwandte Produkte-Modul.

Das Woo Verwandte Produkte-Modul zieht typischerweise Produkte mit verwandten Begriffen, wie gemeinsamen Kategorien oder Tags, und zeigt sie als Gitter unten auf der Seite an, was den Kunden eine weitere Möglichkeit bietet, wenn das aktuelle Produkt nicht ganz passt. Beende mit dem Woo Produktbewertungen-Modul und dein Produktseitentemplate ist komplett. Überprüfe dein Layout über die Bildschirmgrößen hinweg mit Divi 5s Responsive Controls, bevor du speicherst.

Klicke auf Save im Visual Builder, dann Exit zurück zum Theme Builder-Dashboard und klicke auf Save Changes, um die Vorlage live zu machen. Hier ist ein vollständiger Leitfaden zum Erstellen einer Produktseite mit den neuen Woo-Modulen in Divi 5.

Du kannst die Produktseite-Template.json-Datei im Freebie-Ordner zu Beginn dieses Leitfadens finden, bereit, in deinen Theme Builder importiert zu werden.

Richte deine Warenkorb- und Checkout-Seiten ein

Die Warenkorb- und Checkout-Seiten sind dort, wo alles, was du gebaut hast, entweder sich auszahlt oder auseinanderfällt. Eine gut gestaltete Produktseite kann einen Kunden bis kurz vor den Kauf bringen, und ein überladener Warenkorb oder ein verwirrendes Checkout-Formular kann den Verkauf dennoch im letzten Moment verlieren. Diese beiden Seiten verdienen die gleiche Sorgfalt, die du in den Rest deines Shops gesteckt hast.

Aufbau der Warenkorbseite

Zurück im Theme Builder-Dashboard, klicke auf Add New Template und wähle Build New Template. Im Template Settings Modal scrolle nach unten zu WooCommerce Pages und markiere die Cart Option. Klicke auf Create Template, dann klicke auf Add Custom Body, um den Visual Builder zu öffnen.

Starte mit einem einspaltigen Zeilen-Layout oben. Füge ein Heading-Modul hinzu und setze den Text auf Warenkorb.

Füge das Woo Notice-Modul darunter hinzu und setze den Seitentyp im Content-Tab auf Warenkorb. Dies stellt sicher, dass das Modul Warenkorb-spezifische Nachrichten anzeigt, wie Gutscheinbestätigungen und Lageralarme, statt generischen.

Darunter füge das Woo Cart Produkte-Modul hinzu. Dies zeigt alles im Warenkorb des Kunden an, einschließlich Produktbilder, Namen, Mengen und Preise. Im Content-Tab kannst du genau kontrolliere, welche Elemente erscheinen, einschließlich Produktbild, Gutschein-Code-Feld, Warenkorb aktualisieren Button und Artikel entfernen Icon.

Füge eine neue Zweispaltenreihe darunter hinzu. Die linke Spalte ist ein guter Ort für das Woo Cross Sells-Modul, welches verwandte Produkte anzeigt und Kunden einen Grund gibt weiter zu browsen, bevor sie auschecken. In der rechten Spalte füge das Woo Cart Totals-Modul hinzu, welches die Auftragszusammenfassung anzeigt, einschließlich Zwischensumme, Versand, Steuern, wenn aktiviert, und den endgültigen Gesamtbetrag, zusammen mit dem Button zur Kasse gehen.

Aufbau der Checkout-Seite

Zurück im Theme Builder-Dashboard, klicke erneut auf Add New Template, dann wähle Build New Template. Im Template Settings Modal scrolle zu WooCommerce Pages und markiere das Checkout Kästchen. Klicke auf Create Template, füge einen benutzerdefinierten Körper hinzu und öffne den Visual Builder.

Die Checkout-Seite funktioniert gut mit einem Zweispalten-Layout. Starte mit einem einspaltigen Zeilen-Layout oben und füge das Woo Notice-Modul hinzu. Setze diesmal den Seitentyp auf Checkout, damit er Checkout-spezifische Nachrichten wie Feldvalidierungsfehler und Gutscheinbestätigungen anzeigt.

Füge eine Zweispaltenreihe darunter hinzu. In der linken Spalte füge das Woo Checkout Billing-Modul für Rechnungsdetails hinzu, das Woo Checkout Shipping-Modul darunter für die Versandadresse und das Woo Checkout Information-Modul unten für zusätzliche Bestellnotizen. In der rechten Spalte füge das Woo Checkout Details-Modul hinzu, um die Bestellübersicht mit Produktnamen, Mengen und Gesamtbeträgen anzuzeigen, dann darunter das Woo Checkout Payment-Modul für das Zahlungsformular und den Button Bestellung aufgeben.

Bevor du speicherst, gibt es ein paar Dinge, die du auf dieser Seite richtig machen solltest. Halte sie ablenkungsfrei, sodass nichts den Kunden davon abzieht, die Bestellung abzuschließen. Mach den Bestellung aufgeben-Button prominent und leicht zu finden. Füge Vertrauenssignale hinzu, wie ein Sicherheitsabzeichen oder akzeptierte Zahlungsmethoden-Icons, in der Nähe des Zahlungsabschnitts, da kleine Details wie diese das Käufervertrauen verbessern können. Und überprüfe die Seite sorgfältig auf dem Handy, denn ein großer Teil der Online-Käufe findet auf Telefonen statt, und ein Checkout, der auf kleineren Bildschirmen bricht, wird dir Verkäufe kosten.

Sobald du mit beiden Seiten zufrieden bist, speichere jede Vorlage im Visual Builder und klicke auf Save Changes im Theme Builder-Dashboard.

Die Cart-Page-Template.json und Checkout-Page-Template.json-Dateien sind beide im Freebie-Ordner zu Beginn dieses Leitfadens enthalten.

Kategorie- und Produkt-Entdeckungsseiten

Wenn dein Shop mehrere Produktkategorien hat, gibt eine dedizierte Seite für jede eine fokussiertere Browsing-Erfahrung und macht deinen Katalog einfacher zu navigieren. Das Erstellen einer folgt dem gleichen Prozess wie deine Shop-Seite, mit einem Unterschied in den Loop-Abfrageeinstellungen.

Wenn du das Loop Element in deiner Spalte aktivierst und den Posttyp auf Product setzt, siehst du ein Feld, um nur Beiträge mit bestimmten Begriffen einzuschließen. Wähle dort deine Produktkategorie und der Loop Builder zieht nur die Produkte, die dazu gehören.

Die Produktkategorie-Section.json-Datei ist im Freebie zu Beginn dieses Leitfadens enthalten, bereit, in deine Divi Library importiert und angepasst zu werden.

Vorschau deiner Ecommerce-Templates

Jede Vorlage in diesem Leitfaden hat eine fertiggestellte Version im Freebie unten. Wenn du alles auf einmal möchtest, importiere All-WooCommerce-Theme-Builder-Templates.json in deinen Theme Builder und All-Shop-and-Category-Sections.json in deine Divi Library. Oder hol dir einzelne Dateien nur für die Seiten, die du brauchst. So oder so, öffne das Inspector-Tool und tausche deine Design-Variablen, um jedes Layout im Einklang mit deiner Marke in nur wenigen Klicks zu bringen. So sieht das komplette Set aus.

Konfiguriere deine Shop-Einstellungen

Mit deinen Vorlagen erstellt, ist das Letzte, was zwischen dir und dem Live-Gang steht, deine WooCommerce-Konfiguration. Gehe zu WooCommerce > Einstellungen in deinem WordPress-Dashboard und arbeite die Essentials durch, bevor deine erste Bestellung eingeht. Unter dem Reiter Zahlungen, aktiviere die Gateways, die du akzeptieren möchtest, wie Stripe, PayPal oder direkte Banküberweisung. Unter Versand, erstelle Zonen für die Regionen, in die du lieferst und weise deine Sätze zu. Wenn du Steuern brauchst, aktiviere zuerst Steuerberechnungen unter WooCommerce > Einstellungen > Allgemein, dann konfiguriere den Steuerreiter und entscheide, ob deine Preise inklusive oder exklusive Steuer eingegeben werden.

Eine weitere Einstellung, die es sich lohnt, einzuschalten, bevor du live gehst, ist die Bestandsverfolgung. Gehe zu WooCommerce > Einstellungen > Produkte, aktiviere Bestandsverwaltung und setze Bestandsmengen für jedes Produkt individuell. WooCommerce kann Artikel automatisch als nicht vorrätig markieren, wenn verwaltete Bestände null erreichen, was dir hilft, Überverkäufe zu vermeiden.

Fang heute an, mit Divi 5 zu bauen!

Was du hier gebaut hast, ist mehr als ein Onlineshop. Es ist eine konsistentere Möglichkeit, einen zu bauen und zu verwalten. Die Entscheidungen, die du früh triffst, wie deine Design-Variablen, globale Vorlagen und Produktkarten-Styling, können durch den Rest deiner Website getragen werden, während sie wächst. Das ist, wo Divi 5 einen praktischen Unterschied macht: Es hilft dir, einen Shop zu erstellen, der über die Zeit einfacher zu aktualisieren, zu pflegen und konsistent zu halten ist.

Anstatt dieselben Änderungen Seite für Seite vorzunehmen, kannst du die Arbeit, die du bereits geleistet hast, im Rest deines Shops wiederverwenden. Das Ergebnis ist ein reibungsloseres Bau-Erlebnis und ein Schaufenster, das einfacher zu verwalten ist, während du weiter wächst.

Wenn Sie Unterstützung benötigen, können Sie sich jederzeit per E-Mail an hello@mikas.at wenden.