So erstellen Sie eine Elementor-betriebene WooCommerce-Site

Es reicht nicht aus, dass die WordPress-Plattform selbst das beliebteste Content Management System (CMS) der Welt ist. Wir haben auch die beliebtesten Page Builder- und E-Commerce-Plattformen in Elementor und WooCommerce. Daher ist es sinnvoll, alle drei zu verwenden, um einen hervorragend aussehenden und leistungsstarken Online-Shop zu erstellen.

Wenn wir es aufschlüsseln, ist WordPress ideal zum Organisieren Ihrer Beiträge, Seiten und Produkte. WooCommerce bietet aufgrund seiner Entwickler (Automattic) eine enge Integration mit der Plattform. Darüber hinaus bietet Elementor eine leistungsstarke und intuitive Drag-and-Drop-Seitenerstellung. Es ist eine vollständige No-Code-Lösung für den Aufbau Ihres Geschäfts.

In diesem Artikel werden wir uns ansehen, wie man ein Geschäft mit Elementor und WooCommerce aufbaut. Währenddessen werden wir uns ansehen, wie beide ineinandergreifen, um Ihnen die größtmögliche Flexibilität für Ihre Website zu bieten.

Warum WordPress, Elementor und WooCommerce gut zusammenarbeiten

Es lohnt sich, einen genaueren Blick darauf zu werfen, wie WordPress, Elementor und WooCommerce kombiniert werden können, um Ihnen beim Erstellen erstklassiger Online-Shops zu helfen.

Zunächst einmal ist WordPress das am häufigsten verwendete CMS auf dem Markt. Dies reicht natürlich nicht aus, um eine solch dominante Stellung bei den Nutzern zu rechtfertigen. Tatsächlich haben wir uns dies in einem früheren Beitrag angesehen, daher empfehlen wir Ihnen, diesen Beitrag weiter zu lesen. Kurz gesagt, es ist eine sichere, stabile und skalierbare Plattform, auf der Sie aufbauen können.

Apropos, Sie haben auch WooCommerce. Da Automattic das Plugin entwickelt, hat es eine großartige Integration mit dem Kern von WordPress, aber das ist noch nicht alles.

Es ist auch die beliebteste E-Commerce-Plattform. Innerhalb des WordPress-Ökosystems hat es einen Anteil von rund 20 Prozent, was ungefähr acht Prozent aller Websites entspricht. Im Vergleich dazu hat Shopify einen Marktanteil von etwa fünf oder sechs Prozent. Auch hier sind Nutzungszahlen nicht alles.

WooCommerce übernimmt den Prozess der Erstellung eines Online-Shops und rationalisiert den Prozess. Sie können in wenigen Minuten einsatzbereit sein und haben eine robuste, leistungsstarke und erweiterbare E-Commerce-Plattform, die einsatzbereit ist.

Um diese zusammenzustricken, haben Sie Elementor. Es hat auch einen großen Marktanteil in seinem Bereich und eine riesige Benutzerbasis.

Es ist ein Drag-and-Drop-Seitenersteller mit einem einzigartigen Ansatz, mit dem Sie Ihre gesamte Website von Grund auf neu erstellen können. Dies ist eine verlockende Lösung, da es viele leistungsstarke Features und Funktionen gibt, die andere Tools nicht haben. Am relevantesten ist hier der dedizierte WooCommerce Builder.

Kurz gesagt, Elementor ist ein Plugin mit vielen Spalten im WPKube-Blog, und Sie sollten unsere Archive durchsuchen, um zu sehen, was es kann.

Was eine WooCommerce-Site von einem Page Builder braucht

Die implizite Erkenntnis aus dem letzten Abschnitt ist, dass Elementor die richtige Mischung aus Features und Funktionen bieten kann, die WooCommerce benötigt, um Ihre Website auf die nächste Stufe zu heben. Es ist jedoch wichtig, darauf einzugehen, warum dies so ist und was es bietet.

Im Allgemeinen benötigt eine WooCommerce-Site Folgendes von einem Seitenersteller:

