Beaver Builder WooCommerce-Integration 2024 – Wie verwendet man Beaver Builder zum Erstellen von WooCommerce-Produkt- und Shop-Seiten?

Es kann spannend sein, einen Online-Shop zu erstellen. Es trägt zum Erfolg Ihres Unternehmens bei, ein großartiges Schaufenster zu haben. Wenn Sie jedoch einen gut funktionierenden Shop entwerfen möchten, haben Sie möglicherweise Schwierigkeiten.

Mit Hilfe eines WooCommerce-Seitenerstellers kann eine E-Commerce-Site erstellt werden, die sowohl Ihnen als auch Ihren Kunden gefällt. Werfen wir einen Blick auf die WooCommerce Plugin. Unser nächster Schritt wird sein, zu zeigen, wie einfach es ist, Ihren Online-Shop mit Beaver Builder zu erstellen. Los, fangen wir an!

Biber-Baumeister

Eine kurze Einführung in WooCommerce

Mit WooCommerce ist das möglich E-Commerce-Funktionalität hinzufügen zu Ihrer WordPress-Seite, damit Sie Ihre Produkte online verkaufen können:

Zudem befindest du dich in guter Gesellschaft, denn WooCommerce soll bis 28 einen Marktanteil von rund 2020 Prozent erreichen.

WooCommerce ist eine hochgradig anpassbare Open-Source-Lösung, genau wie WordPress. Damit können Sie Zahlungs-Gateways und verschiedene Versandoptionen einrichten und sofort mit Ihrem E-Commerce-Imperium beginnen.

Mit WooCommerce können Sie auch Ihre Produkte erstellen, bearbeiten und verwalten:

Durch die Verwendung von WooCommerce-Add-On-Plugins haben Sie Zugriff auf viele andere Funktionen.  

WooCommerce Shop- und Produktseiten mit Beaver Builder erstellen (in 4 einfachen Schritten)

Bevor Sie sich jedoch mit den Funktionen von WooCommerce vertraut machen können, müssen Sie zunächst eine Website starten. Beginnen Sie mit der Installation und Aktivierung der WordPress-Plugins WooCommerce, Beaver Builder und Beaver Themer. Jetzt können Sie Ihre Produkt- und Shopseiten erstellen.

Schritt 1: Erstellen Sie Ihren Shop, indem Sie Produkte hinzufügen

Erstellen Sie Angebote für Ihre Produkte als ersten Schritt zur Einrichtung Ihres Shops. Wenn Sie WooCommerce verwenden, können Sie physische Waren, digitale Waren und Artikel mit Variationen (wie Größe und Farbe) verkaufen.

Sie können ein von WooCommerce bereitgestelltes Beispielproduktset installieren, um ein Gefühl dafür zu bekommen, wie das System mit verschiedenen Arten von Artikeln funktioniert, wenn Sie neu bei WooCommerce sind. Hier werden mehrere WooCommerce-Produktfunktionen erklärt, einschließlich Variations- und Verkaufsoptionen.

Sie lernen, wie Sie ein Basisprodukt erstellen, wenn Sie bei Null anfangen möchten. Egal, was Sie verkaufen möchten, die anderen Abschnitte in diesem Beitrag werden Ihnen zugute kommen.

Erstellen Sie ein neues Produkt in Ihrem WordPress-Dashboard. Wählen Sie im Menü auf der linken Seite Produkte > Neu hinzufügen aus. Füllen Sie die folgenden Felder für den Artikel aus, den Sie Ihrem Shop hinzufügen möchten:

Sie können die meisten wichtigen Parameter für Ihren Artikel festlegen, indem Sie nach unten zum Bereich Produktdaten scrollen, einschließlich Preise, Steuern und Versand. In WooCommerce haben Sie die Möglichkeit, Steuern und Versandoptionen für Produkte einzubeziehen, die individuell überschrieben werden können.

Entscheiden Sie in den allgemeinen Einstellungen, ob Ihr Produkt herunterladbar oder virtuell ist. Lassen Sie die Kästchen deaktiviert, wenn es sich um ein physisches Produkt handelt:

Neben der Bestandsverwaltung können Sie beginnen. Durch das Verbinden von Produkten haben Sie die Möglichkeit, Cross-Selling und Up-Selling durchzuführen.

Sie können auch eine zweite, kürzere Beschreibung Ihres Artikels im Feld Kurzbeschreibung des Produkts unterhalb des Bereichs Produktdaten hinzufügen. Storefront-Einträge enthalten normalerweise diese Informationen.

