German (Deutsch) translation by Tatsiana Bochkareva (you can also view the original English article)
Elementor und WooCommerce machen es einfach, einen Online-Shop zu erstellen. In diesem Tutorial zeige ich Ihnen, wie Sie mit WooComerce, WordPress und Elementor einen Online-Shop mit Produkten, Kategorien und einem Dropdown-Menü im Amazon-Stil erstellen.
Warum WooCommerce?
WordPress ist eine der beliebtesten Blogging-Plattformen der Welt, aber unzählige Unternehmen nutzen WordPress auch, um ihre Produkte und Dienstleistungen zu verkaufen.
Mit ein wenig Hilfe des WooCommerce E-Commerce-Plugins können Sie mit WordPress digitale und physische Waren verkaufen und Zahlungen über beliebte Zahlungsgateways wie PayPal und Stripe sammeln.
Heute nutzen 29% der Top-Millionen-Websites WooCommerce, und große Namen wie All Blacks, L.A. Weekly und AeroPress verlassen sich alle auf dieses beliebte WordPress-E-Commerce-Plugin.
Während WordPress und WooCommerce alles bieten, was Sie zum Starten eines erfolgreichen E-Commerce-Shops benötigen, möchten Sie möglicherweise mehr Kontrolle über das Erscheinungsbild Ihres Shops.
In dieser zweiteiligen Serie zeige ich Ihnen, wie Sie mit WordPress, WooCommerce und Elementor einen professionell gestalteten Online-Shop erstellen.
In diesem Beitrag richten wir Elementor und WooCommerce ein und erstellen einen Online-Shop mit Produkten, Kategorien und einem Dropdown-Menü im Amazon-Stil. Im nächsten Beitrag werden wir dann das Produktarchiv und die Produktseiten von WooCommerce mithilfe der von Ihnen ausgewählten Elementor-Vorlagen-Kits von Envato Elements neu gestalten.
Am Ende dieses Tutorials können Sie mit einem professionell gestalteten E-Commerce-Shop live gehen.
Was wir bauen werden
Elementor ist ein flexibles Werkzeug, mit dem Sie Ihren E-Commerce-Shop auf verschiedene Arten gestalten können. Sie können eine der in Elementor Pro integrierten Vorlagen verwenden, zusätzliche Vorlagen von Drittanbietern hochladen oder sogar Ihre eigene E-Commerce-Vorlage von Grund auf neu erstellen. In dieser Serie werden wir alle drei Optionen behandeln!
Am Ende dieses Tutorials haben Sie eine benutzerdefinierte Produktseite und ein Produktarchiv mit den integrierten Vorlagen von Elementor Pro erstellt.
Die Produktseite und das Produktarchiv sind zwei Seiten, die WooCommerce automatisch generiert. Das Bestandsdesign sollte jedoch an das Branding und die Funktionen Ihres Geschäfts angepasst werden. Ich zeige Ihnen, wie Sie diese Standardseiten mithilfe der in Elementor Pro integrierten Vorlagen schnell und einfach anpassen können.
Im Folgebeitrag verwenden wir eine themetische Sammlung von Vorlagen, um eindeutige Produktseiten, ein Produktarchiv und einen themenbezogenen Header zu erstellen, der in Ihrem gesamten E-Commerce-Shop angezeigt wird.
Wenn Sie eine bestimmte Vision im Sinn haben, zeige ich Ihnen auch, wie Sie diese Vision zum Leben erwecken können, indem Sie Ihre eigene Elementor-Vorlage erstellen.
Elementor: Erstellen Sie einen E-Commerce-Shop mit Null-Code
Der erste Schritt ist das Hinzufügen von Elementor zu Ihrer WordPress-Website.
Das Kern-Elementor-Plugin kann kostenlos heruntergeladen werden und bietet Zugriff auf mehr als 40 Widgets und über 30 Vorlagen. Da wir jedoch mit WooCommerce arbeiten, müssen Sie in ein Elementor Pro-Abonnement investieren.
Im Gegensatz zur kostenlosen Version von Elementor bietet Elementor Pro einen dedizierten WooCommerce Builder sowie einige wichtige Widgets zum Thema E-Commerce wie In den Warenkorb, Produktbewertung und verwandte Produkte.
Wenn Sie sich an das kostenlose Elementor-Plugin halten möchten, hilft Ihnen dieses Tutorial dabei, die Elementor-Benutzeroberfläche und die Kernworkflows zu beherrschen, die Sie zum Erstellen wunderschön gestalteter Seiten, Websites, Blogs und Online-Shops benötigen. Sie benötigen jedoch ein Elementor Pro-Abonnement, um alle Abschnitte dieses Lernprogramms abzuschließen.
So fügen Sie Elementor zu Ihrer WordPress-Website hinzu
Elementor Pro benötigt die kostenlose Version von Elementor. Wenn Sie dieses kostenlose Plugin noch nicht installiert haben, müssen Sie es Ihrer Website hinzufügen:
- Melden Sie sich bei Ihrem WordPress-Konto an, falls Sie dies noch nicht getan haben.
- Wählen Sie im linken WordPress-Menü Plugins > Neu hinzufügen.
- Suchen Sie nach dem Elementor-Plugin.
- Wenn das Plugin angezeigt wird, wählen Sie Jetzt installieren > Aktivieren.
Wir können jetzt auf Elementor Pro upgraden:
- Besuchen Sie die Elementor-Website und kaufen Sie Elementor Pro, falls Sie dies noch nicht getan haben. Sie sollten eine Kaufbestätigungs-E-Mail erhalten.
- Melden Sie sich auf der Elementor-Website mit den Angaben in Ihrer Bestätigungs-E-Mail in Ihrem Konto an.
- Wählen Sie Download-Plugin und Elementor Pro wird als ZIP-Datei heruntergeladen.
- Melden Sie sich bei Ihrer WordPress-Website an.
- Wählen Sie im linken Menü Plugins > Upload Plugin.
- Klicken Sie auf Datei auswählen und wählen Sie dann die gerade heruntergeladene ZIP-Datei aus.
- Wählen Sie Jetzt installieren > Aktivieren
- Wenn Sie dazu aufgefordert werden, klicken Sie auf Verbinden und aktivieren und befolgen Sie die Anweisungen auf dem Bildschirm, um Ihre Elementor Pro-Lizenz zu aktivieren.
Elementor Pro ist jetzt einsatzbereit!
WooCommerce: So installieren Sie das kostenlose E-Commerce-Plugin von WordPress
Als Nächstes zeige ich Ihnen, wie Sie mit Elementor und WooCommerce einen Online-E-Commerce-Shop entwerfen, erstellen und starten.
Wenn Sie das kostenlose WooCommerce-Plugin noch nicht zu Ihrer Website hinzugefügt haben, haben Sie jetzt folgende Chance:
- Melden Sie sich bei Ihrer WordPress-Website an.
- Navigieren Sie zu Plugins > Neu hinzufügen
- Suchen Sie nach WooCommerce. Wenn dieses Plugin angezeigt wird, wählen Sie Jetzt installieren > Aktivieren.
- Sie sollten jetzt den Bildschirm Willkommen bei WooCommerce sehen. Klicken Sie bitte auf Ja, um den Setup-Vorgang zu starten.
- Geben Sie im folgenden Bildschirm Ihre Postanschrift ein und klicken Sie dann auf Weiter.
- WooCommerce wird nun einige Fragen zu Ihrer Branche und Ihren Produkten stellen und ob Sie bereits ein Online- oder ein physisches Geschäft haben.
Nachdem Sie alle Fragen von WooCommerce beantwortet haben, können Sie ein Theme für Ihren Online-Shop auswählen. Wir passen unseren Shop mit Elementor an. Wählen Sie einfach ein kostenloses Theme aus und klicken Sie auf "Weiter".
Sie werden nun aufgefordert, das Jetpack- und WooCommerce Services-Plugin zu aktivieren. Dieses Plugin schützt Ihre Website vor Brute-Force-Angriffen und kann auch die Leistung steigern. Es wird daher empfohlen, Jetpack zu aktivieren, es sei denn, Sie haben einen bestimmten Grund, dies nicht zu tun.
Herzlichen Glückwunsch, Sie haben gerade WooCommerce erfolgreich installiert!
WooCommerce verfügt über zahlreiche Einstellungen, darunter einige, die für den Betrieb eines erfolgreichen Online-Shops unerlässlich sind, z. B. die Angabe, ob Sie PayPal, Stripe oder direkte Banküberweisung akzeptieren.
Das Konfigurieren Ihres WooCommerce-Shops geht über den Rahmen dieses Tutorials hinaus. Sie können jedoch alle Einstellungen von WooCommerce untersuchen, indem Sie im linken WordPress-Menü WooCommerce > Einstellungen auswählen.
Weitere Anleitungen finden Sie in unserem kostenlosen Anfängerleitfaden zur Verwendung von WooCommerce-Kurses oder in unserer Reihe Erste Schritte mit WooCommerce.
Füllen Sie die Regale: Erstellen Sie Ihr erstes WooCommerce-Produkt
In diesem Tutorial erstellen wir verschiedene Layouts. Daher ist es wichtig, dass Sie diese Layouts beim Erstellen testen.
Wenn Sie bereits einen Katalog mit WooCommerce-Produkten haben, können Sie mit diesen Produkten genau sehen, wie Ihr Geschäft aussehen wird, wenn es vollständig bestückt ist. Wenn Sie jedoch Ihr erstes Geschäft aufbauen, sollten Sie sich ein paar Minuten Zeit nehmen, um eine Handvoll Produkte zu erstellen, die Sie in Ihren Layouts verwenden können.
Um ein Produkt zu erstellen, wählen Sie im linken WordPress-Menü Produkte > Neu hinzufügen.
Sie können jetzt die Dropdown-Liste Produktdaten öffnen und die Art des Produkts angeben, das Sie erstellen möchten:
- Einfaches Produkt. Dies ist jedes Produkt, das ausgeliefert wird und keine Optionen bietet.
- Gruppiertes Produkt. Dies ist eine Sammlung verwandter Produkte, die alle in die einfache Produktkategorie fallen.
- Externes/verbundenes Produkt. Dies ist ein Produkt, das an anderer Stelle verkauft wird, aber auf Ihrer Website vorgestellt wird.
- Variables Produkt. Dies ist ein Produkt mit Variationen, z. B. eine Jacke, die in verschiedenen Größen und Farben erhältlich ist.
Für die Zwecke dieses Tutorials erstelle ich ein einfaches Produkt:
- Geben Sie Ihrem Produkt einen Namen und schreiben Sie eine kurze Beschreibung.
Sie können dieses Produkt jetzt einer Produktkategorie zuordnen. Wenn Sie beispielsweise ein Bekleidungsgeschäft einrichten, können Ihre Kategorien Hoodies & Sweatshirts, Occasionwear und Shoes & Boots umfassen. Angenommen, Sie möchten eine neue Kategorie erstellen, scrollen Sie zum Abschnitt Produktkategorien und wählen Sie Neue Kategorie hinzufügen.
- Geben Sie Ihrer Kategorie einen Namen und klicken Sie dann auf Neue Kategorie hinzufügen.
- Wählen Sie im Abschnitt Produktkategorien die Kategorie aus, die Sie gerade erstellt haben.
Kennen Sie bereits alle Kategorien, die Sie auf Ihrer Website veröffentlichen möchten? Sie können alle diese Kategorien im Voraus implementieren, indem Sie die obigen Schritte wiederholen. Möglicherweise möchten Sie Ihre Kategorien auch in übergeordnete und untergeordnete Kategorien unterteilen. Ich erstelle beispielsweise eine übergeordnete Kategorie für die Küche und ordne ihr die folgenden untergeordneten Kategorien zu: Barhocker, Esszimmerstühle und Küchenhocker.
- Geben Sie unter Produkt-Tags alle Tags ein, die Sie verwenden möchten, und klicken Sie dann auf Hinzufügen.
- Fügen Sie als Nächstes ein ausgewähltes Bild hinzu, indem Sie zu Produktbild scrollen und dann Produktbild festlegen auswählen.
- Wählen Sie das Bild, das Ihr Produkt am besten repräsentiert.
Haben Sie mehrere Bilder, die Sie für dieses bestimmte Produkt verwenden möchten? Sie können eine Produktgalerie erstellen, indem Sie zum Abschnitt Produktgalerie scrollen, Produktgaleriebilder hinzufügen auswählen und die Bilder auswählen, die Sie verwenden möchten.
- Stellen Sie im Abschnitt Produktdaten sicher, dass Allgemein ausgewählt ist.
- Geben Sie unter Normalpreis ein, wie viel dieses Produkt kosten soll.
- Wählen Sie als Nächstes die Registerkarte Inventar.
- Geben Sie in der SKU die Lagerhaltungseinheit (Stock Keeping Unit) dieses Produkts und mit dieser Nummer können Sie dieses Produkt in Ihrem Inventar verfolgen.
- Aktivieren Sie das Kontrollkästchen Lagerverwaltung auf Produktebene aktivieren.
- Geben Sie unter Lagermenge die Anzahl der Einheiten ein, die Sie derzeit auf Lager haben.
- WooCommerce kann Ihnen eine E-Mail senden, wenn der Lagerbestand knapp wird. Wenn Sie diese Benachrichtigungen über niedrige Lagerbestände erhalten möchten, geben Sie den gewünschten Wert in den Schwellenwert für niedrige Lagerbestände ein. Sie erhalten jetzt eine E-Mail, sobald Ihr Bestand diesen Schwellenwert erreicht.
- Wählen Sie im linken Menü Versand.
- Geben Sie unter Gewicht das Gewicht dieses Produkts ein.
- Geben Sie unter Abmessungen die Länge, Breite und Höhe des Produkts ein.
- Wenn Sie mit den eingegebenen Informationen zufrieden sind, klicken Sie auf Veröffentlichen.
Um das soeben erstellte Produkt anzuzeigen, wählen Sie Produkt anzeigen.
Spülen und wiederholen, um mehrere Produkte zu erstellen. Um Ihre Layouts wirklich auf die Probe zu stellen, sollten Sie versuchen, eine Vielzahl von Produkten zu erstellen, die mehrere Kategorien umfassen.
Organisieren Sie Ihren Shop mit Produktkategorien
Nachdem Sie alle Ihre Produkte erstellt haben, sollten Sie sich einige Minuten Zeit nehmen, um Ihre Produktkategorien zu überprüfen.
Wenn Sie eine Bestandsaufnahme aller von Ihnen erstellten Kategorien durchführen, können Sie alle Kategorien identifizieren, die in einer übergeordneten Kategorie gruppiert werden müssen, oder Sie stellen möglicherweise fest, dass Sie vergessen haben, einige wichtige Kategorien zu erstellen.
Um Ihre Kategorien zu überprüfen, wählen Sie im linken Menü von WordPress Produkt > Kategorien.
Ich habe bereits eine Küche-Elternkategorie erstellt, die meine Kinderkategorien Barhocker, Esszimmerstühle und Küchenhocker enthält. Jetzt werde ich einige zusätzliche Elternkategorien erstellen: Büro, Schlafzimmer, Wohnzimmer und Garten.
So erstellen Sie eine übergeordnete Kategorie:
-
Geben Sie unter Neue Kategorie hinzufügen den Namen der übergeordneten Kategorie ein, die Sie erstellen möchten.
- Stellen Sie sicher, dass die übergeordnete Kategorie auf Keine festgelegt ist.
- Klicken Sie auf Neue Kategorie hinzufügen.
- Suchen Sie die erste untergeordnete Kategorie, die Sie dieser übergeordneten Kategorie zuweisen möchten, und wählen Sie dann den zugehörigen Link Bearbeiten des Kindes aus.
- Öffnen Sie die Dropdown-Liste Übergeordnete Kategorie und wählen Sie die übergeordnete Kategorie aus, die Sie gerade erstellt haben.
-
Klicken Sie auf Aktualisieren.
Spülen und wiederholen Sie für jede untergeordnete Kategorie, die Sie zuweisen möchten, und für jede übergeordnete Kategorie, die Sie erstellen möchten.
Erstellen eines Produktmenüs im Amazon-Stil
Als Nächstes werde ich Kunden die Möglichkeit geben, Produkte nach Produktkategorien zu filtern. In diesem Abschnitt erstellen wir ein Dropdown-Menü, in dem bei Auswahl einer übergeordneten Kategorie alle untergeordneten Kategorien angezeigt werden, die diesem übergeordneten Element zugeordnet sind.
Diese Art von Eltern/Kind-Produktmenü ist ein Grundnahrungsmittel vieler E-Commerce-Websites, einschließlich Schwergewichten wie Amazon und eBay. Durch Hinzufügen dieser Art von Produktmenü zu Ihrer E-Commerce-Website können Sie Besuchern eine vertraute Möglichkeit bieten, alles zu erkunden, was Ihr Geschäft zu bieten hat.
Standardmäßig ist es nicht möglich, einem WordPress-Menü Produktkategorien hinzuzufügen. Bevor wir unser Menü erstellen, müssen wir diese Standardeinstellungen bearbeiten:
- Wählen Sie im linken WordPress-Menü "Darstellung" > "Menüs".
- Suchen Sie oben auf dem Bildschirm den Abschnitt Bildschirmoptionen und klicken Sie, um ihn zu erweitern.
- Suchen Sie nach Produktkategorien und wählen Sie sie aus.
Sie können jetzt Produktkategorien zu Ihren Menüs hinzufügen. Erstellen Sie also unser Menü:
- Geben Sie Ihrem Menü einen Namen und klicken Sie dann auf Neues Menü erstellen.
- Klicken Sie hier, um den Abschnitt Produktkategorien zu erweitern.
- Wählen Sie alle Produktkategorien aus, die Sie Ihrem Menü hinzufügen möchten.
- Klicken Sie auf Zum Menü hinzufügen. Alle ausgewählten übergeordneten und untergeordneten Kategorien werden nun zum Abschnitt Menüstruktur hinzugefügt.
- Da wir ein Dropdown-Menü erstellen, müssen Sie jede untergeordnete Kategorie erfassen und unter der zugehörigen übergeordneten Kategorie ablegen.
- Nehmen Sie als Nächstes jede untergeordnete Kategorie und ziehen Sie sie leicht nach rechts, sodass sie unter dem übergeordneten Element eingerückt erscheint. Geben Sie die untergeordnete Kategorie frei, und sie sollte jetzt dauerhaft eingerückt sein.
- Wiederholen Sie diesen Einrückvorgang für jede untergeordnete Kategorie.
- Wenn Sie ändern möchten, wo ein Element in Ihrem Menü angezeigt wird, greifen Sie auf die Menüstruktur zu und legen Sie es an einem neuen Speicherort ab.
- Wenn Sie mit der Einrichtung Ihres Menüs zufrieden sind, klicken Sie auf "Menü speichern".
- Um dieses Menü auf Ihrer Website zu platzieren, klicken Sie auf die Registerkarte Standorte verwalten.
- Angenommen, Sie möchten, dass dieses Menü auf Ihrer gesamten Website angezeigt wird, öffnen Sie die Dropdown-Liste "Oberes Menü" und wählen Sie das gerade erstellte Menü aus.
- Klicken Sie auf Änderungen speichern.
Dieses übergeordnete/untergeordnete Menü wird nun in Ihrem E-Commerce-Shop angezeigt, sodass Kunden Ihre Produktkategorien auf einfache Weise erkunden können.
Entwerfen eines WooCommerce-Shops mit Elementor Pro
Zu diesem Zeitpunkt verfügen Sie über alle Elemente, die Sie für einen erfolgreichen E-Commerce-Shop benötigen: eine WooCommerce-Installation, einige Produkte und ein Menü, mit dem Besucher Ihren Shop erkunden können.
Es gibt jedoch noch eine letzte Einrichtung, die wir durchführen müssen. Standardmäßig können Sie Elementor nur zum Entwerfen von Posts und Seiten verwenden, nicht von Produkten.
Bevor wir mit dem nächsten Abschnitt fortfahren, müssen wir die Funktionen von Elementor um WooCommerce-Produkte erweitern:
- Wählen Sie im linken WordPress-Menü Elementor > Einstellungen.
- Wählen Sie unter Beitragstypen die Option Produkte aus.
-
Wählen Sie Änderungen speichern.
Sie können jetzt Elementor verwenden, um benutzerdefinierte Produktseiten zu entwerfen. Beginnen wir also!
Verwenden der vorgefertigten Vorlagen von Elementor Pro
Elementor bietet eine Reihe von Vorlagen, die Ihrer Website ein völlig neues Erscheinungsbild verleihen und manchmal sogar zusätzliche Funktionen hinzufügen können. Diese professionell gestalteten Vorlagen können den Aufbau eines E-Commerce-Shops erheblich vereinfachen. Lassen Sie uns zunächst diese vorgefertigten Vorlagen untersuchen.
In diesem Abschnitt zeige ich Ihnen, wie Sie zwei Seiten anpassen, die WooCommerce automatisch erstellt: Ihr Produktarchiv und Ihre Produktseiten.
Neugestaltung der einzelnen Produktseite von WooCommerce
Auf Produktseiten können Besucher Ihre Produkte anzeigen und letztendlich kaufen. Daher ist es wichtig, dass sie gut aussehen und alle Funktionen bieten, die Ihre Kunden benötigen.
Elementor Pro verfügt über eine Reihe von Produktseitenvorlagen. Verwenden Sie diese Vorlagen also sinnvoll:
- Wählen Sie im linken WordPress-Menü "Vorlagen" > "Theme Builder".
- Klicken Sie auf die Schaltfläche Neu hinzufügen.
- Öffnen Sie die Dropdown-Liste Vorlagentyp und wählen Sie Einzelprodukt.
- Geben Sie Ihrer Vorlage einen Namen und klicken Sie dann auf Vorlage erstellen.
- Elementor Pro zeigt jetzt alle verfügbaren Einzelproduktvorlagen an. Wählen Sie die Vorlage aus, die Sie verwenden möchten.
Diese Vorlage wird jetzt im Elementor-Editor geöffnet. An dieser Stelle können Sie Änderungen an der von Ihnen ausgewählten Vorlage vornehmen. Im Moment veröffentlichen wir jedoch nur die von uns ausgewählte Vorlage:
- Wählen Sie im Elementor-Bedienfeld die Option Veröffentlichen.
- Öffnen Sie im nachfolgenden Popup die Dropdown-Liste Einschließen und stellen Sie sicher, dass Produkte ausgewählt ist.
-
Klicken Sie auf Speichern und schließen.
Diese Vorlage wird jetzt auf allen Ihren Produktseiten bereitgestellt.
Erstellen eines benutzerdefinierten WooCommerce-Produktarchivs
Das Produktarchiv ist eine Liste, die alle Ihre Produkte an einem einzigen Ort enthält. Wenn Sie WooCommerce einrichten, hat dieses Plugin Ihrer Website automatisch ein Produktarchiv hinzugefügt, obwohl das Erscheinungsbild des Archivs je nach WordPress-Theme variiert.
Kein Fan dieses automatisch generierten Produktarchivs? Sie können es schnell und einfach mit einer der Produktarchivvorlagen von Elementor neu gestalten:
- Wählen Sie im linken WordPress-Menü "Vorlagen" > "Theme Builder".
- Klicken Sie auf die Schaltfläche Neu hinzufügen.
- Öffnen Sie die Dropdown-Liste Vorlagentyp und wählen Sie Produktarchiv.
- Geben Sie Ihrer Vorlage einen Namen und klicken Sie dann auf Vorlage erstellen.
Elementor Pro zeigt jetzt alle verfügbaren Produktarchivvorlagen an. Wählen Sie die Vorlage aus, die Sie verwenden möchten.
- Die von Ihnen ausgewählte Vorlage wird jetzt im Elementor-Editor geöffnet.
- Wenn Sie mit der ausgewählten Vorlage zufrieden sind, können Sie sie veröffentlichen, indem Sie auf die grüne Schaltfläche "Veröffentlichen" klicken.
- Öffnen Sie im nachfolgenden Popup die Dropdown-Liste Einschließen und wählen Sie Alle Produktarchive aus.
- Klicken Sie auf Speichern und schließen.
Dieses aktualisierte Produktarchiv wird nun auf Ihrer Website angezeigt.
Abschluss
In diesem Beitrag haben wir einen kompletten Online-Shop erstellt. Diese WooCommerce-Website bietet alles, was Sie für den Verkauf von Produkten benötigen. Diese sind in den professionell gestalteten Vorlagen von Elementor Pro enthalten.
Wenn Sie mit dem Erscheinungsbild Ihrer Website nicht ganz zufrieden sind, probieren Sie eine andere Elementor Pro-Vorlage aus. Oder lesen Sie unseren Follow-up-Beitrag, in dem ich Ihnen zeige, wie Sie Elementor Template Kits verwenden und wie Sie Ihre eigene Vorlage von Grund auf neu erstellen.
