WooCommerce fügt einer WordPress-Website E-Commerce-Funktionen hinzu, aber was passiert, wenn du mehr willst als die eingebauten Design-Tools von WooCommerce?
Wie du vielleicht schon festgestellt hast, schränkt WooCommerce deine Gestaltungsmöglichkeiten ein, insbesondere für Produktseiten und den Kassenbereich.
Hier kommt die WooCommerce-Elementor-Integration ins Spiel: Sie eröffnet dir Drag-and-Drop-Funktionen, kreative Kontrolle über alle WooCommerce-Seiten und Unterstützung für fortschrittliche Elementor-WooCommerce-Addons und -Themes, die du sonst vielleicht nicht nutzen würdest.
In diesem Leitfaden erklären wir dir die Grundlagen von WooCommerce und Elementor, wie sie zusammenarbeiten und wie du mit der WooCommerce-Elementor-Kombination eine schöne E-Commerce-Seite erstellen kannst. Lies weiter, um loszulegen.
Was ist WooCommerce?
WooCommerce ist ein Plugin für WordPress, das jede Standard-WordPress-Installation in eine E-Commerce-Website verwandelt.
WooCommerce ist die beliebteste Lösung für den Betrieb eines Online-Shops in WordPress, da es sich schnell in das WordPress-Ökosystem integrieren lässt, eine robuste Sammlung von unterstützten E-Commerce-Themes und eine hohe Flexibilität bei der Entwicklung bietet.
Hier sind einige der wichtigsten Funktionen von WooCommerce:
- Verkauf von digitalen und physischen Produkten: WooCommerce unterstützt auch eine Vielzahl anderer Produkttypen, darunter Abonnements, variable Produkte, Affiliate-Produkte und gruppierte Produkte.
- Verwaltung von E-Commerce-Läden: WooCommerce verwaltet Bestellungen, den Produktbestand und alle Kontakte innerhalb seines Dashboards.
- Automatisierte Erstellung der wichtigsten E-Commerce-Seiten: Du erhältst eine Shop-Seite, eine Warenkorb-Seite, eine Mein-Konto-Seite und viele weitere Seiten, sobald du WooCommerce auf deiner Website aktivierst.
- Erweiterbarkeit und Skalierbarkeit: Es gibt ein großes Ökosystem von Plugins, Erweiterungen und Add-ons für WooCommerce, mit denen du neue Funktionen einbauen kannst, die nicht integriert sind. Da WooCommerce große Mengen an Bestellungen, Produkten und anderen Daten verarbeiten kann, ist es auch einfach, das Geschäft zu erweitern.
- Community und Support: Es gibt zwar keinen direkten Support, aber WooCommerce hat eine große Gemeinschaft von aktiven Entwicklern und Nutzern, und das Internet ist voll von Foren und Tutorials, in denen du Lösungen finden kannst.
- Zahlungen, Versand und Steuern: Wähle aus Hunderten von Zahlungsanbietern und binde den Versanddienstleister deiner Wahl ein. Du kannst sogar Steuern auf Basis von Zonen einrichten.
- Analytische Daten: Nur wenige E-Commerce-Plattformen können mit den umfangreichen Berichten und Analysen von WooCommerce mithalten. Verfolge die Leistung deines Shops über das ganze Jahr hinweg und analysiere alles, von Kundenaktionen bis hin zu den täglichen Einnahmen.
Insgesamt bietet WooCommerce eine breite Palette von Funktionen, die es zum beliebtesten E-Commerce-Plugin für WordPress machen. Dennoch gibt es auch andere E-Commerce-Plugins, die wir empfehlen, bevor du dich ganz auf WooCommerce festlegst.
Wofür wird Elementor verwendet?
Mit Elementor kannst du das Design jeder WordPress-Website ganz einfach steuern. Es lässt sich sehr gut mit WooCommerce integrieren. Auf diese Weise kannst du Elemente deines WooCommerce-Ladens anpassen, für die es normalerweise keine Bearbeitungsmöglichkeiten gibt.
Elementor hilft dir zum Beispiel beim Anpassen:
- Der WooCommerce Shop-Seite
- Von Produktseiten
- Der Seiten Kasse und Warenkorb
- Der Seite Mein Konto
- Der Shop-Seite
Elementor bietet ein Drag-and-Drop-Bearbeitungserlebnis und damit eine visuelle Designoberfläche, die in erster Linie mit der Computermaus bedient wird und nicht mit Computercode oder fortgeschrittenen Entwicklungseinstellungen.
Der Drag-and-Drop-Editor ermöglicht nicht nur die Anpassung der oben genannten Seiten, sondern gibt dir auch mehr Kontrolle über das Design jedes Teils deiner Website.
Du kannst zum Beispiel die Startseite anpassen oder eine „Coming Soon“-Seite in Sekundenschnelle hinzufügen – dank der Seiten- und Bereichsvorlagen, die mit Elementor geliefert werden.
Insgesamt bietet Elementor:
- Einen Drag-and-Drop-Builder mit WooCommerce-Blöcken
- Vorgefertigte Vorlagen für den E-Commerce
- Ein spezielles WooCommerce-Builder-Tool mit Widgets und Funktionen speziell für E-Commerce-Elemente
- Fortschrittliches Styling für jeden Block, jeden Abschnitt und jede Seite, die mit WooCommerce erstellt werden
Weil Elementor so einfach mit WooCommerce zu verwenden ist, wird das Plugin von Entwicklern und Website-Betreibern auf der ganzen Welt genutzt, um hochgradig individuelle Online-Shops zu erstellen.
Funktioniert WooCommerce mit Elementor?
Ja, Elementor ist so konzipiert, dass es mit dem WooCommerce-Plugin zusammenarbeitet.
Elementor wird sogar als ein Produkt verkauft, das:
- Weniger Plugins für WooCommerce benötigt werden
- Die Konversionsrate erhöht (mit vorgefertigten, optimierten WooCommerce-Abschnitten und -Themes)
- Die Entwicklung von Onlineshops visualisiert, ohne dass du Code schreiben musst
Elementor wird auch mit verschiedenen WooCommerce-Widgets geliefert.
Hier ist eine Liste mit einigen WooCommerce Elementor Widgets:
- Produkt-Meta
- Kurzbeschreibung
- Produkt-Breadcrumbs
- Mein Konto
- Warenkorb
- Menü Warenkorb
- Produktbestand
- In den Warenkorb legen
- Produktbewertung
- Viele mehr
Mit Elementor kannst du Bereiche deines WooCommerce-Shops anpassen, die du vorher nicht bearbeiten konntest. Mit Elementor kannst du die Kasse, die Kaufübersicht, die Seite „Mein Konto“, die Produktseiten, den Warenkorb und vieles mehr bearbeiten.
Zusammen mit den vollständigen WooCommerce-Website-Kits und der Ein-Seiten-Einrichtungsfunktion für WooCommerce kann man sagen, dass WooCommerce und Elementor sehr gut zusammenarbeiten.
Warum solltest du Elementor für WooCommerce-Websites verwenden?
Es ist völlig in Ordnung, WooCommerce ohne Elementor zu verwenden. Es ist immer noch eine leistungsstarke E-Commerce-Plattform für die große Mehrheit der Unternehmen. Allerdings wirst du feststellen, dass die Anpassungsmöglichkeiten ohne Elementor begrenzt sind und du mehr Zeit mit der Entwicklung deiner Website verbringen wirst.
Hier sind die wichtigsten Gründe für die Verwendung von Elementor mit WooCommerce:
Verbessertes visuelles Design
WordPress verfügt über den Gutenberg Page Builder, aber Elementor erweitert diese Funktionalität mit einer größeren Anzahl von Blöcken und vorgefertigten Abschnitten.
Anpassung von nicht editierbaren WooCommerce-Seiten
Von der Seite „Warenkorb“ bis zur Seite „Mein Konto“ kannst du mit Elementor verschiedene WooCommerce-Seiten anpassen, die normalerweise gesperrt sind. Außerdem kannst du fast jeden Aspekt der Produktseiten anpassen.
Conversion-Orientierte Designs
Alle Elementor-Elemente sind responsive und viele der WooCommerce-Widgets und -Blöcke wurden speziell für die Steigerung des Umsatzes entwickelt, z. B. Preistabellen, Testimonials und Countdown-Timer.
Nahtlose Integration mit WooCommerce
Elementor arbeitet perfekt mit WooCommerce zusammen, was ein großes Ökosystem an WooCommerce-kompatiblen Themes und Addons eröffnet, die speziell für die Seitenerstellung mit Elementor entwickelt wurden.
Zeitsparend und kosteneffizient
Die vorgefertigten Vorlagen, Blöcke und Abschnitte von Elementor machen individuelle Programmierung und mühsame manuelle Konfiguration überflüssig. Es dauert nur ein paar Minuten, um professionell aussehende E-Commerce-Seiten zu erstellen. Das spart potenzielle Entwicklungskosten und Zeit für den Aufbau deines Shops.
Angesichts dieser Vorteile empfehlen wir, beim Aufbau einer Website mit WooCommerce immer Elementor (oder einen anderen Page Builder, der dir gefällt) zu verwenden.
Wie erstelle ich eine E-Commerce-Website mit Elementor und WooCommerce?
Elementor und WooCommerce sind die beste Kombination von Tools für die Erstellung einer E-Commerce-Website mit WordPress. In diesem Leitfaden erklären wir alle Schritte, die für die Erstellung eines Onlineshops mit diesen beiden Tools erforderlich sind.
1. Installiere WooCommerce und Elementor
Um zu beginnen, brauchst du:
- WordPress
- Hosting (vorzugsweise eine leistungsstarke, verwaltete Hosting-Lösung wie Kinsta)
Installiere WordPress auf deinem Hoster. Kinsta bietet eine Ein-Klick-Installation für WordPress.
Wenn diese Elemente vorhanden sind, installiere das WooCommerce-Plugin. Kinsta-Hosting-Nutzer haben den Vorteil, dass WooCommerce automatisch installiert wird, wenn sie ein Konto anlegen.
Andernfalls fügst du das kostenlose WooCommerce-Plugin zu deiner WordPress-Website hinzu.
Du kannst auch lernen, wie du WooCommerce auf deiner Website mit möglichst wenig Aufwand einrichtest. Achte darauf, dass du WooCommerce aktivierst und die Konfigurationsschritte durchgehst.
Danach siehst du in WordPress eine Registerkarte für WooCommerce und Links zum Hinzufügen von Produkten, Einrichten von Zahlungen, Hinzufügen von Steuersätzen und vielem mehr.
Der letzte Teil dieses Schritts besteht darin, den Elementor Page Builder zu installieren und zu aktivieren. Entweder installierst du die kostenlose Version von Elementor oder du gehst die Schritte zum Kauf und Download von Elementor Pro durch.
2. Füge ein WooCommerce-Elementor-Theme hinzu
WooCommerce ist mit der überwiegenden Mehrheit der WordPress-Themes kompatibel. Das Gleiche gilt für Elementor. Am besten wählst du jedoch ein Mehrzweck-Theme (mit dem du jede Art von Website erstellen kannst) oder ein E-Commerce-Theme. Auf diese Weise bist du nicht auf ein Blogging-Theme angewiesen, wenn du einen vollwertigen Online-Shop aufbauen willst.
Weiter unten in diesem Artikel findest du unsere Empfehlungen für die besten WooCommerce-Elementor-Themes, mit denen du loslegen kannst. Du kannst auch online nach WooCommerce Elementor Themes suchen.
Sobald du das perfekte Theme für deine Bedürfnisse gefunden hast, installiere es auf deiner WordPress-Website.
3. Erstelle eine WooCommerce Startseite
Standardmäßig wird für einen WooCommerce-Shop keine Startseite erstellt, so dass du sie von Grund auf neu erstellen musst. Um diesen Prozess zu beschleunigen, kannst du automatisch eine Startseite erstellen, indem du in WordPress zu WooCommerce > Home gehst. Klicke auf Benutzerdefinierte Startseite erstellen und passe sie an deine Bedürfnisse an.
Dies fügt eine Startseiten-Titelseite zur Anpassung hinzu.
Gehe schließlich zu Erscheinungsbild > Anpassen und wähle Startseiten-Einstellungen. Wähle Eine statische Seite unter Deine Startseite wird angezeigt. Wähle Startseite unter dem Dropdown-Menü Homepage.
Damit wird diese Seite zu deiner globalen Startseite und du kannst sie mit Elementor oder dem WordPress Theme Customizer anpassen.
Das Design deiner Startseite (und der gesamten Website im Allgemeinen) hängt von dem gewählten Theme ab. Das Astra-Theme bietet zum Beispiel Startvorlagen, mit denen du in Sekundenschnelle einen schönen Onlineshop erstellen kannst. Diese findest du unter Erscheinungsbild > Starter-Vorlagen (wenn du Astra verwendest).
Wir empfehlen dir auch, den Theme Builder von Elementor auszuprobieren. Gehe dazu zu Templates > Theme Builder.
Wähle die Option Einzelne Seite und klicke auf Neu hinzufügen. Verwende die Registerkarten Seiten und Blöcke, um schnell eine professionelle Startseite oder eine andere Seite auf deiner Website zu gestalten.
4. Produkte zu WooCommerce hinzufügen
Um ein Produkt zu WooCommerce hinzuzufügen, gehst du auf Produkte > Neu hinzufügen. Du hast auch die Möglichkeit, mehrere Produkte mit einer CSV-Datei zu importieren.
Gib alles ein, vom Produktnamen über die Produktbeschreibung und den Preis bis hin zur Produktkategorie. Klicke auf die Schaltfläche Veröffentlichen, wenn du mit dem Produkt fertig bist.
Deine Produktliste ist immer unter Produkte > Alle Produkte in WordPress verfügbar.
5. Versand, Zahlungsgateways und Steuern konfigurieren
Bevor du Käufe von Kunden akzeptierst, musst du wichtige Einstellungen wie Zahlungsabwicklung, Versand und Steuerregeln vornehmen.
Du findest sie alle im Bereich WooCommerce > Einstellungen in WordPress.
Für den Versand gehst du auf die Registerkarte Versand. Klicke auf Versandzone hinzufügen. Damit kannst du bestimmte Versandtarife auf der Grundlage geografischer Zonen festlegen.
Alternativ kannst du zum Ende der Seite scrollen, um die WooCommerce-Versanderweiterung zu konfigurieren, die druckbare USPS- und DHL-Etiketten bietet.
Es gibt noch viele weitere WooCommerce-Versand-Add-ons und -Erweiterungen für verschiedene Regionen, Versandunternehmen und die Versandverwaltung.
Um die Zahlungsabwicklung einzurichten, gehst du in den WooCommerce-Einstellungen auf die Registerkarte „Zahlungen“. Installiere die WooCommerce-Zahlungen erweiterung, um Zahlungsarten wie Kreditkarten und Apple Pay zu akzeptieren.
Du kannst auch eine andere Zahlungsabwicklung wie Stripe, Alipay oder Klarna in Betracht ziehen. Gehe durch die vorgestellten Schritte, um die Zahlungsabwicklung zu aktivieren, wie z.B. die Eingabe deiner Geschäftsadresse und das Hinzufügen eines Girokontos, um Zahlungen zu empfangen.
Für Steuern gehst du unter WooCommerce auf die Registerkarte Allgemein. Achte darauf, dass du deine Geschäftsadresse eingibst, denn anhand dieser Adresse werden die Steuern und Versandkosten berechnet.
Scrolle zu dem Kästchen Steuern aktivieren und aktiviere es, damit die Steuern beim Bezahlen anhand deiner Adresse berechnet werden.
Dadurch wird in den WooCommerce-Einstellungen eine neue Registerkarte mit dem Namen Steuern angezeigt. Hier kannst du Einstellungen vornehmen, wie z. B. zusätzliche Steuerklassen, Preise, die mit Steuern eingegeben werden, und wie die Steuern berechnet werden sollen.
Ähnlich wie beim Versand gibt es auch für WooCommerce mehrere Steuererweiterungen, die du für erweiterte Funktionen aktivieren kannst.
6. Einrichten einer Shop-Seite in WooCommerce mit Elementor
Standardmäßig erstellt WooCommerce eine Shop-Seite für dich. Diese findest du, indem du in WordPress auf die Registerkarte Seiten gehst.
Klicke auf Mit Elementor bearbeiten. Es gibt auch eine Schaltfläche Template Kits von Elementor, mit der du schnell ein schönes Design für deine Shop-Seite erstellen kannst.
Verwende Elementor, um den Stil und die Formatierung der Shop-Seite zu bearbeiten, und erwäge, ein Vorlagen-Kit einzufügen, um den Prozess zu beschleunigen.
Sobald du fertig bist, hast du eine Shop-Seite mit einer Präsentation deiner Produkte, Filterwerkzeugen und einer Suchleiste.
7. Stilvolle Produktsammlungen mit Elementor anzeigen
Um eine Produktsammlung zu erstellen, die auf deiner Startseite oder als separate Kategorieseite angezeigt wird, empfehlen wir dir, den Elementor Theme Builder zu verwenden oder ein einfaches Widget zu einer bestehenden Seite hinzuzufügen.
Wähle im Theme Builder die Option Produktarchiv und wähle dann eines der Layouts für Produktsammlungen aus und speichere es.
Du kannst diese Vorlagen einer Seite deiner Wahl zuweisen oder eine ganz neue Seite erstellen.
Du kannst aber auch eine bereits erstellte Seite in Elementor öffnen und das Produkte-Widget zu einem beliebigen Abschnitt hinzufügen, um eine ansprechende Sammlung deiner Produkte zu erstellen.
Anschließend kannst du in Elementor die Anzahl der Spalten und Zeilen sowie den gesamten Stil des Widgets anpassen.
8. Anpassen von Produktseiten mit Elementor
Produktseiten werden in Elementor ähnlich wie jede andere Seite verwaltet.
Eine Möglichkeit ist, jedes Produkt in deinem Bestand zu öffnen und auf die Schaltfläche Mit Elementor bearbeiten zu klicken.
Wenn du eine detailliertere Kontrolle haben und ein professionelles Design hinzufügen möchtest, gehe in WordPress zu Vorlagen > Theme Builder. Wähle die Registerkarte Einzelprodukt und klicke auf Neu hinzufügen.
Du kannst dich für Blöcke oder Seiten entscheiden, die speziell für WooCommerce-Produktseiten entworfen wurden.
Dies verbindet dich mit der Elementor Vorlagenbibliothek. Danach kannst du jeden der Produktseitenblöcke oder Seitenvorlagen global oder in einzelne Produktseiten einfügen.
9. Anpassen der WooCommerce-Kasse und des Warenkorbs mit Elementor
In den nächsten Abschnitten geht es um die Anpassung der wichtigsten E-Commerce-Seiten, die von WooCommerce automatisch erstellt werden.
Standardmäßig haben diese Seiten (wie Kasse, Warenkorb und Mein Konto) nur begrenzte Bearbeitungsmöglichkeiten. Mit Elementor hast du jedoch die volle Kontrolle über die Formatierung, den Stil und das Gesamtbild jeder Seite.
Um die Seiten „Kasse“ und „Warenkorb“ zu bearbeiten, gehst du in WordPress auf Seiten. Scrolle über die gewünschte Seite und klicke auf Mit Elementor bearbeiten.
Elementor Pro bietet Ersatz-Widgets, mit denen du den Standard-Warenkorb/Checkout von WooCommerce komplett ersetzen kannst.
Finde das Cart-Widget unter WooCommerce und füge es zu deinem Design hinzu. Anschließend kannst du den Standard-Warenkorb von WooCommerce löschen.
Anschließend kannst du den Inhalt, den Stil und die erweiterten Einstellungen für den Warenkorb in Elementor bearbeiten. Auf der Warenkorb-Seite kannst du zum Beispiel die Farben und Schriftarten anpassen, damit sie besser zu deiner Marke passen.
Es ist auch möglich, Widgets für zusätzlichen Text, empfohlene Produkte oder Medien hinzuzufügen, während die Kunden ihren Warenkorb betrachten. Es gibt sogar Werkzeuge, um Gutscheine, Summen und die Bestellübersicht zu bearbeiten.
Die Bearbeitung des Kassenbereichs ist ähnlich: Du öffnest die Kassenseite in Elementor und ziehst das Elementor Checkout Widget in den Editor. Das ersetzt das Standard-Kassenmodul von WooCommerce, solange du das alte Modul löschst.
Wenn du das Checkout-Widget eingefügt und ausgewählt hast, bietet es Registerkarten für Inhalt, Stil und erweiterte Einstellungen.
Damit kannst du Elemente wie den Abschnitt Deine Bestellung, die Details für wiederkehrende Kunden und die Zahlungsinformationen anpassen. Du kannst die Farben, Stile, Größen und vieles mehr ändern.
10. Anpassen der Seite „Mein Konto“ mit WooCommerce und Elementor
Um die Standard-Seite Mein Konto von WooCommerce anzupassen, öffne Seiten in WordPress. Klicke auf Bearbeiten mit Elementor, nachdem du über die Seite Mein Konto gescrollt hast.
Lösche das alte Mein Konto Modul und füge die Elementor-Version als Widget unter WooCommerce hinzu.
Dadurch erhältst du Inhaltseinstellungen für Tabs und zusätzliche Optionen, sowie Stil- und erweiterte Einstellungen.
Du könntest z. B. den Rahmentyp oder die Farbe auf der Seite Mein Konto ändern, um sie markengerechter zu gestalten.
Und so erstellst du einen Onlineshop mit der WooCommerce Elementor Integration!
Als Nächstes haben wir die besten Elementor WooCommerce Themes und Addons, die dir bei der Gestaltung helfen.
die 11 besten Elementor WooCommerce Themes für 2024
Bei der Suche nach WooCommerce-Elementor-Themes solltest du dich auf Themes konzentrieren, die:
- Unterstützung sowohl für WooCommerce als auch für Elementor
- Ein responsives Design
- Schnelle Seitenladezeiten
- Kompatibilität mit allen gängigen Browsern
- Die wichtigsten E-Commerce-Funktionen, die du brauchst (du kannst die Lücken mit Elementor und WooCommerce füllen)
- Ein Design, das zu deiner Marke passt
- Eine übersichtliche Oberfläche
- Hohe Bewertungen und hochwertiger Kundensupport/Dokumentation
Du kannst dir unsere bevorzugten WooCommerce-Themes ansehen, um zu sehen, ob eines davon für deine Marke geeignet ist. Du solltest jedoch prüfen, ob diese Themes Elementor tatsächlich unterstützen.
Auf der anderen Seite könntest du dich für die absolut schnellsten WooCommerce-Themes entscheiden, bei denen die Geschwindigkeit an erster Stelle steht. Die gute Nachricht ist, dass die große Mehrheit der Themes sowohl mit WooCommerce als auch mit Elementor funktioniert.
Wir haben eine Liste der besten Elementor-Themes, von denen einige hervorragend für WooCommerce geeignet sind, aber nicht alle sind für Online-Shops geeignet.
Wir haben viele Jahre lang über WooCommerce-Themes recherchiert und sind bei den besten WooCommerce-Elementor-Themes gelandet:
1. Astra
Astra bietet eine nahtlose Integration mit WooCommerce – und zusammen mit Elementor funktioniert es als Mehrzweck-Theme für den Aufbau jeder Art von Website, einschließlich E-Commerce-Shops.
Es verfügt über ein leichtgewichtiges, schnelles Fundament, leistungsstarke Anpassungsoptionen und einige der benutzerfreundlichsten Funktionen zur Bearbeitung von Schriftarten, Kopf- und Fußzeilen.
2. Hello Elementor (mit dem Elementor WooCommerce Builder)
Hello Elementor ist das offizielle Theme von Elementor. Das Theme hat ein schlichtes, einfaches Design ohne Schnickschnack, mit dem du im Grunde jede Art von Website erstellen kannst.
Wir empfehlen, es mit dem Elementor WooCommerce Builder zu kombinieren, um saubere und moderne WooCommerce-Websites zu erstellen, die zu den schnellsten überhaupt gehören.
3. OceanWP
Als Mehrzweck-WordPress-Theme verfügt OceanWP über eine WooCommerce-Integration und direkte Unterstützung für den Elementor Page Builder.
Für dieses leichte und schnelle WordPress-Theme erhältst du hochwertigen Kundensupport, regelmäßige Updates und eine umfangreiche Dokumentation.
Es lässt sich in hohem Maße anpassen, um das Erscheinungsbild deiner E-Commerce-Marke zu verbessern. Mit schnellen Einstellungen kannst du alles bearbeiten, von Farben über Schriftarten und Layouts bis hin zu Headern.
4. Shopkeeper
Shopkeeper ist kein Mehrzweck-Theme, sondern richtet sich direkt an E-Commerce-Shopbetreiber. Ein Großteil der Infrastruktur für E-Commerce-Seiten, die wir gewohnt sind, ist bereits eingebaut und einsatzbereit.
Es gibt vorgefertigte Vorlagen für bestimmte E-Commerce-Kategorien und eine tiefe WooCommerce-Integration. Elementor arbeitet ebenfalls gut mit dem Theme zusammen und ermöglicht es dir, Layouts anzupassen, den Warenkorb zu bearbeiten und so gut wie jede Facette deines Onlineshops individuell zu gestalten.
5. Zakra
Das Zakra-Theme bietet Starter-Demos, um den Prozess der Shop-Erstellung zu beschleunigen. Es lässt sich mit Elementor und WooCommerce integrieren und bietet Nischendemos, die du mit einem Klick implementieren kannst.
Es gilt als eines der schnellsten Mehrzweck-Themes auf dem Markt und du hast die Kontrolle über Farbschemata, Schriftarten und Layoutvarianten.
6. Storefront
Storefront ist vielleicht eines der vielseitigsten kostenlosen E-Commerce-Themes, das du wählen kannst, denn es enthält bereits von Haus aus eine Vielzahl von Onlineshop-Funktionen.
Das Theme wurde von denselben Leuten entwickelt, die auch für WooCommerce zuständig sind, sodass du sicher sein kannst, dass es reibungslos mit dem E-Commerce-Plugin funktioniert. Es funktioniert auch gut mit Elementor und bietet eine Einfachheit, die du bei anderen E-Commerce-Themes nicht findest.
7. ShopIsle Pro
Das ShopIsle Pro-Theme ist eine Premium-Lösung mit fortschrittlicher Typografie, vorgefertigten E-Commerce-Demos und einer tiefen Integration mit Elementor und WooCommerce.
In Kombination mit dem Elementor WooCommerce Builder kannst du ein elegantes Design für jeden Onlineshop erstellen, Schriftarten und Kopfzeilen anpassen und innerhalb weniger Minuten einen Onlineshop eröffnen. Darüber hinaus erhältst du einen ausgezeichneten Kundensupport und eine Themendokumentation.
8. Neve
Das Neve-Theme bietet Mehrzweckfunktionen mit einer schnellen und schlanken Oberfläche. Mit Elementor kannst du eine Website für jede Branche erstellen, insbesondere für den E-Commerce.
Das Theme hilft dir dabei, eine Schnellansicht der Produkte hinzuzufügen, ebenso wie Warenkorb-Hinweise und Off-Canvas-Shop-Filter. Wir mögen es auch für die Anpassung von WooCommerce-Warenkorb-Layouts oder für die Einrichtung eines Sticky Cart.
Das Neve-Theme wird mit einer Vielzahl von Startseiten geliefert, die speziell für E-Commerce-Läden entwickelt wurden.
9. Anpassen
Die Idee hinter dem Customify-Theme ist es, praktisch jede Art von Website, Blog oder Onlineshop zu erstellen, da es umfangreiche Anpassungsmöglichkeiten für Stile, Schriftarten und Widgetbereiche bietet.
Mit der WooCommerce-Elementor-Integration kannst du auch ohne Programmierkenntnisse Produkte präsentieren und die gesamte Kaufabwicklung bearbeiten.
10. GeneratePress
Das GeneratePress WordPress-Theme ist eine Mehrzwecklösung mit Unterstützung für WooCommerce und Elementor. Sein Hauptvorteil gegenüber anderen Themes ist seine Leichtigkeit, aber auch sein modularer Aufbau.
So kannst du Module je nach Bedarf aktivieren und deaktivieren und den Live-Customizer nutzen, um die Designanforderungen deiner Marke optimal zu steuern.
11. Phlox
Das WordPress-Theme Phlox ist ein weiteres Mehrzweck-Theme, das Entwicklern von WooCommerce und Elementor ein starkes Website-Erlebnis bietet.
Alle Ein-Klick-Demos lassen sich direkt in das Design einfügen und sorgen für ein modernes Erscheinungsbild, ohne dass du viel Arbeit damit hast. Außerdem kannst du die meisten Aspekte eines Onlineshops anpassen, vom Warenkorb bis hin zur Darstellung der Produkte auf einem mobilen Gerät.
Wir empfehlen dir, diese Themes zu erkunden und sie in WooCommerce und Elementor auszuprobieren. Wenn du dich entscheidest, möchtest du vielleicht die volle Kontrolle haben, was bedeutet, dass ein Mehrzweck-Theme das Richtige für dich ist.
Andere Nutzerinnen und Nutzer hingegen möchten, dass ihr Theme von Anfang an wie eine E-Commerce-Website aussieht und funktioniert. In diesem Fall solltest du dich für ein Theme wie Storefront oder ShopIsle Pro entscheiden, das mehr auf E-Commerce ausgerichtet ist.
Du kannst dir auch die WooCommerce-Addons für Elementor ansehen, um die Anzahl der Widgets und Funktionen in Elementor zu erweitern. Schau sie dir unten an.
Die 5 besten WooCommerce-Addons für Elementor
Es gibt einige wichtige WooCommerce-Plugins, die du von Anfang an in deinen Shop einbauen solltest. Wir empfehlen dir jedoch, noch spezifischere Add-ons und Plug-ins zu suchen, die nicht nur mit WooCommerce integriert werden können, sondern auch die Funktionen von Elementor erweitern.
Hier sind unsere Lieblings-Add-ons für WooCommerce Elementor:
1. HappyAddons
Das HappyAddons-Plugin ist eine Sammlung von Widgets und Add-ons, die speziell für Elementor entwickelt wurden. Einige Beispiele für Widgets aus HappyAddons sind ein Mega-Menü, eine One-Page-Navigation, ein WooCommerce-Warenkorb und ein Blogpost-Kit.
Einige WooCommerce-spezifische Widgets sind für Produktkarussells, Raster, Kassen und Mini-Warenkörbe. Es gibt sogar Widgets, mit denen du andere Bereiche deines Onlineshops verbessern kannst, z. B. Blogbeiträge, Diagramme, Marketing und soziale Medien.
2. PowerPack für Elementor
Das PowerPack für Elementor bietet eine breite Palette einzigartiger Widgets für WooCommerce-Websites, die Elementor verwenden. Mit über 70 Elementor-Widgets kannst du Breadcrumbs, Testimonials, Buttons und vieles mehr einbinden.
Es gibt eine Vorlagenbibliothek, mit der du sofort Designs hinzufügen kannst, und spezielle WooCommerce-Widgets für die Seite „Mein Konto“, den Styler für die Kassenseite und die Schaltfläche „In den Warenkorb“.
3. WooLentor
WooLentor ist ein Addon für den Elementor Page Builder. Es verbessert den WooCommerce Page Builder und bietet Funktionen für E-Mail-Anpassungen.
Das Add-on enthält einen Checkout-Feldmanager und Optionen, um Teilzahlungen von Kunden zu akzeptieren. Es gibt sogar eine Option, mit der Kunden Preisvorschläge machen können oder mit der du ein spezielles Tagesangebot herausgeben kannst.
4. Essential Addons für Elementor
Die Essential Addons Lösung hat eine kostenlose und eine Premium-Version. Dieses Addon verbessert die Seitenerstellung in Elementor mit Widgets für Preistabellen, Produktraster, Handlungsaufforderungen und mehr.
Zu den Premium-Elementen gehören eine erweiterte Google-Karte, ein Instagram-Feed und Parallax-Designs.
5. JetWooBuilder
JetWooBuilder ist ein WooCommerce-Elementor-Addon von Crocoblock, einem weiteren Elementor-Addon, das sich lohnt, näher betrachtet zu werden. Mit der JetWooBuilder-Option kannst du Elemente wie benutzerdefinierte Vorlagen, Layout-Switcher und shopspezifische Seiten mischen und anpassen.
Du kannst ganz einfach Karussell-Typen und Kategoriekarten konfigurieren und auch einzelne Produktseiten aus einer schlanken Vorlage erstellen.
Am wichtigsten ist vielleicht, dass du mit dem JetWooBuilder-Addon die absolute Kontrolle über deine Shop-Seite hast und erweiterte Smart-Filter konfigurieren kannst.
Wann sollte man Elementor Pro vs. Elementor in Betracht ziehen?
Du fragst dich vielleicht: „Was ist der Unterschied zwischen Elementor und Elementor Pro?“
Glücklicherweise ist die kostenlose Version von Elementor ziemlich leistungsfähig und enthält die meisten Funktionen, die du brauchst, um eine Website oder einen Online-Shop mit Drag-and-Drop-Funktionalität zu erstellen. Allerdings verbessern sich die WooCommerce-Tools drastisch, wenn du auf Elementor Pro umsteigst.
Werfen wir zunächst einen Blick auf den Preisunterschied zwischen Elementor und Elementor Pro:
- Elementor: Kostenlos
- Elementor Pro: Beginnt bei $59 pro Jahr. Andere Pläne sind $99, $199 und $399 pro Jahr
Upgrades dienen in der Regel dazu, zusätzliche Websites mit demselben Elementor-Abonnement zu unterstützen, nicht um mehr Funktionen zu erhalten.
Der Sprung von Elementor zu Elementor Pro bietet jedoch neue Funktionen.
Elementor (Kostenlos) bietet:
- Grundlegende Anpassungen im Theme Builder
- Begrenzte Vorlagen und Blöcke
- Exportieren und Importieren von Vorlagen
- Mobile Bearbeitung
- 40+ Designelemente wie Testimonials, Buttons, Icon-Boxen, Texteditoren und mehr
Das bekommst du mit Elementor Pro (was bei Elementor Basic nicht enthalten ist):
- Anpassung jedes Teils deines Themes
- Formular-Design und -Integration
- Alle professionellen Blöcke und Vorlagen
- Alle professionellen Widgets
- Ein Popup-Builder
- Scrolling-Effekte
- Header- und Footer-Builder
- Über 30 weitere Widgets und Designelemente wie Blockzitate, Blog-Paginierung, Countdown und Masonry-Layout
- WooCommerce-spezifische Designelemente wie WC Categories, WC Products und WC Add To Cart
Wann ist ein Upgrade von Elementor auf Elementor Pro sinnvoll?
Die Antwort auf diese Frage ist einfach. Upgrade auf Elementor Pro:
- Wenn du die meisten Funktionen des WooCommerce Builders nutzen möchtest, z. B. die Bearbeitung und Vorlagen für den Bereich „In den Warenkorb“, Kategorien und Produkte
- Wenn du die vollständige Kontrolle über die Anpassung deines Onlineshops haben möchtest
- Wenn du zusätzliche Elemente wie einen Ken-Burns-Effekt, ein Login-Widget oder eine Flipbox verwenden möchtest
WooCommerce-Nutzer sollten unbedingt irgendwann auf die Pro-Version von Elementor upgraden, um die beste Erfahrung zu machen.
Zusammenfassung
In diesem Artikel haben wir hervorgehoben, welche Funktionen WooCommerce und Elementor auszeichnen und wie sie sich gegenseitig verbessern, wenn sie kombiniert werden. Außerdem haben wir dir Schritt für Schritt erklärt, wie du mit der WooCommerce-Elementor-Integration einen E-Commerce-Shop erstellen kannst.
Vergiss dabei nicht, dir unsere Liste der besten Elementor-Addons und -Themes anzuschauen. Auf diese Weise hast du einen Vorsprung gegenüber denjenigen, die ihre Shops von Grund auf neu gestalten.
Vergiss nicht, dass du für jeden E-Commerce-Betrieb eine schnelle und sichere Hosting-Lösung wie Kinsta wählen solltest. Kinsta bietet auch Elementor-Hosting an, das von den C2-Maschinen der Google Cloud unterstützt wird, um die bestmögliche Leistung zu erzielen.
Was möchtest du noch über WooCommerce und Elementor erfahren? Lass es uns in den Kommentaren unten wissen.
Schreibe einen Kommentar