So erstellen Sie einen Shop mit einem WooCommerce Builder für Elementor

Sie suchen nach einem WooCommerce-Builder für Elementor, damit Sie Ihren Shop mit dem leistungsstarken visuellen Builder von Elementor erstellen und anpassen können.

Mit ShopReady können Sie Ihren gesamten WooCommerce-Shop mit Elementor erstellen und anpassen – auch wenn Sie nur die kostenlose Version von Elementor verwenden!

Wenn Sie mehr über ShopReady erfahren möchten, können Sie sich unseren vollständigen ShopReady-Test ansehen.

In diesem Artikel konzentrieren wir uns jedoch mehr auf die Verwendung von ShopReady als WooCommerce-Builder für Elementor.

Im Folgenden zeigen wir Ihnen Schritt für Schritt, wie Sie ShopReady zum Erstellen und Anpassen Ihres Shops verwenden können, einschließlich des Hinzufügens erweiterter Funktionen wie Wunschlisten, Produktschnellansicht, optimierter Checkouts und vielem mehr.

Sie können einen Shop erstellen, der wie folgt aussieht:

Und Sie können alles mit Elementor anpassen, einschließlich Ihrer Produkt-, Warenkorb- und Checkout-Seiten ( und vielem mehr ):

So verwenden Sie ShopReady als WooCommerce Builder für Elementor

Lassen Sie uns ohne weiteres Umschweife direkt zu unserem Schritt-für-Schritt-Tutorial übergehen.

Nochmals, wenn Sie mehr über die vielen Funktionen in ShopReady erfahren möchten, bevor Sie mit dem Tutorial beginnen, können Sie unseren vollständigen ShopReady-Test lesen.

Und wann immer Sie es ausprobieren möchten, erhalten Sie 30 % Rabatt, indem Sie den exklusiven Gutscheincode WPMayor30 an der Kasse verwenden.

1. Erstellen Sie Ihren grundlegenden WooCommerce-Shop und installieren Sie Elementor

Wenn Sie dies noch nicht getan haben, besteht Ihr erster Schritt darin, Ihren grundlegenden WooCommerce-Shop einzurichten.

Sie sollten hochwertiges WooCommerce-Hosting auswählen, WooCommerce installieren, den Setup-Assistenten durchlaufen, einige Produkte hinzufügen und so weiter.

Wenn Sie hier Hilfe benötigen, können Sie unseren Leitfaden zum Einrichten eines WooCommerce-Shops lesen.

Machen Sie sich noch keine Gedanken über die Auswahl eines WooCommerce-Themes oder die Anpassung des Designs, denn dafür sind Elementor und ShopReady da. Konzentrieren Sie sich einfach darauf, Dinge im Backend einzurichten, damit Sie einen funktionierenden, wenn auch einfachen Shop haben.

Sobald Sie das getan haben, möchten Sie auch das Elementor-Plugin installieren.

Mit ShopReady können Sie nur die kostenlose Version von Elementor verwenden.

Oder, wenn Sie bereits Elementor Pro haben, können Sie das auch installieren – ShopReady funktioniert mit beiden Versionen einwandfrei.

2. Installieren Sie ShopReady und aktivieren Sie alles

Sobald Sie Ihren grundlegenden WooCommerce-Shop eingerichtet und Elementor installiert haben, können Sie den ShopReady WooCommerce-Builder für Elementor installieren.

Es gibt eine kostenlose Version von ShopReady auf WordPress.org sowie eine Premium-Version, die weitere Funktionen ab 75 US-Dollar hinzufügt.

Für dieses Tutorial haben wir die Pro-Version installiert. Die gleichen grundlegenden Schritte gelten jedoch auch für die kostenlose Version, sodass Sie in der Lage sein sollten, mitzumachen, selbst wenn Sie die kostenlose Version verwenden ( Sie haben möglicherweise keinen Zugriff auf einige der erweiterten Funktionen und werden es auch nicht). in der Lage, beliebig viele Vorlagen anzupassen ).

