Alles, was Sie über die WooCommerce -Produktmodule von Divi 5 wissen müssen

Die Kompatibilität mit WooCommerce wurde nun auf Divi 5 erweitert, wodurch Sie die volle Kontrolle über Produktseiten erhalten, ohne sich auf die integrierten Vorlagen von Woocommerce zu verlassen. Mit den neu integrierten WooCommerce-Produktmodulen können Sie ansprechende, benutzerfreundliche Layouts entwerfen, die zu Ihrer Marke passen, und helfen, den Umsatz zu steigern, während Sie alle Funktionen von Divi 5, einschließlich Flexbox, nutzen, um Produktseiten mit moderner Layout-Kontrolle zu erstellen.

In diesem Beitrag werden wir die wichtigsten Funktionen der Module behandeln und Ihnen zeigen, wie Sie sie für Ihre nächste Divi 5 -E -Commerce -Website verwenden. Lassen Sie uns eintauchen.

Was sind WooCommerce -Produktmodule?

WOO-Produktmodule sind spezielle Inhaltselemente innerhalb von Divi 5, mit denen Produkt- und Kategorienseiten für WOO-betriebene Geschäfte angepasst werden sollen. Diese Module ersetzen die WooCommerce -Vorlagen, die standardmäßig mit dem Plugin geliefert werden, sodass Sie anpassbare Layouts erstellen. Im Gegensatz zu diesen herkömmlichen Vorlagen ermöglichen die Module von Divi 5 die kreative Freiheit und behalten gleichzeitig die Kompatibilität mit der Kernfunktionalität von Woocommerce aufrecht.

Die Veröffentlichung von 17 WooCommerce -Modulen in Divi 5 markiert einen signifikanten Meilenstein. Diese Module, die alle Produkt- und Kategorie -Seitendesignaspekte abdecken, befinden sich nicht mehr im Legacy -Modus, was bedeutet, dass sie alle für die moderne Architektur von Divi 5 vollständig optimiert sind. Mit diesem Übergang zu einer effizienteren Fundament ist Divi 5 besser abschnitten, skalierbarer und mit der Zukunft von WordPress kompatibel.

Die verbleibenden 8 WOO -Module, die sich auf Karren- und Kassenseiten konzentrieren, werden voraussichtlich bald ausführen.

Schlüsselmerkmale der WooCommerce -Produktmodule von Divi 5 von Divi 5

Gehen wir die wichtigsten Funktionen durch, die Sie jetzt erwarten können, dass die WooCommerce -Produktmodule in Divi 5 integriert wurden.

Umfassendes Modulsatz

Die erste Charge der WooCommerce -Produktmodule von Divi 5 enthält Tools, die für einen bestimmten Aspekt des Produkt- und Kategorie -Seitendesigns entwickelt wurden. Diese Module sind:

• Woo Breadcrumbs: Zeigt Navigations -Brotkrumbwege an, um den Benutzern die Navigation im Geschäft einfach zu unterstützen.
• WOO Hinweis: Zeigt Systemnachrichten wie Karren -Updates, Fehler oder Bestätigungen an.
• WOO -Produkt in den Warenkorb hinzufügen: Rendert eine Taste zum Karren mit optionalen Mengenregelungen.
• WOO-Produktbeschreibung: Gibt die Hauptproduktbeschreibung aus.
• Woo Product Gallery: Zeigt zusätzliche Produktbilder in Gitter- oder Schieberegleitern an.
• Woo Product Images: Zeigt das Hauptproduktbild oder eine Galerie von Bildern an.
• WOO -Produktinformationen: Zeigt Produktdetails wie Gewicht, Abmessungen oder Attribute an.
• Woo Product Meta: zeigt Produkt -SKU, Kategorien und Tags.
• WOO -Produktpreis: Zeigt den Preis des Produkts einschließlich Verkaufspreise an.
• Woo Product Rating: Zeigt die durchschnittliche Anzahl von Stars und Bewertungen an.
• Woo Product Reviews: Ermöglicht Kunden, Produktbewertungen anzusehen und einzureichen.
• WOO -Produktbestand: Zeigt die Produktverfügbarkeit und den Aktienniveau an.
• WOO -Produktregisterkarten: Zeigt Standardprodukt -Registerkarten für Beschreibung, zusätzliche Informationen und Bewertungen an.
• Woo -Produkttitel: Gibt den Namen des Produkts als anpassbare Überschrift aus.
• Woo Product Upsell: Fördert UPSELL-Produkte, um höherwertige Einkäufe zu fördern.
• Woo Products: Erstellt anpassbare Produktgitter für Kategorienseiten.
• WOO -Related -Produkte: Zeigt verwandte Produkte an, die auf Kategorien oder Tags basieren.