• Enge Integration, damit es keine Konflikte zwischen dem Seitenersteller und WooCommerce gibt.
• Viele Anpassungsoptionen, um Ihre Produkte und Shop-Seiten hervorzuheben.
• Eine Möglichkeit, die einzelnen Elemente zu bearbeiten, aus denen sich eine typische Produktseite zusammensetzt.
• Zusätzliche Funktionen, mit denen Sie Ihren Shop aufwerten können.

Dabei sollten Sie (natürlich) auch Ihre individuellen Bedürfnisse beachten. Sie können beispielsweise feststellen, dass Formulare und Pop-ups für Ihr Geschäft und Ihre Verkaufsstrategie wichtig sind. Die gute Nachricht ist, dass Elementor Ihre Anforderungen mehr als erfüllen kann.

Zum Beispiel hat es einen großartigen Popup-Builder, der ein Leckerbissen für Verkäufe, zeitlich begrenzte Angebote, Coupons und vieles mehr ist:

Sie können sie wie andere Seitenvorlagen erstellen und im Handumdrehen anwenden. Darüber hinaus können Sie sie fast beliebig anpassen. Es ist perfekt, wenn Sie eine bestimmte Kampagne auf Ihrer Website bewerben möchten.

So wählen Sie ein geeignetes WooCommerce-Thema aus

Wir werden hier nicht sehr ins Detail gehen, da wir dies in unserem Tutorial behandeln und einige Themen in einem speziellen Artikel zusammenfassen.

Die Hauptüberlegung, die Sie in diesem Fall benötigen, ist ein Thema, das mit Elementor und WooCommerce kompatibel ist. Selbst ein kurzer Blick auf Premium-Marktplatzseiten zeigt Ihnen, dass viele Themen dafür werben, sodass Ihre Auswahl breit gefächert ist.

Trotzdem gibt es einige herausragende Themen, die wir erwähnen können:

• Schaufenster. Es wird wahrscheinlich die geringste Kompatibilität mit Elementor haben, da der Blockeditor eine native Technologie ist. Still,
• Hallo. Dies ist das leere Starter-Theme von Elementor und ideal für die Entwicklung einer WooCommerce-Site von Grund auf neu. Wenn Sie weniger Zeit zur Verfügung haben, ist es natürlich ratsam, ein anderes Thema mit mehr Funktionen zu wählen.
• Presse erzeugen. Dies ist ein Top-Thema mit einer flexiblen Infrastruktur. Das bedeutet, dass Ihr Shop unabhängig davon, ob Sie den Block-Editor, Elementor oder etwas anderes verwenden, fantastisch aussehen wird.

Wir empfehlen Ihnen, das richtige Thema zu finden, bevor Sie sich mit der Erstellung Ihrer Website befassen. Denken Sie daran, dass die besten Ergebnisse mit etwas erzielt werden, das mit Elementor und WooCommerce kompatibel ist.

So erstellen Sie eine Elementor-betriebene WooCommerce-Site in 3 Schritten

Im weiteren Verlauf dieses Artikels zeigen wir Ihnen, wie Sie Elementor und WooCommerce zusammen verwenden, um eine E-Commerce-Site zu erstellen. Es sind drei Schritte zu beachten:

• WooCommerce installieren und einrichten.
• Erstellen Sie Ihre WooCommerce-Produktlinien und verwenden Sie Elementor, um die Produktseiten zu erstellen.
• Entwerfen Sie eine eigene Shop-Seite, wiederum mit Elementor.

Für dieses Tutorial gehen wir jedoch davon aus, dass Sie Elementor Pro bereits installiert und aktiviert haben. Wir führen Sie in unserem Artikel zum Erstellen eines WordPress-Trichters durch dieses Thema. Dieser Beitrag wird Ihnen helfen, wenn Sie auf Probleme stoßen.

1. Installieren Sie WooCommerce und richten Sie es ein