Sie sehen Produktkategorien und Tags auf der rechten Seite Ihres Bildschirms. Hier sind einige hilfreiche Organisatoren:

Ihre Produktliste sollte ein oder zwei Bilder enthalten. Folgende Optionen stehen zur Verfügung: Einzelbilder oder Bildgruppen:

Sie können entweder ein Foto von Ihrem Gerät hochladen oder ein Bild aus Ihrer Medienbibliothek hinzufügen. Auf die gleiche Weise können Sie Bilder zu Produktgalerien hinzufügen. Die Bilder können einfach per Drag & Drop verschoben werden, um sie neu anzuordnen.

Schritt 2: Entwerfen Sie neue Produktseiten

Um Ihre Produkte anzuzeigen, können Sie Produktseiten erstellen. Das Video-Tutorial von Beaver Themer bietet Schritt-für-Schritt-Anleitungen zum Anpassen einzelner WooCommerce-Produktseiten. 

Beaver Themer ist ein leistungsstarkes Tool zum Erweitern von Beaver Builder zu einem WooCommerce-Seitenersteller. Mit diesem Add-on können Sie Vorlagen auf Ihre gesamte Website anwenden.  

 Klicken Sie in Beaver Builder auf Design-Layouts > Neu hinzufügen:

Hinzufügen eines Design-Layouts mit Produkteinstellungen, damit es als WooCommerce-Seitenersteller fungiert.

Ihr Layout sollte einen Titel haben. Sie müssen Ihr Layout und Ihren Typ auswählen, bevor Sie auf die Schaltfläche Themer-Layout hinzufügen klicken.

Stellen Sie weiterhin sicher, dass das neue Design auf jeder Produktseite angewendet wird, wenn Sie zur nächsten Seite wechseln. Wählen Sie im zweiten Feld Alle Produkte unter Standort und dann Produkt aus:

Die richtigen Themer-Layouteinstellungen, um Beaver Themer als WooCommerce-Seitenersteller zu verwenden.

Sie können Ihr Layout mit Beaver Builder bearbeiten, nachdem Sie Ihre Arbeit gespeichert haben. Klicken Sie oben rechts auf das blaue Pluszeichen. Nachdem Sie auf Vorlagen geklickt haben, klicken Sie auf Neu:

Der Speicherort der WooCommerce-Produktvorlage in Beaver Thermer.

Ersetzen Sie ein vorhandenes Layout, indem Sie Produkt > Vorhandenes Layout ersetzen auswählen. Einige hilfreiche Standardeinstellungen sind bereits vorhanden, wodurch Ihre Vorlage zu einer Produktseite wird:

Die Standardproduktvorlage von Beaver Builder

Das Hinzufügen oder Entfernen von WooCommerce-Modulen aus Ihrem Grundlayout ist möglich, sobald Sie es haben. Auf die WooCommerce-Module kann über Module > Themenmodule > WooCommerce zugegriffen werden. Abgesehen von Produktbewertungen, Beschreibungen, Upsells und vielen anderen stehen Ihnen viele Optionen zur Verfügung:

Verwenden von WooCommerce-Modulen

Während Sie ein Layout bearbeiten, können Sie zu einem anderen Produkt wechseln, indem Sie die Funktion Vorschau als: in Beaver Builder verwenden:

Vorschau verschiedener Produkte in Beaver Builder

Mit dieser Funktion können Sie überprüfen, wie jedes Ihrer Produkte aussieht, wenn Sie es anzeigen. Veröffentlichen Sie Ihre Produktseite, sobald Sie mit dem Design und den darin enthaltenen Modulen zufrieden sind. Ihre einzelnen Produktseiten werden nun im neuen Format gestaltet.

Schritt 3: Erstellen Sie eine WooCommerce-Shop-Seite

Es ist an der Zeit, der Shop-Seite die gleiche Behandlung wie Ihren WooCommerce-Produkten zu geben. Ein Standard-WooCommerce-Shop-Layout ist sehr einfach und nicht sehr aufregend:

Das Standard-Shop-Layout von WooCommerce

Bei der Gestaltung Ihrer Shop-Seite ist Beaver Themer die bessere Wahl. Gehen Sie zunächst zu WooCommerce > Einstellungen, klicken Sie auf die Registerkarte Produkt und vergewissern Sie sich, dass die Shop-Seite auf Shop oder eine andere von Ihnen erstellte benutzerdefinierte Seite zeigt. Es zeigt Ihre Produkte als Archivseite an, wenn Sie eine angeben.