Sobald Sie das Plugin aktivieren, erhalten Sie ein neues ShopReady- Menü in Ihrem WordPress-Dashboard.

Wenn Sie zum Hauptmenü von ShopReady gehen, erhalten Sie eine Oberfläche mit verschiedenen Bereichen, in denen Sie verschiedene Widgets, Module und Vorlagen aktivieren können.

Im Moment empfehle ich, alle Widgets und Module zu aktivieren, damit Sie beim Erstellen Ihres Shops Zugriff auf alle Funktionen haben.

Sobald Sie Ihren Shop erstellt haben, können Sie jederzeit zurückkehren und alle Elemente deaktivieren, die Sie nicht verwenden, um die Dinge leicht zu halten und Ihren Shop zu beschleunigen.

Es ist besonders wichtig, das Demo Importer- Modul zu aktivieren, da Sie damit auf die vorgefertigten Shop-Vorlagen von ShopReady zugreifen können ( obwohl Sie immer alles von Grund auf neu anpassen können ).

Sobald Sie das Demo Importer- Modul aktivieren, werden Sie aufgefordert, das begleitende Demo Importer-Plugin zu installieren, was Sie tun sollten.

Gehen Sie danach zum neuen Unyson- Bereich in Ihrem WordPress-Dashboard und aktivieren Sie die Erweiterung Backup & Demo Content , damit Sie die Vorlagen von ShopReady importieren können.

Hinweis – Wenn Sie Ihre Vorlagen mit Elementor von Grund auf neu entwerfen möchten, können Sie diesen Vorgang überspringen.

3. Importieren Sie eine Vorlage, die als Basis für Ihr Geschäft dient

Jetzt können Sie zu Tools → Demo Content Install gehen, um eine der vorgefertigten ShopReady-Demoseiten zu installieren.

Auch hier steht es Ihnen frei, dies zu überspringen und die Vorlagen Ihres Shops einfach von Grund auf neu zu entwerfen, was wir im nächsten Abschnitt behandeln werden.

Sobald Sie die Demo importiert haben, können Sie alles mit Elementor vollständig anpassen.

Sehen Sie sich die verschiedenen Demo-Optionen an und klicken Sie dann auf die Schaltfläche Installieren für die Demo, die Sie als Basis für Ihr Geschäft verwenden möchten.

Für dieses Tutorial verwenden wir Demo V1 :

Und schon sollte Ihr Shop genauso aussehen wie in der Demo:

4. Passen Sie die Vorlagen Ihres Shops mit Elementor an

Jetzt können Sie den WooCommerce-Builder für Elementor verwenden, um den Inhalt Ihres Shops anzupassen.

Um auf alle verschiedenen Vorlagen Ihres Shops zuzugreifen, gehen Sie zum ShopReady- Bereich in Ihrem WordPress-Dashboard und wählen Sie dann die Registerkarte Vorlagen .

Hier sehen Sie eine Liste aller verschiedenen Vorlagen, die mit Ihrem Shop verknüpft sind. Hier sind einige der wichtigsten Vorlagen, die Sie berücksichtigen sollten:

• Produkt – die Vorlage für eine einzelne Produktseite.
• Shop – die Vorlage für die Hauptseite des Shops.
• Shop-Archiv – die Vorlage für die Seite, die alle Ihre Produkte auflistet.
• Warenkorb / Leerer Warenkorb – die Vorlagen für verschiedene Phasen Ihres Warenkorbs.
• Checkout – die Vorlage für Ihre Checkout-Seite.
• Mein Konto – die Vorlage für die Frontend-Kontoseite eines Käufers.

Das Schöne an ShopReady ist jedoch, dass es Ihnen auch die Kontrolle über viele andere Vorlagen gibt, wie z. B. Produktschnellansicht, Wunschliste und mehr.

