[ad_1]
WooCommerce ist das beliebteste Plugin, um eine WordPress-basierte E-Commerce-Website zu erstellen. Es ist extrem anpassbar und ermöglicht es dir, eine einzigartige E-Commerce-Website mit deinem Design zu erstellen. Auch wenn du keine Programmierkenntnisse hast. Divi kann dir dabei helfen, eine vollständig angepasste WooCommerce-Website ohne Programmierkenntnisse zu erstellen. Wie das geht, zeigen wir dir in diesem Beitrag.
Divi selbst ist ein Produkt von Elegant Themes. Es ist ein WordPress-Theme, das mit einem integrierten Page Builder namens Divi Builder ausgestattet ist.
Divi Builder verfügt über eine Theme-Builder-Funktion, mit der du einen benutzerdefinierten Header, eine benutzerdefinierte Kopfzeile und andere Teile deines WordPress-Themas erstellen kannst. Wenn du WooCommerce in deinem WordPress-Theme installiert hast, kannst du auch benutzerdefinierte WooCommerce-Seiten erstellen, z. B. eine Shop-Seite, eine Seite für ein einzelnes Produkt, eine Kassenseite und so weiter. Dies kannst du mit dem visuellen Editor des Divi Builders tun. Du musst nicht eine einzige Zeile Code anfassen. Divi Builder selbst ist in zwei Versionen erhältlich. Er ist nicht nur ein integraler Bestandteil des Divi-Themas, sondern auch als eigenständiges Plugin erhältlich, das du auf anderen WordPress-Themes installieren kannst.
Die Hauptseiten von WooCommerce verstehen
Bevor du weitermachst, ist es wichtig, die Hauptseiten von WooCommerce zu verstehen. Hier sind die wichtigsten Seiten von WooCommerce:
- Shop-Seite
- Warenkorb Seite
- Kassenseite
- Kundenkonto-Seite
- Einzelne Produktseite
- Produktarchiv-Seiten
Diese Seiten wurden bei der Installation des WooCommerce-Plugins erstellt. Sie werden durch Vorlagendateien gesteuert, die du unter dem woocommerce/templates Ordner (vollständiger Pfad: wp-content/plugins/woocommerce/templates). Mit Divi Builder kannst du benutzerdefinierte Vorlagen erstellen, um die Standardvorlagen von WooCommerce zu ersetzen. Die WooCommerce-Seiten, für die du die benutzerdefinierten Vorlagen erstellen kannst, sind:
- Shop-Seite
- Warenkorb Seite
- Kassenseite
- Kundenkonto-Seite
- Einzelne Produktseite
- Produktarchivseiten (Tags und Kategorien)
Wie man eine WooCommerce-Website mit Divi erstellt
Bevor du loslegst, stelle sicher, dass du das Divi-Theme (oder das Divi Builder-Plugin, wenn du es für ein anderes Theme verwenden möchtest) auf deiner WordPress-Website installiert hast. Stelle außerdem sicher, dass du das WooCommerce-Plugin installiert und aktiviert hast.
Sobald du bereit bist, kannst du damit beginnen, die benutzerdefinierten Vorlagen zu erstellen, die die Standardvorlagen von WooCommerce ersetzen:
Erstellen der benutzerdefinierten Shop-Seite
Wir haben einen separaten Artikel erstellt, der beschreibt, wie du mit dem Divi Builder eine benutzerdefinierte WooCommerce-Shopseite erstellst. Du kannst ihn lesen, wenn du daran interessiert bist.
Um eine benutzerdefinierte Shop-Seite mit dem Divi Builder zu erstellen, gehst du zunächst zu Divi -> Theme Builder in deinem WordPress-Dashboard. Füge eine neue Vorlage hinzu, indem du auf den Plus-Button klickst. Wähle Shop auf der WooCommerce Seiten Block und klicken Sie auf den Vorlage erstellen Button.
Klicke auf Custom Body hinzufügen -> Custom Body bauen.
Im erscheinenden Dialog kannst du die Option ganz links auswählen (VON GRUND AUF NEU ERSTELLEN), um die benutzerdefinierte Shop-Seite von Grund auf neu zu erstellen, und klicken Sie auf die Schaltfläche Erstellen starten um mit der Erstellung der Vorlage zu beginnen. Oder du kannst auch die Schaltfläche EIN VORGEFERTIGTES LAYOUT AUSWÄHLEN Option, wenn du die benutzerdefinierte Shop-Seite aus einem vorgefertigten Layout erstellen möchtest.
Wähle eine Zeile aus und füge dann das Shop-Modul hinzu.
Wie du siehst, lädt das Shop-Modul deine WooCommerce-Produkte automatisch in den Canvas-Bereich. Du kannst die Einstellungen wie die Anzahl der Produkte pro Seite und die Anzahl der Spalten auf der Inhalt Registerkarte im Einstellungsfenster. Um die Paginierung zu aktivieren, kannst du die Elemente Block.
Um das Shop-Modul zu gestalten, kannst du auf der Seite Design Registerkarte in den Einstellungen. Es gibt etwa 14 Blöcke, die du auf dieser Registerkarte öffnen kannst. Du kannst z. B. die Typografie (Schriftfamilie, Schriftgröße, Schriftstil usw.) der Produktelemente (Preis, Titel, Verkaufsabzeichen usw.), die Textfarbe, die Bildgröße usw. einstellen.
Du kannst deiner benutzerdefinierten Shop-Seite weitere Module hinzufügen, ganz nach deinen Bedürfnissen. Wenn du damit fertig bist, kannst du auf die Schaltfläche Speichern Schaltfläche in der rechten unteren Ecke, um die Änderungen zu speichern, gefolgt von der Schaltfläche X Symbol in der oberen rechten Ecke, um den Divi Builder-Editor zu verlassen. Dadurch kehrst du zur Seite des Theme Builder-Editors zurück.
Auf der Theme Builder-Seite klickst du auf das Änderungen speichern Schaltfläche, um die soeben vorgenommene Änderung (in diesem Fall die benutzerdefinierte Shop-Seite) zu übernehmen.
Erstellen der benutzerdefinierten Warenkorbseite
Wenn du mit dem Divi Builder eine benutzerdefinierte WooCommerce-Warenkorbseite erstellst, kannst du das Modul Post Content verwenden. Das Modul zeigt die Produkte, die in den Warenkorb gelegt wurden, in einer Liste an, zusammen mit der Schaltfläche für die Kasse. Hier ist das Beispiel.
Divi Builder bietet kein vorgefertigtes Layout für die Warenkorbseite, du musst sie also von Grund auf neu erstellen. Gehe zuerst zu Divi -> Theme Builder in deinem WordPress-Dashboard. Füge eine neue Vorlage hinzu, indem du auf den Plus-Button klickst und auswählst Warenkorb auf der WooCommerce Seiten Block. Klicke auf den Vorlage erstellen Button.
Klicke auf Custom Body hinzufügen -> Custom Body bauen. In dem erscheinenden Dialogfeld kannst du die Option ganz links auswählen und auf die Schaltfläche Bauen beginnen Schaltfläche, um mit der Erstellung der Seite zu beginnen.
Wie bereits erwähnt, kannst du das Modul Post Content verwenden, um die Produkte anzuzeigen, die in den Warenkorb gelegt wurden. Abgesehen von diesem Modul kannst du jedes beliebige Modul hinzufügen, das dir gefällt.
Wenn du mit dem Hinzufügen und Bearbeiten der Module fertig bist, kannst du auf die Schaltfläche Speichern klicken. Schaltfläche in der rechten unteren Ecke, um die Änderungen zu speichern, gefolgt von der Schaltfläche X Symbol in der oberen rechten Ecke, um den Divi Builder-Editor zu verlassen. Klicke auf der Seite des Theme Builders auf das Änderungen speichern Schaltfläche, um die soeben vorgenommene Änderung zu übernehmen (in diesem Fall die benutzerdefinierte Einkaufswagenseite).
Erstellen der benutzerdefinierten Checkout-Seite
Die Schritte zur Erstellung einer benutzerdefinierten Kassenseite im Divi Builder sind ähnlich wie die Erstellung der benutzerdefinierten Warenkorb-Seite oben. Du kannst auch das Modul Post Content verwenden. Im Zusammenhang mit der Kassenseite wird das Modul das Kassenformular wie folgt anzeigen:
Gehe zu Divi -> Theme Builder in deinem WordPress-Dashboard. Auf der Seite Theme Builder klickst du auf den Plus-Button, um eine neue Vorlage hinzuzufügen. Wähle Checkout auf der WooCommerce Seiten Block und klicken Sie auf den Vorlage erstellen Button.
Klicke auf Custom Body hinzufügen -> Custom Body bauen. Im erscheinenden Dialog kannst du auf die Option ganz links klicken, da Divi Builder kein vorgefertigtes Layout für die benutzerdefinierte Kassenseite anbietet.
Füge eine Zeile hinzu, gefolgt von dem Modul Post Content.
Du kannst das Post-Content-Modul in den Einstellungen anpassen. Sobald du das Post Content Modul angepasst hast, kannst du andere Module nach deinen Bedürfnissen hinzufügen.
Wenn du mit der Bearbeitung der Seite fertig bist, kannst du auf die Schaltfläche Speichern klicken. in der rechten unteren Ecke, um die Änderung zu übernehmen, gefolgt von der Schaltfläche X Symbol in der oberen rechten Ecke, um den Divi Builder-Editor zu verlassen. Klicke auf der Seite Theme Builder auf das Symbol Änderungen speichern Schaltfläche, um die Änderung zu übernehmen (in diesem Fall die benutzerdefinierte Checkout-Seite).
Erstellen der benutzerdefinierten Kundenkontoseite
Genau wie bei der Einkaufswagen- und der Kassenseite kannst du auch bei der Erstellung einer benutzerdefinierten Kundenkontoseite das Post Content Modul verwenden. Im Zusammenhang mit der Kundenkontoseite zeigt das Modul die mit WooCommerce verbundenen Links an, wie z. B. die letzten Bestellungen, die Lieferadresse und so weiter.
Um mit der Erstellung der benutzerdefinierten Kundenkontoseite zu beginnen, gehst du zu do Divi -> Theme Builder in deinem WordPress-Dashboard. Füge eine neue Vorlage hinzu, indem du auf den Plus-Button klickst. Wähle Mein Konto auf der WooCommerce Seiten Block und klicken Sie auf den Vorlage erstellen Button.
Sobald die Vorlage hinzugefügt wurde, klicke auf Benutzerdefinierten Aufbau hinzufügen -> Benutzerdefinierten Aufbau erstellen. In dem erscheinenden Dialogfeld kannst du die Option ganz links wählen (VON GRUND AUF NEU ERSTELLEN), da Divi Builder kein vorgefertigtes Layout für die Kundenkontoseite bietet.
Füge eine Zeile hinzu und füge das Modul Post Content hinzu, sobald sich der Divi Builder-Editor öffnet.
Du kannst das Post Content Modul über das Einstellungsfenster anpassen. Sobald du das Modul angepasst hast, kannst du weitere Module nach deinen Bedürfnissen hinzufügen. Wenn du mit dem Hinzufügen und Anpassen der Module fertig bist, kannst du auf die Schaltfläche Speichern Schaltfläche in der rechten unteren Ecke, um die Änderungen zu speichern, und klicken Sie auf die X Symbol in der oberen rechten Ecke, um den Divi Builder-Editor zu schließen.
Klicke auf der Seite Theme Builder auf das Symbol Änderungen speichern Schaltfläche, um die Änderung zu übernehmen (benutzerdefinierte Kundenkontoseite auf dieser Seite).
Erstellen der benutzerdefinierten Einzelproduktseite
Mit Divi Builder kannst du auch eine benutzerdefinierte einzelne Produktseite erstellen. Du kannst die benutzerdefinierte Einzelproduktseite sogar bestimmten Produkten, Produkten in bestimmten Kategorien und Produkten mit bestimmten Tags zuweisen. Divi Builder bietet in seiner Layout-Bibliothek kein vorgefertigtes Layout für die Einzelproduktseite an, aber er bietet welche über Blogbeiträge an. Einer davon ist dieses. Du kannst es herunterladen, wenn du lieber eine individuelle Produktseite mit einem vorgefertigten Layout erstellen möchtest.
In diesem Beispiel zeigen wir dir, wie du eine benutzerdefinierte Einzelproduktseite von Grund auf erstellst. Divi Builder selbst bietet einige Module, die du zu einer benutzerdefinierten Einzelproduktseite hinzufügen kannst, darunter:
- Woo Image: Um das Produktbild anzuzeigen
- Woo Title: Um den Produkttitel anzuzeigen
- Holzbewertung: Um die Produktbewertung anzuzeigen
- Holzpreis: Um den Produktpreis anzuzeigen
- Holzbeschreibung: So zeigst du die Produktbeschreibung an
- In den Warenkorb legen: So fügst du die Schaltfläche “In den Warenkorb” hinzu
- Woo Meta: So zeigst du Produkt-Metas an (SKU, Kategorien, Tags)
Um eine benutzerdefinierte Seite für ein einzelnes Produkt zu erstellen, gehst du zunächst zu Divi -> Theme Builder in deinem WordPress-Dashboard. Klicke auf den Plus-Button, um eine Vorlage hinzuzufügen. Auf der Produkte Block wählst du aus, wo du die benutzerdefinierte Vorlage zuweisen möchtest. Wenn du die benutzerdefinierte Vorlage allen Produkten zuweisen möchtest, kannst du die Option Alle Produkte Option. Klicke auf Vorlage erstellen.
Klick Custom Body hinzufügen -> Custom Body bauen. Da der Divi Builder in seiner Layout-Bibliothek kein vorgefertigtes Layout für eine einzelne Produktseite anbietet, kannst du im erscheinenden Dialog auf die Option ganz links klicken.
Bevor du ein Modul zum Canvas-Bereich hinzufügst, kannst du das Layout festlegen, indem du einige Zeilen und Abschnitte hinzufügst. Eine ausführliche Anleitung, wie du mit dem Divi Builder eine benutzerdefinierte WooCommerce-Einzelproduktseite erstellst, findest du in unserem vorherigen Artikel.
Erstellen einer benutzerdefinierten Produktarchivseite (Produktkategorie/Tag-Seite)
Die letzte WooCommerce-Seite, die du mit dem Divi Builder erstellen kannst, ist die Produktarchivseite, sei es eine Produktkategorie oder ein Produkttag. Genau wie bei der benutzerdefinierten Einzelproduktseite kannst du auch eine benutzerdefinierte Produktarchivseite einer bestimmten Kategorie oder einem bestimmten Produkt zuweisen. Du kannst mehrere benutzerdefinierte Produktarchivseiten erstellen, wenn du das möchtest.
Das wichtigste Modul, das du brauchst, um eine benutzerdefinierte Produktarchivseite zu erstellen, ist das Shop-Modul. Die Schritte zur Erstellung einer benutzerdefinierten Produktarchivseite unterscheiden sich nicht wesentlich von der benutzerdefinierten Shop-Seite, die wir weiter oben beschrieben haben. Gehe zuerst zu Divi -> Theme Builder in deinem WordPress-Dashboard und klicke auf den Plus-Button, um eine neue Vorlage hinzuzufügen. Wähle eine Produktkategorie/einen Produkttag aus, dem du die benutzerdefinierte Vorlage auf der Seite Archivseiten Block. Klicke auf den Vorlage erstellen Button.
Klicke auf Custom Body hinzufügen -> Custom Body bauen. Im erscheinenden Dialog kannst du die Option ganz links auswählen, da Divi Builder kein vorgefertigtes Layout für die Produktarchivseite anbietet. Im Canvas-Bereich kannst du einige Abschnitte und Zeilen nach deinen Bedürfnissen hinzufügen. Sobald die Abschnitte und Zeilen fertig sind, fügst du die erforderlichen Module hinzu. Auch hier ist das Shop-Modul das wichtigste Modul, das du für die Erstellung einer benutzerdefinierten Produktarchivseite verwenden kannst. Deshalb musst du dieses Modul hinzufügen.
Ein kleiner Hinweis. Du musst das Shop-Modul so einstellen, dass die Produkte auf der Grundlage des aktuellen Archivs angezeigt werden. Dazu öffnest du die Inhalt Block unter dem Inhalt Registerkarte im Einstellungsfenster und aktiviere die Aktuelle Seite verwenden Option.
Um den Titel des Archivs dynamisch anzuzeigen, kannst du die dynamische Textfunktion des Divi Builders nutzen. Füge zunächst das Textmodul zum Canvas-Bereich hinzu. Sobald es hinzugefügt ist, öffne das Text Block unter dem Inhalt Registerkarte im Einstellungsfenster. Klicke auf das dynamische Symbol im Texteditor und wähle Titel des Beitrags/Archivs in dem erscheinenden Dropdown-Menü.
Du kannst auf der Design auf der Registerkarte “Einstellungen”, um das Textmodul zu gestalten.
Du kannst deiner benutzerdefinierten Produktarchivseite auch andere Module als das Shop- und das Textmodul hinzufügen, ganz nach deinen Bedürfnissen. Wenn du mit der Bearbeitung der Seite fertig bist, kannst du auf die Schaltfläche Speichern Schaltfläche in der rechten unteren Ecke, um die Änderung zu speichern, und klicken Sie auf die X Symbol in der oberen rechten Ecke, um den Divi Builder-Editor zu verlassen. Auf der Seite des Theme Builders kannst du auf das Symbol Änderungen speichern Schaltfläche, um die Änderung zu übernehmen (in diesem Fall das benutzerdefinierte Produktarchiv).
Wir haben einen separaten Artikel, in dem wir beschreiben, wie du eine benutzerdefinierte Produktkategorieseite in WooCommerce mit dem Divi Builder erstellst, falls du daran interessiert bist.
Erledigt.
Du hast alle benutzerdefinierten WooCommerce-Seiten erstellt. Das bedeutet, dass du gerade deine benutzerdefinierte WooCommerce-Website mit Divi Builder erstellt hast.
Die Quintessenz
Die Ära der Page Builder hat die Möglichkeit eröffnet, eine einzigartige, schöne und individuelle Website ohne Programmierkenntnisse zu erstellen. Mit Divi Builder kannst du sogar noch einen Schritt weiter gehen und eine maßgeschneiderte E-Commerce-Website erstellen. Divi Builder wird mit einem WooCommerce-Builder geliefert, mit dem du eine individuelle E-Commerce-Website mit WooCommerce auf visuelle Art und Weise erstellen kannst. Du kannst benutzerdefinierte Seiten erstellen, um die Standardseiten von WooCommerce zu ersetzen, z. B. die Shopseite, die Einkaufswagenseite, die Kassenseite und so weiter, wie wir oben beschrieben haben.
Es gibt zwei Möglichkeiten, den Divi Builder zu nutzen. Erstens kannst du ihn als eigenständiges Plugin verwenden. Zweitens kannst du das Divi-Theme verwenden. Wenn du die letztere Option bevorzugst, brauchst du das Divi Builder Plugin nicht mehr zu installieren, da es ein integraler Bestandteil des Divi Themes ist.
Divi Builder kaufen
[ad_2]