Wählen Sie Themer-Layouts > Neu hinzufügen in Beaver Builder > Theme Builder und klicken Sie dann auf Neu hinzufügen. Wählen Sie auf dem nächsten Bildschirm unter Typ die Option Themenlayout:

Erstellen eines Shop-Seitenlayouts

Auf dem folgenden Bildschirm können Sie den Speicherort des Produktarchivs auswählen. Die Produkte Ihres Shops werden auf der Shop-Seite und den Produktkategorieseiten angezeigt. Bei Bedarf können Sie es ändern.

Anpassen der Produktarchivseite

Indem Sie auf Beaver Builder starten klicken, können Sie Ihr Layout anpassen. Die folgende Seite wird angezeigt, wenn Sie oben auf dem Bildschirm auf das Pluszeichen und dann auf Vorlagen klicken:

Verwenden einer Beaver Builder-Vorlage

Eine neue Shop-Seite kann ganz einfach mit der Vorlage Produkte erstellt werden. Mit allen bisher behandelten Tools können Sie nach der Erstellung Änderungen an der Vorlage vornehmen. 

Stellen Sie sicher, dass Ihr Shop-Layout zu den Stileinstellungen des Posts-Moduls passt, indem Sie sie anpassen, bis sie passen. 

Klicken Sie oben auf dem Bildschirm auf Fertig > Veröffentlichen, sobald die Änderungen im Modul gespeichert wurden. 

Das Letzte, was Sie tun müssen, ist sicherzustellen, dass die Seite, die Sie als Ihre Shop-Seite festgelegt haben, im Navigationsmenü Ihrer Website angezeigt wird. Andernfalls können Sie es aus dem Abschnitt Darstellung > Menüs des WordPress-Dashboards hinzufügen.

Schritt 4: Passen Sie Ihre Shop-Seite mit WooCommerce-Layouts weiter an

Ein WooCommerce-Modul ist auch eine hervorragende Funktion von Beaver Builder, die es zu einem hervorragenden WooCommerce-Seitenersteller macht. Es ermöglicht Ihnen, Teile der WooCommerce-Funktionalität zu jeder Beaver Builder-Struktur auf Ihrer Website hinzuzufügen. Folgende Optionen stehen in diesem Modul zur Verfügung:

  • Einzel- und Mehrfachprodukte: 
  • Sie können ausgewählte Produkte basierend auf Produkt-IDs oder Kategorien anzeigen, oder Sie können Produkte anzeigen, die im Angebot sind, kürzlich erschienene Produkte, am besten bewertete Produkte oder alles andere, was Sie möchten.
  • Warenkorb: Zeigt den Inhalt des WooCommerce-Warenkorbs an.
  • Checkout: Zeigt die Checkout-Seite so an, wie sie normalerweise erscheinen würde.
  • Auftragsverfolgung: Gibt Informationen zu Bestellungen in dieses Formular ein.
  • Mein Konto: Diese Seite enthält die Informationen, die normalerweise auf der Seite Mein Konto zu finden sind, wie Kontoinformationen, frühere Bestellungen und Adressdetails
WooCommerce-Layouts in Beaver Builder.

Quick Links

Zusammenfassung

Die Erstellung eines Online-Shops, der Ihre Marke effektiv repräsentiert, ist ein herausforderndes Unterfangen. Der Prozess kann jedoch mit Hilfe von Beaver Builder, einem Plugin für WooCommerce, vereinfacht werden.

Wie Sie sehen können, haben wir vier wichtige Schritte zum Erstellen Ihrer Storefront mit WooCommerce und Beaver Builder skizziert:

  1. Erstellen Sie einen Shop, indem Sie Produkte hinzufügen.
  2. Entwerfen Sie eine neue Produktseite.
  3. Erstellen Sie eine neue WooCommerce-Shopseite.
  4. Mit WooCommerce-Layouts können Sie Ihre E-Commerce-Site weiter anpassen.

Möchten Sie etwas über die Verwendung von Beaver Builder zum Erstellen von Produkt- und Shopseiten wissen? Bitte teilen Sie Ihre Gedanken unten im Kommentarbereich!

Aishwar Babber

Aishwar Babber ist eine leidenschaftliche Bloggerin und digitale Vermarkterin. Er liebt es, über die neuesten Technologien und Gadgets zu reden und zu bloggen, was ihn zum Laufen motiviert GizmoBase. Derzeit setzt er seine Expertise in den Bereichen digitales Marketing, SEO und SMO als Vollzeit-Vermarkter in verschiedenen Projekten ein. Er ist ein aktiver Investor in AffiliateBay und ein Regisseur bei ImageStation.

Hinterlasse einen Kommentar