Divi WooCommerce Website erstellen – ultimative Anleitung

Um Ihre WordPress-Website mit E-Commerce-Funktionalität auszustatten, benötigen Sie ein robustes und zuverlässiges Plugin, und genau hier kommt WooCommerce ins Spiel. Als führende Kraft im E-Commerce-Bereich bietet WooCommerce eine Vielzahl leistungsstarker integrierter Funktionen, ergänzt durch zahlreiche optionale Erweiterungen, was es zur idealen Wahl für angehende Online-Shop-Besitzer macht.

In Kombination mit der Leistungsfähigkeit von Divi, unserem beliebten WordPress-Theme-Builder, sind die Möglichkeiten zum Aufbau einer außergewöhnlichen, skalierbaren E-Commerce-Website nahezu grenzenlos.

Zusammen bilden sie ein dynamisches Duo, das Ihre Träume von einem erfolgreichen Online-Geschäft Wirklichkeit werden lässt.

Mit dem Aufstieg des E-Commerce hat sich die Art und Weise, wie wir einkaufen und Geschäfte tätigen, revolutionär verändert. Die Bequemlichkeit, Produkte und Dienstleistungen online zu kaufen, hat das Verbraucherverhalten neu gestaltet, während Unternehmen die Möglichkeit erhalten haben, ein breiteres Publikum als je zuvor zu erreichen.

Durch das volle Potenzial von Divi können Sie mühelos eine professionelle E-Commerce-Website erstellen, die auf Ihre einzigartige Marke und Ihr Angebot zugeschnitten ist. Dank einer Fülle von Funktionen und Anpassungsoptionen können Sie einen Online-Shop erstellen, der nicht nur beeindruckend aussieht, sondern auch ein außergewöhnliches Benutzererlebnis bietet.

Lassen Sie uns also ohne Verzögerung die wesentlichen Schritte zur Einrichtung Ihres eigenen Online-Shops mit der leistungsstarken Kombination aus WooCommerce und Divi erkunden und herausfinden, wie Sie eine Divi WooCommerce Website erstellen können.

Wählen Sie einen Domainnamen und Webhosting

Das Einrichten einer Domain und eines Hostings ist der erste Schritt zur Erstellung Ihrer WooCommerce-Website mit Divi. Eine Domain ist die Webadresse, die Menschen verwenden, um auf Ihre Website zuzugreifen (z. B. www.ihrewebsite.com), und Hosting ist der Dienst, der die Dateien Ihrer Website speichert und für Besucher im Internet zugänglich macht.

Auswahl eines Domainnamens

Wählen Sie einen Domainnamen, der Ihre Marke, Ihr Geschäft oder den Zweck Ihrer Website widerspiegelt. Er sollte leicht zu merken und zu buchstabieren sein. Überlegen Sie, ob Sie Schlüsselwörter verwenden, die sich auf Ihre Nische beziehen, da dies bei der Suchmaschinenoptimierung (SEO) hilfreich sein kann.

Sie können Domain Provider wie GoDaddy, Namecheap oder Bluehost nutzen, um zu prüfen, ob der gewünschte Domainname verfügbar ist.

Sobald Sie einen verfügbaren Domainnamen gefunden haben, registrieren Sie ihn bei einem Provider Ihrer Wahl.

Auswahl eines Hosting-Anbieters

Suchen Sie nach einem renommierten Hosting-Anbieter, der WordPress-kompatibles Hosting anbietet. Es gibt verschiedene Hosting-Unternehmen wie Siteground, ALL-INKL und HostGator, unter anderem. 

Vergleichen Sie deren Hosting-Pläne, Funktionen, Serverleistung, Kundensupport und Preise, um den Anbieter zu finden, der Ihren Bedürfnissen und Ihrem Budget am besten entspricht.

WordPress installieren

Nachdem Sie sich erfolgreich für ein Webhosting angemeldet haben, ist der nächste Schritt die Einrichtung von WordPress auf Ihrer Domain.

Greifen Sie einfach auf Ihr Hosting-Kontrollpanel zu und suchen Sie den Abschnitt „WordPress“ oder „Website“.

Suchen Sie die Option zur Installation von WordPress und klicken Sie darauf. Folgen Sie den Anweisungen auf dem Bildschirm, und der Installationsassistent übernimmt alle technischen Aspekte der Einrichtung von WordPress für Sie.

HINWEIS 1: Wenn Sie sich für verwaltete WordPress-Hosting-Dienste wie WP Engine oder Kinsta entscheiden, wird der Installationsprozess bereits für Sie erledigt, da diese Anbieter speziell auf WordPress zugeschnitten sind.