Zusammen bieten diese Module alles, was Sie benötigen, um Produkt- und Kategorienseiten zu erstellen, von Navigationsbrotkrumen bis hin zu dynamischen Produktdisplays.

Kreative Freiheit

WooCommerce -Produktmodule von Divi 5 von Divi 5 kostenlose Benutzer aus den Einschränkungen von Standard -WooCommerce -Vorlagen. Mit diesen Modulen können Sie das Layout, die Struktur und das Design Ihrer Produktseiten vollständig steuern und einzigartige Erlebnisse schaffen.

Die Module unterstützen dynamische Inhalte, dh sie ziehen Produktdaten direkt aus WooCommerce und stellt Echtzeit-Updates für Preise, Aktienniveaus und Beschreibungen sicher. Auf diese Weise können Sie Seiten erstellen, die das Engagement und die Konvertierungen vorantreiben, ohne Plugins oder benutzerdefinierte Code zu erfordern.

Anpassungsoptionen

Jedes Modul verfügt über umfangreiche Designeinstellungen, die alle im visuellen Bauunternehmer überschaubar sind. Sie können Elemente wie Produktgalerien, Verkaufsabzeichen, Schaltflächen und mehr mit Optionen für Typografie, Farben, Abstand und Animationen anpassen.

Sie können beispielsweise das Layout des Woo Product Gallery -Moduls so anpassen, dass Bilder in einem Schieberegler oder Raster angezeigt werden, das Woo -Produkt mit benutzerdefinierten Farben und Schwebeffekten hinzufügen oder das Woo -Produktbewertungsmodul optimieren, um Sternbewertungen perfekt mit Ihrem Design auszurichten.

Mit diesen Einstellungen können Sie mit Leichtigkeit zusammenhängender Marken -Shopseiten erstellen.

Dynamische Vorlagen mit Theme Builder

Mit dem Theme Builder von Divi 5 können Sie das volle Potenzial von WooCommerce -Produktmodulen nutzen, indem Sie globale Vorlagen für Produkt- und Kategorienseiten erstellen können. Mit dem Theme Builder können Sie eine einzige Vorlage entwerfen, die für alle Produkte und Kategorien in Ihrem Geschäft gilt, um einen konsistenten, zusammenhängenden Look zu gewährleisten.

Schleifenbauer für dynamische WooCommerce -Inhalte

Der Divi 5 Loop Builder bietet eine alternative Möglichkeit, dynamische WOO -Inhalte aufzubauen. Mit Loop Builder können Sie WooCommerce -Produkte abfragen und flexible Produktschleifen mit jedem Divi -Element entwerfen, um Layouts, Listen und Karussells zu erstellen, die über die feste Struktur dedizierter Produktmodule hinausgehen. Verwenden Sie für Layouts mit Einzelprodukten die Woo-Produktmodule. Verwenden Sie für Produktsammlungen und Archive den Loop Builder.

So verwenden Sie die WooCommerce -Produktmodule von Divi 5