Beim Einrichten einer WooCommerce-Installation sind zwei Aspekte zu berücksichtigen: das Plugin selbst und die Einstellungen Ihres Shops. Tatsächlich erfolgt die Installation des Plugins genauso wie bei jedem anderen WordPress-Plugin.

Was die Einrichtung von WooCommerce selbst betrifft, so können Sie zwar innerhalb weniger Minuten loslegen, es lohnt sich jedoch, etwas mehr Zeit in Anspruch zu nehmen, um den Einrichtungsassistenten zu durchlaufen.

Wenn es um diesen Punkt des Setups geht, sind Sie bei uns genau richtig. Tatsächlich haben wir einen vollständigen WooCommerce-Tutorial-Beitrag, der Schritt für Schritt erklärt, wie Sie mit WooCommerce beginnen und Ihr erstes Produkt erstellen. Es ist ein guter Beitrag, in einem freien Tab geöffnet zu sein, während Sie diesen durchgehen. Die darin enthaltenen Informationen werden für die nächsten Schritte wertvoll sein.

2. Erstellen Sie Ihre WooCommerce-Produkte

Sobald Sie eine WooCommerce-Installation zum Laufen gebracht haben, sollten Sie sich mit der Erstellung von Produkten im Backend befassen. Auch hier behandelt unser WooCommerce-Tutorial die Vorgehensweise im Detail, aber hier sind die Anmerkungen von Cliff:

• Gehen Sie in WordPress zur Registerkarte Produkte > Neu hinzufügen.
• Geben Sie den Namen und die Kurzbeschreibung Ihres Produkts ein.
• Verwenden Sie die WooCommerce-Metafelder, um die Daten Ihres Produkts, wie z. B. den Preis, auszufüllen.
• Fügen Sie ein Bild hinzu.
• Veröffentlichen Sie Ihr Produkt.

Hier zeigt Elementor jedoch seinen ersten Power Move – den WooCommerce Builder. Auf diese Weise können Sie den Seitenersteller verwenden, um das Design Ihrer Produktseiten zu erstellen.

Klicken Sie zunächst in WordPress auf Vorlagen > Neu hinzufügen:

Wählen Sie hier Einzelprodukt aus dem Dropdown- Menü Vorlagentyp aus und geben Sie einen optionalen Namen ein:

Dadurch wird die Vorlagenbibliothek geöffnet, um alle vorgefertigten Blöcke darin anzuzeigen:

Sobald Sie ein Design sehen, das Ihnen gefällt, klicken Sie auf die Schaltfläche Einfügen und Elementor importiert den Block:

Dies ist eine schnelle Möglichkeit, eine spezielle Produktseite zu erstellen. Sie können diesen großartigen Start nehmen und weitere hinzufügen. Elementor enthält eine Reihe spezieller Widgets, die Ihnen beim Erstellen von WooCommerce-spezifischen Seiten helfen:

Sobald Sie ein Seitenlayout haben, das Ihnen gefällt, klicken Sie unten auf dem Bildschirm auf die grüne Schaltfläche „Veröffentlichen“:

Dadurch wird ein Popup-Fenster geöffnet, das Ihnen hilft, eine bestimmte Bedingung für die Anzeige der Vorlage festzulegen:

Wenn Sie fertig sind, klicken Sie auf Speichern und schließen . Von hier aus können Sie Ihrem Shop weitere Produkte hinzufügen, an weiteren Vorlagen arbeiten oder mit der Arbeit an einer speziellen Shop-Seite beginnen.

3. Entwerfen Sie Ihre eigene Shop-Seite mit Elementor und WooCommerce

Eine praktische User Experience (UX) von WooCommerce ist, wie es die meisten notwendigen Seiten generiert, die Sie für Ihr Geschäft benötigen. Die Shop-Seite der obersten Ebene ist die wichtigste, da dies die vordere Markise ist, die die Tür schmückt.