HINWEIS 2: Eine weitere unkomplizierte Option ist die Wahl von Divi Hosting. Wenn Sie sich für Divi Hosting entscheiden, wird Divi automatisch installiert und mit Ihrem Lizenzschlüssel aktiviert. Ferner profitieren Sie von schnellem WordPress-Hosting, das alle Anforderungen von Divi erfüllt.

Installieren des Divi-Themes

Das Divi-Theme wurde mit Blick auf E-Commerce entwickelt! Mit dem installierten Divi-Theme haben Sie Zugriff auf leistungsstarke Funktionen und einen benutzerfreundlichen Page Builder, der Ihnen hilft, mühelos eine beeindruckende WooCommerce-Website zu erstellen.

Wenn Sie eine Divi Website von Grund auf neu erstellen möchten, folgen Sie der speziellen Schritt-für-Schritt-Anleitung.

Um Divi zu installieren, folgen Sie einfach den unten stehenden Anweisungen:

1. Laden Sie das Divi-Theme aus Ihrem ElegantThemes-Konto herunter und erhalten Sie den gezippten Theme-Ordner.
2. Melden Sie sich bei Ihrem WordPress-Dashboard an und navigieren Sie zu Design > Themes.
3. Klicken Sie oben auf die Schaltfläche „Neu hinzufügen“ und dann auf die Schaltfläche „Theme hochladen“.
4. Klicken Sie nun auf die Schaltfläche „Datei auswählen“ und wählen Sie die ZIP-Datei des Divi-Themes aus.
5. Klicken Sie auf die Schaltfläche „Jetzt installieren“, um die Installation des Themes zu starten.
6. Nach erfolgreicher Installation „Aktivieren“ Sie das Theme.

HINWEIS: Wenn Sie sich für ein Hosting-Konto eines Divi-Partners entschieden haben, wird das Theme automatisch für Sie installiert. Bei einem externen Hosting-Dienst müssen Sie den oben genannten Prozess befolgen.

Einrichten Ihres WooCommerce-Shops

Nachdem Sie WordPress und Divi installiert haben, ist es an der Zeit, Ihren WooCommerce-Shop[1] zu installieren und einzurichten.

Befolgen Sie folgende Schritte:

1. Navigieren Sie zum Plugin-Bereich und klicken Sie auf „Neu hinzufügen“.
2. Suchen Sie nach WooCommerce.
3. Installieren Sie das WooCommerce-Plugin.
4. Nach Abschluss der Installation klicken Sie auf „Aktivieren“.

Dank des benutzerfreundlichen „Onboarding-Assistenten“ ist die Einrichtung von WooCommerce ein Kinderspiel.

Dieser Assistent führt Sie Schritt für Schritt durch den Prozess. Nach der Installation und Aktivierung des Plugins stellt WooCommerce Ihnen eine Reihe von Fragen, um Ihren Shop zu konfigurieren. Dies bestimmt die Art des Shops, den Sie haben werden.

Es beginnt mit einigen grundlegenden Fragen wie Ihrer E-Mail-Adresse, Ihrem Wohnort und mehr.

Als Nächstes wählen Sie die Branche aus, zu der Ihr Shop gehört.

Dann wählen Sie den Produkttyp, den Ihr Shop verkaufen wird.

Sie können zwischen physischen und digitalen Produkten kostenlos wählen. Es gibt auch Optionen für Mitgliedschaften, Buchungen, Bundles oder eine maßgeschneiderte Kombination, aber diese sind kostenpflichtig.

Wenn Sie ein kostenpflichtiges Produkt wählen, können Sie es später im Assistenten problemlos kaufen.

Anschließend müssen Sie einige zusätzliche Informationen zu Ihrem Shop angeben, wie z. B. wie viele Artikel Sie verkaufen werden, aktuellen Jahresumsatz usw.

Dann entscheiden Sie, welche Funktionen in Ihrem WooCommerce-Shop enthalten sein sollen, um Ihr Geschäft zu optimieren und zu skalieren.

Abschließend wählen Sie ein Theme, um den Prozess abzuschließen. Ich empfehle dringend, das aktuell aktive Theme zu verwenden, welches Divi ist. Sie können das Theme später jederzeit ändern.

WooCommerce wird Sie bitten, Ihre Website mit Jetpack zu verbinden, einer nativen Integration, die Backups und verbesserte Sicherheit bietet. Wenn Sie ein Jetpack-Konto haben, melden Sie sich an; andernfalls erstellen Sie ein neues, um fortzufahren.