In diesem Abschnitt werden Sie mit den neuen WooCommerce -Produktmodulen eine Produktseite im Theme Builder von Divi 5 erstellen.

Erstellen Sie eine neue Themen -Builder -Vorlage

Navigieren Sie zum Divi> Theme Builder im WordPress -Dashboard. Klicken Sie auf + neue Vorlage hinzufügen .

Klicken Sie auf eine neue Vorlage erstellen, wenn das Dialogfeld angezeigt wird.

Als nächstes müssen wir unsere Produkte unsere Vorlage zuweisen. Wählen Sie unter Produkten alle Produkte aus, um die Vorlage zuzuweisen.

Klicken Sie auf Vorlage erstellen , um sie zuzuweisen.

Klicken Sie auf den benutzerdefinierten Körper hinzufügen . Auf diese Weise können wir den Körper unserer Produktseitenvorlage erstellen.

Wählen Sie den benutzerdefinierten Körper erstellen , wenn das Dialogfeld angezeigt wird.

Erstellen Sie die Produktvorlage

Wenn der Thema Builder startet, können Sie eine Vorlage von Grund auf neu erstellen, ein vorgefertigtes Layout auswählen oder mit KI erstellen. Wir werden für dieses Tutorial von Grund auf neu erstellen .

Klicken Sie auf das Grün + -Symbol, um eine neue Zeile hinzuzufügen.

Wenn die Optionen angezeigt werden , wählen Sie die Zwei-Spalten-Zeile. Neue Zeilen, die Sie zu einer beliebigen Divi 5 -Seite oder -vorlage hinzufügen, werden standardmäßig die FleBox verwendet. Das Flexbox -Layout -System von Divi 5 bietet Ihnen mehr Kontrolle darüber, wie Ihre Produktseiten aussehen als je zuvor, einschließlich der Art und Weise, wie Ihr WooCommerce -Produktmodule über verschiedene Bildschirmgrößen stapelt.

Scrollen Sie nach unten, um die Option Woo Product Module anzuzeigen. Nach dem Klicken haben Sie 17 Divi 5 Woo -Module und 8 Legacy (Divi 4) -Module.

Fügen Sie das Woo Product Images -Modul hinzu

Suchen und wählen Sie das Modul für WOO -Produktbilder aus und wählen Sie es zur ersten Spalte.

Dieser Beitrag wird standardmäßig im Produktfeld auf der Registerkarte Inhalt ausgewählt. Wenn Sie die Vorlage mit einem vorhandenen Produkt erstellen möchten, wählen Sie sie im Dropdown -Menü aus. Dies ist eine großartige Möglichkeit, um eine Vorschau zu erhalten, wie Ihre Vorlage beim Erstellen aussehen wird. Denken Sie daran, es vor dem endgültigen Speicher auf diesen Beitrag zurückzutauschen.

Erweitern Sie das Dropdown -Menü Elements , um die Einstellungen anzuzeigen. Hier können Sie steuern, welche Bilder im Modul angezeigt werden, einschließlich der vorgestellten Bild-, Galerierebilder und Verkaufsabzeichen.

Klicken Sie in der Registerkarte Design auf das Dropdown -Menü des Bildes , um die Einstellungen anzuzeigen. Hier können Sie das Bild zwingen, den gesamten verfügbaren Platz zu belegen (Fullwidth), einen Rand hinzufügen, einen Kastenschatten einstellen, den Abstand einstellen oder Filter hinzufügen.

Sie können das Verkaufsabzeichen auch stylen, indem Sie eine Hintergrundfarbe, Text, Grenzen und mehr zuweisen.

Fügen Sie das Woo -Produkttitelmodul hinzu

Klicken Sie in der 2. Spalte auf WOO -Produktmodule und scrollen Sie, um das Woo -Produkttitelmodul auszuwählen.

Verwenden Sie das Dropdown -Menü im Produktfeld der Registerkarte "Inhalt" , um ein Produkt auszuwählen und eine Vorschau zu erhalten, wie es in der Vorlage aussieht.