Um eine beliebige Vorlage zu bearbeiten und Elementor zu starten, müssen Sie nur die entsprechende Vorlage auswählen und dann auf das Stiftsymbol klicken.

Sie können auch neue Vorlagen erstellen und mehrere Vorlagen in verschiedenen Teilen Ihres Shops verwenden:

ShopReady startet nun die Elementor-Oberfläche.

Um das Design zu steuern, können Sie die normale Elementor-Oberfläche und alle ihre Designoptionen verwenden.

Der Hauptunterschied besteht darin, dass ShopReady Ihnen auch Tonnen von allgemeinen Widgets und speziellen WooCommerce-Widgets bietet, die Sie in Ihren Designs verwenden können. Sie finden diese in den verschiedenen Shop Ready- Bereichen der Elementor-Oberfläche:

Jedes Widget hat auch seine eigenen einzigartigen Einstellungen.

Mit dem Widget Miniaturbild mit Zoom können Sie beispielsweise die Produktbilder mit unterschiedlichen Layouts und Einstellungen anzeigen:

Wenn Sie fertig sind, stellen Sie sicher, dass Sie Ihre Änderungen speichern.

Anschließend können Sie denselben Vorgang wiederholen, um alle Vorlagen Ihres Shops zu bearbeiten. Über den blauen Dashboard- Link auf der rechten Seite der Seite können Sie ganz einfach zur ShopReady-Vorlagenoberfläche zurückkehren.

Verschiedene Vorlagen können ihre eigenen speziellen Widgets enthalten. Wenn Sie beispielsweise die Checkout-Seitenvorlage erstellen, erhalten Sie spezielle Widgets, die Ihnen dabei helfen:

5. Passen Sie die Site-Einstellungen an

ShopReady ermöglicht es Ihnen nicht nur, einzelne Vorlagen mit Elementor anzupassen, sondern fügt auch einige Optionen zum Menü „Elementor-Site-Einstellungen“ hinzu. Sie können auf die Website-Einstellungen von Elementor zugreifen, indem Sie auf das Hamburger-Symbol in der oberen linken Ecke der Elementor-Benutzeroberfläche klicken und Website-Einstellungen auswählen .

Hier können Sie auf eine Reihe wichtiger Einstellungen für das Verhalten Ihres Shops zugreifen.

Die Einstellungen sind zunächst in zwei Bereiche unterteilt – ShopReady und ShopReady General & PopUp.

Wenn Sie in diese Bereiche klicken, erhalten Sie eine Reihe zusätzlicher Optionen. Sie können beispielsweise das Verhalten für den Sitewide-Mini-Einkaufswagen steuern, den Sie mit ShopReady hinzufügen können:

Wir empfehlen, alle diese Optionen zu erkunden, da Sie hier jede Menge coole Funktionen für Ihr Geschäft finden können.

Sie können Ihre Kopf- und Fußzeile auch steuern, indem Sie in Ihrem WordPress-Dashboard zu ShopReady → Kopfzeile Fußzeile gehen.

Beginnen Sie noch heute mit der Verwendung eines WooCommerce Builder für Elementor

Benutzer lieben Elementor wegen seiner leistungsstarken visuellen Drag-and-Drop-Builder-Oberfläche.

Mit ShopReady können Sie die Leistungsfähigkeit dieses Builders nutzen, um Ihren WooCommerce-Shop vollständig zu entwerfen und anzupassen, selbst wenn Sie nur die kostenlose Version von Elementor verwenden.

Wenn Sie bereit sind, loszulegen, verwenden Sie die Schaltfläche unten, um ShopReady herunterzuladen, und folgen Sie dann diesem Tutorial, um Ihren WooCommerce-Shop zu erstellen.

Bonus: Erhalten Sie 30 % Rabatt auf ShopReady, indem Sie den exklusiven Gutscheincode WPMayor30 an der Kasse verwenden!