HINWEIS: Ich empfehle Ihnen dringend, alle verfügbaren Optionen sorgfältig zu überprüfen und sie gemäß Ihren spezifischen Vorlieben zu konfigurieren. Die Zeit, die Sie in die Anpassung dieser Einstellungen investieren, stellt sicher, dass Ihr WooCommerce-Shop perfekt auf Ihre Geschäftsanforderungen abgestimmt ist und das Einkaufserlebnis Ihrer Kunden verbessert.

Ein Produkt hinzufügen

Jetzt legen wir mit der Erstellung unseres ersten Produkts los! Klicken Sie einfach auf „Produkte hinzufügen“, um zu beginnen.

Es wird Sie fragen, welche Art von Produkt Sie basierend auf Ihrer Auswahl im WooCommerce-Konfigurationsschritt hinzufügen möchten. Ich wähle hier physische Produkte.

Im WooCommerce-Editor können Sie Ihr erstes Produkt ganz einfach erstellen, indem Sie einen Namen, eine Beschreibung und den Verkaufspreis angeben. Während das Produktkonfigurationsfeld detaillierte Registerkarten für weitere Optionen bietet, konzentriert sich dieses Tutorial auf die einfachste und schnellste Methode, um Ihren Shop zu starten.

Fühlen Sie sich frei, weitere Details nach Ihren Wünschen zu erkunden und anzupassen.

Nachdem Sie die Produktkonfiguration abgeschlossen haben, speichern und veröffentlichen Sie das Produkt, um es für Kunden zum Kauf verfügbar zu machen. Das Endergebnis wird etwa so aussehen:

Als Nächstes müssen Sie die Zahlungen einrichten, Steuersätze hinzufügen, zusätzliche Plugins installieren oder verwalten und schließlich Ihren Shop personalisieren.

Wenn Sie möchten, können Sie die Einstellungen manuell anpassen, indem Sie zu WooCommerce > Einstellungen in Ihrem Dashboard navigieren.

Ein variables Produkt erstellen

Die Variable-Produkt-Funktion von WooCommerce ermöglicht es Ihnen, angepasste Produkte mit mehreren Variationen zu erstellen, wie z. B. verschiedene Farben, Größen und Bilder. Dies vereinfacht die Produktverwaltung und verhindert, dass Sie mehrere Versionen desselben Artikels als separate Produkte hinzufügen müssen.

Hier sind die Schritt-für-Schritt-Anleitungen zur Erstellung variabler Produkte für Ihren WooCommerce-Shop:

Schritt 1: Attribute erstellen

1. Gehen Sie zum Abschnitt „Produkte“ und wählen Sie „Attribute“ aus der Menüleiste.
2. Geben Sie den Attributtitel im Feld „Name“ ein. Ich nenne es „Farbe“.
3. (Optional) Sie können das Feld „Slug“ ausfüllen, falls erforderlich.
4. Klicken Sie abschließend auf die Schaltfläche „Attribut hinzufügen“, um Ihre Änderungen zu speichern.

Schritt 2: Spezifische Werte eines Attributs hinzufügen

1. Klicken Sie auf die Option „Begriffe konfigurieren“ in der Spalte „Begriffe“ Ihres Attributs.
2. Auf der linken Seite finden Sie ein Formular „Neue Farbe hinzufügen“. Geben Sie die Farben ein, in denen Sie Kleidung verkaufen, wie z. B. rot, blau oder grün.
3. Um weitere Farben hinzuzufügen, klicken Sie einfach auf die Schaltfläche „Neue Farbe hinzufügen“.

Schritt 3: Attribute zu einem einzelnen Produkt hinzufügen

1. Gehen Sie zum Abschnitt „Produkte“ in der linken Menüleiste. Wählen Sie entweder ein vorhandenes Produkt aus oder fügen Sie ein neues hinzu, ganz nach Ihrem Belieben. Wählen Sie im Abschnitt „Produktdaten“ „Variables Produkt“ aus dem Dropdown-Menü aus.
2. Gehen Sie nun zum Tab „Attribute“, wo Sie eine Liste der Attribute finden, die Sie für Ihr WooCommerce-Produkt erstellt haben.
3. Wählen Sie eines der Attribute aus der Liste aus; nehmen wir an, Sie wählen das Attribut „Farbe“.
4. Wenn Ihr Produkt mehrere Farben haben kann, können Sie mehr als eine Option auswählen oder einfach auf die Schaltfläche „Alle auswählen“ klicken.
5. Stellen Sie sicher, dass Sie sowohl die Optionen „Auf der Produktseite sichtbar“ als auch „Für Variationen verwendet“ auswählen. Dadurch wird das Attribut auf der Produktseite angezeigt und ermöglicht Variationen basierend auf dem ausgewählten Attribut.
6. Klicken Sie auf „Attribute speichern“, um Ihre Änderungen zu speichern und das Produkt zu aktualisieren.