Navigieren Sie als Nächstes zur Registerkarte des Moduls des Moduls und erweitern Sie das Dropdown -Menü "Title Text" . Hier können Sie eine Schriftart zuweisen und die Überschrift stylen, wie Sie möchten.

Fügen Sie das WOO -Produktpreismodul hinzu

Klicken Sie unter dem Produkttitel, um ein neues Modul hinzuzufügen. Wählen Sie die WOO -Produktmodule und scrollen Sie, um das Woo -Produktpreismodul auszuwählen.

Auf der Registerkarte "Design" können Sie jeden Aspekt des Produktpreises des Produkts, einschließlich des Textes, des Verkaufstextes, des neuen Preistextes und vieles mehr stylen.

Fügen Sie das WOO -Produktbewertungsmodul hinzu

Als nächstes fügen wir das Woo -Produktbewertungsmodul unter das WOO -Preismodul hinzu.

Auf der Registerkarte "Inhalt unter Elementen" können Sie die Anzahl der Sternenbewertungen und Kundenbewertungen anzeigen oder verbergen.

Mit dem Dropdown -Menü "Layout" können Sie auf der Registerkarte "Design" auswählen, wie die Sternbewertung angezeigt wird. Elemente können inline oder gestapelt werden.

Weitere Styling -Optionen sind die Zuweisung einer Farbe, der Textgröße und des Buchstabens für die Sterne und Styling -Optionen für den Bewertungstext.

Fügen Sie das WOO -Produktbeschreibungsmodul hinzu

Klicken Sie unter dem Woo Star -Bewertungsmodul, um ein neues Woo -Modul hinzuzufügen. Dieses Mal wählen wir das Woo -Produktbeschreibungsmodul aus. Wählen Sie in der Registerkarte Inhalt auf, welche Beschreibung angezeigt werden soll (Beschreibung oder kurze Beschreibung).

Auf der Registerkarte "Design" können Sie die Beschreibung mit Optionen für Schriftart, Gewicht, Stil, Ausrichtung, Farbe, Größe und mehr stylen.

Fügen Sie das WOO -Produkt hinzu, um das Karrenmodul hinzuzufügen

Als nächstes werden wir das WOO -Produkt hinzufügen, um das CART -Modul hinzuzufügen . Dadurch können Ihre Kunden das Produkt zu ihren Karren hinzufügen und alle dem Produkt zugewiesenen Variationen auswählen.

Mit den Elementen Umschaltungen in der Registerkarte Inhalt können Sie das Feld der Menge und verfügbare Aktien anzeigen oder ausblenden. Kurzer Hinweis: Damit die Aktienmenge angezeigt werden kann, müssen Sie die Verwaltung von Aktien im Woo -Produkt selbst überprüfen.

Sie können die Feldbezeichnungen, Text, Dropdown -Menüs (für Variationen) und die Schaltfläche für Ihr Branding auf der Registerkarte Design stylen.

Fügen Sie weiterhin Module hinzu, wie das WOO -Produkt -Meta -Modul, um SKU -Nummern und -kategorien anzuzeigen.

Sie können auch das Modul von Woo Product Tabs hinzufügen, um eine Beschreibung, Bewertungen und zusätzliche Informationen zu Ihrem Produkt anzuzeigen.

Für maximale Reichweite können Sie eine Reihe verwandter Produkte in Ihrer Produktvorlage anzeigen, um die Besucher Ihrer Website zu ermutigen, zusätzliche Produkte in Ihrem Geschäft zu erkunden und die Wahrscheinlichkeit einer Konvertierung zu erhöhen.

Speichern der Vorlage

Nehmen Sie nach dem Hinzufügen von Modulen zusätzliche Änderungen vor, die Sie benötigen, und speichern Sie die Vorlage, indem Sie auf die Schaltfläche Speichern in der oberen rechten Ecke des Themas Builder klicken.