Wenn Sie WordPress und WooCommerce mit einem WooCommerce-spezifischen Thema wie Storefront verwenden, ist Ihre Hauptanlaufstelle für die Anpassung der Shop-Seite der Customizer. Unser Fokus liegt jedoch auf Elementor. Der Weg, dies mit dem Seitenersteller zu tun, besteht darin, eine Produktarchivseite zu verwenden.

Damit können Sie anpassen, wie Produkte auf Ihrer Website angezeigt werden, der Rest Ihrer Seite wird jedoch nicht behandelt. In einigen Fällen kann es schwierig sein, zwei Sätze von Anpassungen und Einstellungen zu verwalten, aber unserer Erfahrung nach war dies bisher kein Problem.

Wie bei einzelnen Produkten müssen Sie in WordPress zu Vorlagen > Neu hinzufügen gehen und dann im Dropdown-Menü Produktarchiv auswählen:

Auch hier können Sie einen Block auswählen, eine Seite von Grund auf neu bearbeiten oder beides kombinieren, um etwas Einzigartiges zu erstellen. Wie zuvor können Sie auch jedes der WooCommerce-spezifischen Widgets verwenden, um eine Seite nach Ihren Wünschen zu gestalten.

Sobald Sie erneut auf die Schaltfläche „ Veröffentlichen “ klicken und zum Dialogfeld „Veröffentlichungseinstellungen“ gelangen, können Sie die Magie aufrufen. In seiner Grundform können Sie das neue Template auf der Shop-Seite einbinden :

Aber das ist noch nicht alles. Sie können weitere Include- Bedingungen hinzufügen, um die Vorlage an mehreren Stellen auf Ihrer Website zu verwenden. Dies ist großartig für die Kontinuität und gibt Besuchern einen Grund, Ihr Geschäft zu besuchen.

Eine kurze Anmerkung zu den anderen generierten Seiten von WooCommerce

Bevor wir zum Abschluss kommen, wollen wir noch die anderen generierten WooCommerce-Seiten erwähnen. Die schlechte Nachricht ist, dass sie nicht unter Elementors Blick fallen. Mit anderen Worten, Sie können Seiten wie die Checkout- oder Dankesseiten nicht ohne eine zusätzliche WooCommerce-Erweiterung bearbeiten.

Das ist enttäuschend, aber verständlich. Trotzdem können Sie Elementor weiterhin verwenden, um die umgebenden Elemente zu entwickeln, und dann die spezifische Seitenfunktionalität mit Shortcodes einfügen. Allerdings ist es nicht ideal.

Wenn Ihnen die vollständige Bearbeitung dieser Seiten wichtig ist, sollten Sie sich den Checkout Field Editor (49 $ pro Jahr) und die Erweiterung für benutzerdefinierte Dankesseiten (ebenfalls 49 $ pro Jahr) ansehen.

Abschließend

Was könnte schief gehen, wenn Sie drei der beliebtesten Tools zum Veröffentlichen eines E-Commerce-Shops verwenden? In diesem Fall gibt es nicht viel. WordPress, Elementor und WooCommerce bieten alle ein herausragendes Erlebnis. Wenn Sie sie kombinieren, können Sie einen Online-Shop optimal erstellen und betreiben.

In diesem Beitrag haben wir uns angesehen, wie man Elementor und WooCommerce zusammen verwendet, um ein Geschäft aufzubauen. Sobald Sie beide Plugins installiert und aktiviert haben, besteht Ihre erste Aufgabe darin, Produkte zusammen mit den zugehörigen Seiten zu erstellen. Von dort aus benötigen Sie eine dedizierte Shop-Seite – etwas, das Elementor verarbeiten kann. Darüber hinaus können die zusätzlichen Funktionen des Seitenerstellungs-Plug-ins (z. B. der Popup-Ersteller und mehr) dazu beitragen, Ihr Geschäft in die Stratosphäre zu bringen.

Möchten Sie eine Kombination aus Elementor und WooCommerce für Ihren nächsten Shop erstellen, und wenn ja, hilft Ihnen dieser Artikel? Lassen Sie es uns im Kommentarbereich unten wissen!