Schritt 4: Variationen zu Ihrem Produkt hinzufügen

1. Klicken Sie im Abschnitt „Variationen“ auf „Variation hinzufügen“ aus dem Dropdown-Menü, das sich direkt unter den Attributen befindet.
2. Sobald Sie auf „Los“ klicken, erscheint ein neues Dropdown-Menü.
3. Jetzt können Sie das Attribut für Ihre Variationen auswählen, wie eine bestimmte Farbe.

Schritt 5: Den Rest der Einstellungen anpassen

Erweitern Sie das Variationen-Panel, um die Produktinformationen für jede Variation leicht anzupassen.

Diese Funktion ermöglicht es Ihnen, Bilder hochzuladen, Preise, Lagerstatus, Abmessungen und andere relevante Details für jede Produktvariation festzulegen. Insbesondere ist das Festlegen eines Preises für jede Variation obligatorisch.

Speichern Sie einfach Ihre Änderungen, indem Sie auf „Änderungen speichern“ klicken, um sie anzuwenden.

Veröffentlichen/Aktualisieren Sie das Produkt und Sie sind fertig.

Eine einzelne oder mehrere Produktseiten erstellen

Mit dem Divi Builder haben Sie die Möglichkeit, eine individuell gestaltete Produktseite zu entwerfen. Zudem können Sie diese personalisierte Einzelproduktseite bestimmten Artikeln, Produkten innerhalb bestimmter Kategorien oder mit bestimmten Tags zuweisen.

1. Gehen Sie zu Divi > Theme Builder.
2. Fügen Sie wie zuvor eine neue Vorlage hinzu.
3. Klicken Sie auf „Neue Vorlage erstellen“, um von Grund auf neu zu beginnen.
4. Wählen Sie im Produktblock „Alle Produkte“, um das benutzerdefinierte Produkt zuzuweisen.
5. Klicken Sie auf die Schaltfläche „Vorlage erstellen“.
6. Klicken Sie anschließend auf Benutzerdefinierten Body hinzufügen > Benutzerdefinierten Body erstellen.

Bevor Sie Divi Module hinzufügen, müssen Sie einige Zeilen hinzufügen. In der ersten Zeile verwenden wir die Module „Woo Breadcrumb“ und „Woo Chart Notice“.

1. Klicken Sie zuerst auf den grünen Plus-Button, um eine neue Zeile einzufügen.
2. Wählen Sie die Einzelspaltenstruktur und fügen Sie das Modul „Woo Breadcrumb“ hinzu. Stellen Sie sicher, dass Sie im Inhaltsblock „Dieses Produkt“ aus der Produktoption auswählen. Gehen Sie anschließend zum Design-Tab, wo Sie das Modul nach Ihren Wünschen anpassen können.

Nachdem Sie das Woo Breadcrumb-Modul konfiguriert haben, fügen wir das Woo Cart Notice-Modul hinzu.

Stellen Sie sicher, dass Sie im Inhaltsblock „Dieses Produkt“ aus der Produktoption auswählen. Um die Typografie, Textfarbe und Button-Stile anzupassen, wechseln Sie zum Design-Tab.

Um den Hintergrund zu ändern, navigieren Sie einfach zum Hintergrundblock im Inhalts-Tab. Vergessen Sie nicht, das grüne Checklisten-Symbol zu klicken, sobald Sie neue Änderungen vorgenommen haben.

In der zweiten Zeile verwenden wir folgende Module:

– Woo Image: Um das Produktbild anzuzeigen.
– Woo Title: Um den Produkttitel zu präsentieren.
– Woo Rating: Um die Produktbewertung anzuzeigen.
– Woo Price: Um den Produktpreis zu zeigen.
– Woo Description: Um die Produktbeschreibung auszustellen.
– Woo Add To Cart: Um den „In den Warenkorb“-Button hinzuzufügen.
– Woo Meta: Um zusätzliche Produkt-Metadaten wie SKU, Kategorien und Tags anzuzeigen.

Um zu beginnen, fügen Sie eine neue Zeile hinzu, indem Sie auf den grünen Plus-Button klicken. Dieses Mal wählen Sie die Zweispaltenstruktur. Fügen Sie in der linken Spalte das Modul „Woo Image“ hinzu. Stellen Sie sicher, dass Sie im Inhaltsblock „Dieses Produkt“ aus der Produktoption auswählen.

Hier können Sie unter dem Elementblock drei Optionen festlegen. Stellen Sie außerdem die Bildgröße, den Randradius und den Text des Verkaufsabzeichens im Design-Tab ein. Sobald Sie mit dem Design fertig sind, klicken Sie auf das grüne Checklisten-Symbol, um die neuen Änderungen zu speichern.