Klicken Sie anschließend auf die Schaltfläche Exit , um zum Thema Builder -Dashboard zurückzukehren.

Klicken Sie im Thema Builder -Dashboard auf Änderungen speichern , um die Vorlage zu speichern und auf Ihre WOO -Produkte anzuwenden.

Wie Sie sehen können, ist das Erstellen einer Produktvorlage mit den Woo -Produktmodulen von Divi 5 ein einfacher Prozess. Wir werden nicht alle Module in diesem Tutorial behandeln, aber mit allen von ihnen können Sie beeindruckende Produkt- oder Kategorienseiten erstellen, auf denen Ihre Besucher engagiert werden.

Laden Sie die Dateien herunter

Kostenlos herunterladen

Treten Sie dem Divi -Newsletter bei und wir senden Ihnen eine Kopie des ultimativen Divi -Landing -Layout -Pakets sowie Tonnen anderer erstaunlicher und kostenloser Divi -Ressourcen, Tipps und Tricks per E -Mail. Folgen Sie mit und Sie werden in kürzester Zeit ein Divi -Meister sein. Wenn Sie bereits abonniert sind, geben Sie einfach Ihre E -Mail -Adresse unten ein und klicken Sie auf Download, um auf das Layoutpaket zuzugreifen.

HERUNTERLADEN

Sie haben erfolgreich abonniert. Bitte überprüfen Sie Ihre E -Mail -Adresse, um Ihr Abonnement zu bestätigen und Zugriff auf kostenlose wöchentliche Divi -Layout -Packs zu erhalten!

Was kommt als nächstes für die WooCommerce -Integration von Divi 5?

Die zweite Charge von WooCommerce -Modulen, die sich auf Karren und Kassenseiten konzentrieren, wird in den nächsten Wochen veröffentlicht, wobei die Integration mit WooCommerce abgeschlossen wird. Mit diesen Ergänzungen können Benutzer den gesamten E -Commerce -Trichter vollständig anpassen, vom Produktsurfen bis zum Checkout. Die öffentliche Beta Divi 5 wird diese Funktionen weiter verfeinern und Benutzerfeedback und zusätzliche Fehlerbehebungen einbeziehen, um die Stabilität zu gewährleisten.

Über WooCommerce -Kompatibilität und -integration hinaus entwickelt sich Divi 5 weiterhin mit den neuesten Funktionen wie dem Gruppen -Karussellmodul zum Erstellen von dynamischen Produktschiebern, dem Lottie -Modul zum Hinzufügen leichter Animationen und einem neuen Flexbox -Layout -System für eine verbesserte Layout -Steuerung. Diese Ergänzungen ergänzen die WOO -Module und bieten E -Commerce -Websites noch kreativere Möglichkeiten.

Probieren Sie noch heute die Woo -Produktmodule von Divi 5 aus

Mit den Woo -Produktmodulen von Divi 5 können Sie faszinierende Produkt- und Kategorienseiten mit unvergleichlicher Flexibilität und Kreativität erstellen. Die Module bieten eine Mischung aus kreativer Freiheit, dynamischer Inhaltsintegration und Leistung, die alle in einer intuitiven Schnittstelle sind. Von anpassbaren Produktgalerien bis hin zu benutzerdefinierten Layouts über den Themenbauer erleichtert Divi 5 das Erstellen von hochkonvertierenden Ladenseiten einfach.

Bist du bereit, in Divi 5 zu tauchen? Laden Sie das neueste Divi 5 Public Alpha herunter, um diese Module zu erkunden und zu sehen, wie sie Ihre WooCommerce -Website verändern können. Wir würden gerne Ihre Gedanken hören. Teilen Sie Ihr Feedback in den Kommentaren oder verbinden Sie sich mit uns in unseren Social -Media -Kanälen.