Navigieren Sie nun zur rechten Spalte und fügen Sie das Modul „Woo Title“ hinzu. Wie zuvor wählen Sie im Inhaltsblock „Dieses Produkt“ aus der Produktoption. Im Design-Tab können Sie den Titel stylen und die Textfarbe sowie die Typografie einstellen.

Nachdem Sie das Woo Title-Modul fertiggestellt haben, fügen Sie die folgenden Module nacheinander auf ähnliche Weise hinzu:

– Woo Rating
– Woo Price
– Woo Description
– Woo Add To Cart
– Woo Meta

In der dritten Zeile verwenden Sie das Modul „Woo Tabs“ und das Modul „Woo Related Products“.

Der Prozess ist ähnlich wie zuvor: Fügen Sie eine neue Zeile hinzu, indem Sie auf den grünen Plus-Button klicken > Einzelspaltenstruktur auswählen > Woo Tabs-Modul hinzufügen.

Das Woo Tabs-Modul umfasst drei Tabs: Beschreibung, zusätzliche Informationen und Bewertung. Um einen bestimmten Tab zu deaktivieren, navigieren Sie zum Inhaltsblock und deaktivieren Sie den entsprechenden Tab in der Option „Tabs einbeziehen“.

Fügen Sie nun auf die gleiche Weise das Modul „Woo Related Products“ hinzu. Im Inhalts-Tab können Sie die Produktanzahl, das Spaltenlayout und die Produktkategorien festlegen und dieses Modul auch über die Option im Design-Tab gestalten.

Sobald Sie alle besprochenen Module hinzugefügt haben, speichern Sie Ihre Änderungen, indem Sie auf die Schaltfläche „Speichern“ unten rechts klicken und den Divi Builder-Editor mit dem X-Symbol oben rechts verlassen. Schließlich wenden Sie die Änderungen auf der Theme-Builder-Seite an, indem Sie auf „Änderungen speichern“ klicken.

Dies wird das endgültige Vorlagen-Design sein.

Shop-Seiten erstellen

Beim Einrichtungsassistenten generiert WooCommerce automatisch eine Standardseite namens „Shop“, die als Produktfeed-Anzeige dient.

Mit dem Divi Builder haben Sie die Flexibilität, eine personalisierte WooCommerce-Shop-Seite zu gestalten, auf der Sie zusätzliche Elemente Ihrer Wahl neben dem Produktfeed einbinden können.

Hier ist der Ablauf:

1. Gehen Sie in Ihrem WordPress-Dashboard zu Divi > Theme Builder.
2. Fügen Sie eine neue Vorlage hinzu, indem Sie auf den Plus-Button klicken.
3. Klicken Sie auf „Neue Vorlage erstellen“, um von Grund auf neu zu beginnen (Wählen Sie „Aus Bibliothek hinzufügen“, wenn Sie eine fertige Vorlage hochladen möchten).
4. Wählen Sie im Block „WooCommerce-Seiten“ die Option „Shop“ aus (hier erstellen wir eine Vorlage für die Shop-Seite).
5. Klicken Sie auf die Schaltfläche „Vorlage erstellen“.
6. Sobald die Vorlage hinzugefügt wurde, klicken Sie auf Benutzerdefinierten Body hinzufügen > Benutzerdefinierten Body erstellen.

Jetzt ist es an der Zeit, ein Modul hinzuzufügen.

Bevor Sie ein Modul hinzufügen können, müssen Sie zuerst eine Zeile erstellen. Wählen Sie einfach eine Zeile aus, suchen Sie dann nach dem Woo-Modul und wählen Sie Woo-Produkte aus. Es werden standardmäßig die neuesten Produkte angezeigt.

Um den Standardfeed zu ändern, navigieren Sie zum Inhalts-Tab im Einstellungsfenster. In diesem Abschnitt haben Sie die Möglichkeit, die Menge der angezeigten Produkte, die Anzahl der Spalten und das Produktlayout anzupassen. Um die Paginierung zu aktivieren, gehen Sie zum Block „Elemente“ im Inhalts-Tab des Einstellungsfensters und schalten die Option „Paginierung anzeigen“ ein.

Um das Erscheinungsbild des Moduls anzupassen, navigieren Sie zum Design-Tab. In diesem Tab finden Sie etwa 15 Designoptionen, die Sie anpassen können. Diese Optionen ermöglichen es Ihnen, verschiedene Aspekte wie Typografie (Schriftfamilie, Größe, Stil), Produktelemente (Preis, Titel, Verkaufsabzeichen), Textfarbe, Bildgröße und mehr anzupassen.

Wenn Sie fertig sind, klicken Sie auf die grüne Schaltfläche in der unteren rechten Ecke, um Ihre Änderungen zu speichern. Klicken Sie nun auf das X-Symbol in der oberen rechten Ecke, um den Divi Builder-Editor zu verlassen und zur Theme-Builder-Editierseite zurückzukehren.

Auf der Theme-Builder-Seite klicken Sie auf die Schaltfläche „Änderungen speichern“, um die gerade vorgenommenen Änderungen anzuwenden.

Eine Produktkategorieseite erstellen

Sie werden nun die Produktkategorieseite erstellen, die der Erstellung einer „Shop“-Seite fast identisch ist. Sie können bei Bedarf mehrere benutzerdefinierte Produktkategorieseiten erstellen.

1. Gehen Sie zu Divi > Theme Builder.
2. Fügen Sie eine neue Vorlage hinzu, indem Sie auf den Plus-Button klicken.
3. Klicken Sie auf „Neue Vorlage erstellen“, um von Grund auf neu zu beginnen.
4. Wählen Sie im Abschnitt „Archivseiten“ die Option „Alle Produktkategorieseiten“.
5. Klicken Sie auf die Schaltfläche „Vorlage erstellen“.
6. Klicken Sie anschließend auf Benutzerdefinierten Body hinzufügen > Benutzerdefinierten Body erstellen.

Die Erstellung einer Produktkategorieseite ist fast identisch mit der Erstellung einer Shop-Seite. Sie folgen hier dem gleichen Verfahren.

Wählen Sie einfach eine Zeile aus und fügen Sie dann das Woo-Produkte-Modul hinzu. Es werden standardmäßig die neuesten Produkte angezeigt. Stellen Sie sicher, dass Sie „Aktuelle Seite verwenden“ im Inhalts-Tab von „NEIN“ auf „JA“ umschalten. Bearbeiten und gestalten Sie den Rest nach Ihren Vorlieben.

Nun fügen wir eine Kopfzeile für die WooCommerce-Produktkategorieseite hinzu, indem wir das Post-Titel-Modul verwenden.

Zuerst müssen wir eine Zeile hinzufügen und dann das Post-Titel-Modul einfügen. Schalten Sie unter „Elemente“ die Optionen „Meta anzeigen“ und „Beitragsbild anzeigen“ auf „NEIN“, da wir hier nur den Titel anzeigen möchten.

Nachdem Sie dieses Modul gespeichert haben, wird Ihnen Platzhaltertext angezeigt, der besagt „Ihr dynamischer Beitragstitel wird hier angezeigt.“ Dieser Text ist lediglich ein temporärer Platzhalter für Ihren Kategorie-Titel, also keine Sorge.

Nun fügen wir das Breadcrumb-Modul hinzu. Stellen Sie sicher, dass in den „Produkteinstellungen“ „Dieses Produkt“ ausgewählt ist, da dies den dynamischen Kategorie-Titel bestimmt. Anschließend können Sie weitere Designänderungen im Design-Tab vornehmen.

Sie sind hier fertig.

Um Ihre Änderungen im Divi Builder-Editor zu speichern, klicken Sie auf die Schaltfläche „Speichern“ unten rechts. Verlassen Sie den Editor dann mit dem X-Symbol oben rechts. Schließlich wenden Sie die Änderungen auf der Theme-Builder-Seite an, indem Sie auf „Änderungen speichern“ klicken.

Eine Warenkorb-Seite erstellen

Um eine WooCommerce-Warenkorbseite mit dem Divi Builder zu erstellen, können Sie die Module „Woo Cart Products“ und „Woo Cart Totals“ (Warenkorb-Gesamtsumme) verwenden. Diese Module ermöglichen es Ihnen, eine Liste der in den Warenkorb gelegten Produkte zusammen mit einem praktischen Checkout-Button anzuzeigen.

Der Prozess ist fast identisch mit der Erstellung der Produktseite.

1. Gehen Sie in Ihrem WordPress-Dashboard zu Divi > Theme Builder.
2. Fügen Sie eine neue Vorlage hinzu, indem Sie auf den Plus-Button klicken.
3. Klicken Sie auf „Neue Vorlage erstellen“, um von Grund auf neu zu beginnen.
4. Wählen Sie dann „Warenkorb“ im WooCommerce-Seitenblock aus.
5. Klicken Sie auf die Schaltfläche „Vorlage erstellen“.
6. Klicken Sie anschließend auf Benutzerdefinierten Body hinzufügen > Benutzerdefinierten Body erstellen.

Sie können die Produkte im Warenkorb mit dem Modul „Woo Cart Products“ anzeigen und die Gesamtsumme der hinzugefügten Produkte im Warenkorb mit dem Modul „Woo Cart Totals“ anzeigen. Später können Sie das Layout mit zusätzlichen Modulen anpassen.

Speichern Sie Ihre Änderungen, indem Sie auf die Schaltfläche „Speichern“ unten rechts klicken, und verlassen Sie den Divi Builder-Editor mit dem X-Symbol oben rechts. Wenden Sie die Änderungen auf der Theme-Builder-Seite an, indem Sie auf „Änderungen speichern“ klicken.

Eine Checkout-Seite erstellen

Der Prozess zur Erstellung einer Check-out WooCommerce Seite mit dem Divi Theme Builder ähnelt stark den Schritten zur Erstellung einer benutzerdefinierten Warenkorbseite, die zuvor beschrieben wurden.

Dafür können Sie fünf verschiedene WooCommerce Module von Divi verwenden (Woo Checkout Billing, Woo Checkout Details, Woo Checkout Information, Woo Checkout Payments und Woo Checkout Shipping), die das Checkout-Formular effektiv anzeigen.

Folgen Sie diesen Schritten:

1. Gehen Sie zu Divi > Theme Builder.
2. Klicken Sie auf den Plus-Button, um eine neue Vorlage hinzuzufügen.
3. Klicken Sie auf „Neue Vorlage erstellen“, um von Grund auf neu zu beginnen.
4. Wählen Sie dann „Warenkorb“ im WooCommerce-Seitenblock aus.
5. Klicken Sie auf die Schaltfläche „Vorlage erstellen“.
6. Klicken Sie anschließend auf Benutzerdefinierten Body hinzufügen > Benutzerdefinierten Body erstellen.
7. Suchen Sie nach den zuvor erwähnten Modulen und passen Sie diese im Einstellungsfenster an. Sobald Sie mit der Anpassung fertig sind, können Sie je nach Bedarf weitere Module verwenden.

Speichern Sie Ihre Änderungen, indem Sie auf die Schaltfläche „Speichern“ in der unteren rechten Ecke klicken, und verlassen Sie den Divi Builder-Editor, indem Sie auf das X-Symbol in der oberen rechten Ecke klicken. Speichern Sie die Änderungen auf der Theme-Builder-Seite, um die Änderungen anzuwenden.

Eine Kundenseite erstellen

Die WooCommerce-Kundenseite wird nach der Installation und Aktivierung von WooCommerce mit Divi automatisch für Sie erstellt. Um diese Seite zu bearbeiten, gehen Sie wie folgt vor:

1. Gehen Sie im WordPress-Dashboard zu Seiten > Alle Seiten.
2. Suchen Sie die Seite „Mein Konto“ in der Seitenliste und klicken Sie auf „Bearbeiten“. Sie können direkt zur Divi-Visual-Builder-Seite navigieren, indem Sie auf „Mit Divi bearbeiten“ klicken.
3. Im Account-Seiten-Editor sehen Sie den WooCommerce-Shortcode, der für die Generierung des Inhalts der Account-Seite verantwortlich ist.
4. Klicken Sie auf die Schaltfläche „Divi Builder verwenden“, um den Divi Page-Builder zu starten, mit dem Sie die Seite mithilfe der leistungsstarken Divi-Builder-Tools anpassen können.
5. Wählen Sie im erscheinenden Dialogfeld die Option auf der linken Seite und klicken Sie auf die Schaltfläche „Start Building“, um den Anpassungsprozess zu starten.
6. Der WooCommerce-Shortcode wird automatisch in ein Textmodul innerhalb des Divi Builders eingefügt. 
7. Jetzt können Sie das Layout der WooCommerce-Kundenseite mit den Designoptionen des Moduls anpassen und Ihre bevorzugten Designoptionen hinzufügen, einschließlich Kopfzeile, Hintergrundfarbe, Textpositionen usw.
8. Wenn Sie mit der Anpassung fertig sind, speichern Sie Ihre Änderungen, indem Sie auf die Schaltfläche „Speichern“ in der unteren rechten Ecke klicken, und dann auf „Visual Builder verlassen“.

Ihren Divi WooCommerce Shop testen und starten

Das Testen und Starten Ihrer Website mit Divi und WooCommerce zusammen ist eine kritische Phase im Website-Entwicklungsprozess.

Es beinhaltet gründliche Tests, um sicherzustellen, dass Ihr Online-Shop ordnungsgemäß funktioniert, benutzerfreundlich ist und bereit ist, für Ihre Kunden live zu gehen.

Hier sind die Schritte, die beim Testen und Starten eines neuen Divi Shop nicht fehlen dürfen:

1. Funktionstests:

• Überprüfen Sie alle wesentlichen Funktionen Ihres WooCommerce Shops, wie das Hinzufügen von Produkten zum Warenkorb, das Fortfahren zur Checkout Page und das Abschließen eines Kaufs.
• Testen Sie verschiedene Zahlungsmethoden, um sicherzustellen, dass sie korrekt Zahlungen verarbeiten.
• Stellen Sie sicher, dass Bestell Bestätigungs-E-Mails nach einem erfolgreichen Kauf an Kunden gesendet werden.

2. Responsive Tests:

• Testen Sie Ihre Website auf verschiedenen Geräten und Bildschirmgrößen, einschließlich Desktops, Laptops, Tablets und Smartphones.
• Stellen Sie sicher, dass das Layout und der Inhalt Ihrer Website gut auf verschiedene Bildschirmauflösungen reagieren und aussehen.
• Überprüfen Sie, dass alle Elemente, wie Buttons und Bilder, korrekt auf Mobilgeräten angezeigt werden.

3. Lasttests:

•  Verwenden Sie Lasttest-Tools oder -Dienste, um die Leistung Ihrer Website bei hohem Traffic zu bewerten.
• Stellen Sie sicher, dass Ihr Hosting-Server mehrere gleichzeitige Benutzer ohne erhebliche Einbußen in Performance bewältigen kann.

4. Checkout-Prozess testen:

• Durchlaufen Sie den gesamten Checkout-Prozess als Kunde, um mögliche Hindernisse oder verwirrende Schritte zu identifizieren.
• Stellen Sie sicher, dass der Checkout-Prozess reibungslos, leicht verständlich ist und nur wenige Schritte für Kunden erfordert, um ihre Einkäufe abzuschließen.

5. E-Mails testen:

• Stellen Sie sicher, dass alle automatisierten E-Mails, wie Bestellbestätigungen, Versandbenachrichtigungen und Passwort-Zurücksetzen-E-Mails, korrekt funktionieren.
• Überprüfen Sie, dass diese E-Mails in den Posteingängen der Kunden ankommen und nicht im Spam-Ordner landen.

6. Letzte Überprüfung:

• Führen Sie eine abschließende Überprüfung am Divi WooCommerce Themes des Inhalts, Designs und der Produktinformationen Ihrer Website durch, um Genauigkeit und Konsistenz sicherzustellen.
• Überprüfen Sie, dass Benutzer Konten erstellen und auf ihre Kontoinformationen zugreifen können, indem Sie den Benutzerregistrierungs- und Anmeldeprozess testen.

7. Website-Backup erstellen:

•  Erstellen Sie ein vollständiges Backup Ihrer Website, einschließlich der Datenbank und aller Dateien, vor dem endgültigen Start.

8. Start Ihrer WooCommerce-Website:

• Sobald Sie alle Tests abgeschlossen haben und sicher sind, dass Ihre Website korrekt funktioniert, ist es Zeit für den Start.
• Entfernen Sie alle „Under Construction“- oder „Coming Soon“-Seiten und machen Sie Ihre Website für die Öffentlichkeit zugänglich.
• Verkünden Sie den Start Ihres WooCommerce-Shops über Ihre Social-Media-Kanäle, E-Mail-Newsletter und andere Marketingplattformen.

Fazit zu Divi im Zusammenspiel mit WooCommerce

Das Erstellen eines Online-Shops mit Divi ist ein nahtloser Prozess, dank seiner Fülle an Funktionen, umfangreichen Anpassungsoptionen und der Integration von WooCommerce und den Woo-Modulen.

Mit Divi können Sie mühelos eine WooCommerce-Website erstellen und Ihre Produkte und Dienstleistungen professionell und ansprechend präsentieren.

Mit dem Divi Builder können Sie einen benutzerdefinierten, WooCommerce-basierten Shop ohne Programmierkenntnisse erstellen, sodass Sie sich auf das Wachstum Ihres Geschäfts konzentrieren können.

Der WooCommerce-Builder von Divi ermöglicht es Ihnen, benutzerdefinierte Seiten für wichtige Elemente wie die Shop-Seite, die Warenkorb-Seite und die Checkout-Seite zu gestalten und Ihre E-Commerce-Website an die Identität Ihrer Marke anzupassen.

Folgen Sie dem oben beschriebenen Prozess und nutzen Sie die Leistungsfähigkeit der Woo-Modulen von Divi. Genießen Sie eine zeiteffiziente Lösung, um Ihre WooCommerce-Produkte wunderschön zu präsentieren und Ihren Online-Shop mühelos hervorzuheben.