Funktion und Design für schlaue Skalierung kombiniert
Einen erfolgreichen Online-Shop zu erstellen, muss heute weder kompliziert noch zeitaufwendig sein. Mit WooCommerce und Elementor hast du zwei leistungsstarke Tools an der Hand, um ohne Programmierkenntnisse einen professionellen, verkaufsstarken Shop aufzubauen. In diesem Artikel zeigen wir dir, wie du Schritt für Schritt deinen eigenen WooCommerce-Shop mit Elementor erstellst – von der ersten Einrichtung bis zum fertigen Design.
Inhaltsverzeichnis
1. WooCommerce und Elementor – Hintergründe
WooCommerce und Elementor als Standard-Szeanrio anwenden
Bei der Erstellung eines WooCommerce Shops mit Elementor gibt es zwei Aspekte zu betrachten:
- WooCommerce bietet die funktionelle Oberfläche für den Shop, also Produkte, Preise, Warenkorb und Checkout etc.
- Während Elementor ausschließlich das Frontend Design steuert.
Die Trennung der beiden Themen ist deshalb so wichtig, da sie die Wartung und Skalierung deiner WordPress Webseite strukturiert und trennt. Die Kombination von Elementor und WooCommerce ist bei WordPress längst ein standardisierter Prozess. Uns ist es daher wichtig, dir einen klaren Ablauf zu schaffen, wie du den Shop systematisch aufbaust, ohne am Ende Logikprobleme mit Design-Lösungen beheben zu wollen.
Analysen zeigen, dass über 2,2 Millionen Elementor Webseiten zusätzlich WooCommerce installiert haben.
Im Umgekehrschluss bedeutet das, dass ein relevanter Teil der WooCommerce‑Shops auch Elementor für das Frontend‑Design verwendet.
Quelle: Elementor Statistics
Welche Rollen übernehmen WooCommerce und Elementor auf deiner Seite?
ist die Basis deiner Webseite und der erste zentrale Baustein für deinen Online-Shop.
ist sozusagen die Rolle als Rückgrat deines Online-Shops: Produkte, Varianten, Lagerbestand, Steuern, Versand und Zahlungen. Elementor greift auf diese Daten zu und entscheidet, wie sie dargestellt werden, nicht was sie tun. Diese Rollenverteilung ist bewusst so gewählt und wird auch von WooCommerce selbst empfohlen.
greift auf diese Daten zu und entscheidet, wie sie dargestellt werden, nicht was sie tun. Diese Rollenverteilung ist bewusst so gewählt und wird auch von WooCommerce selbst empfohlen. Elementor Pro erweitert diese Darstellungsebene durch dynamische Inhalte und Template-Logik, ändert aber nichts an der zugrunde liegenden Shop-Funktion.
Ein sauberer Elementor-Shop ist deshalb immer ein WooCommerce-Shop mit visuellem Layer, nicht umgekehrt.
Studien aus Agenturumfragen zeigen, dass Shops mit klarer Trennung von Logik und Darstellung signifikant weniger technische Schulden aufbauen. Wer versucht, Shop-Logik über Page-Builder-Workarounds abzubilden, erhöht langfristig Wartungsaufwand und Fehleranfälligkeit.
Datenlogik vs. Design: warum diese Trennung entscheidend ist
Produkte, Preise und Bestände sind strukturierte Daten, Design ist dagegen kontextabhängig und austauschbar. Genau deshalb funktioniert WooCommerce unabhängig vom Theme so wunderbar, während Elementor als Page-Builder oder Theme jederzeit austauschbar bleibt. In der Praxis bedeutet das für dich: Du kannst ein komplettes Shop-Design neu aufsetzen, ohne ein einziges Produkt bei WooCommerce anfassen zu müssen. Und gerade das macht die Nutzung von WooCommerce und Elementor so spannend.
Laut Aussagen mehrerer WooCommerce-Core-Contributor ist diese Entkopplung einer der Hauptgründe für die hohe Marktdurchdringung des Systems. Für Redakteure und Shopbetreiber schafft das Sicherheit, weil Design-Entscheidungen keine Geschäftslogik zerstören.
Gleichzeitig ermöglicht Elementor komplexe Layouts, ohne Daten doppelt pflegen zu müssen. Wer diese Trennung ignoriert, baut schnell einen optisch schönen, aber technisch fragilen Shop.
Für wen eignet sich die Kombination aus WooCommerce & Elementor?
Der Ansatz eignet sich besonders für kleine bis mittelgroße Shops , Agenturprojekte und Marken mit hohem Designanspruch. Auch Content-getriebene Shops profitieren, weil Landingpages, Kategorien und Produktseiten visuell konsistent aufgebaut werden können.
Weniger geeignet ist Elementor für extrem große Shops mit tausenden Produkten und hochkomplexer Filterlogik. Performance-Analysen zeigen, dass Page-Builder-Shops bei schlechter Umsetzung schneller an DOM- und Ladezeit-Grenzen stoßen. Für High-Performance-Setups setzen viele Enterprise-Shops deshalb auf Headless- oder stark templatebasierte Lösungen. Elementor ist also kein Allheilmittel, sondern ein Werkzeug für strukturierte, visuell orientierte Shops .
Wenn dein Shop sehr groß ist, ist Elementor möglicherweise nicht so gut dafür geeignet.
Die optimale Alternative schafft dir dann tatsächlich der Gutenbeg Block Editor , da sowohl WooCommerce als auch Gutenberg von Automattic stammen und somit nicht kompatibler sein könnten.
Darüber sparst du dir einen zusätzlichen Page-Builder und von der Struktur so nah an WooCommerce bleibst, wie es nur geht.
2. Planung deines WooCommerce Shops mit Elementor
Bevor du praktisch starten kannst, solltest du mit dem theoretischen Grundgerüst deiner Webseite und deines Online-Shops starten.
Stelle dir die Fragen, welche Unterseiten du benötigst, wie dein Shop strukturiert werden soll und wie das jeweilige Design deiner Seiten umgesetzt werden soll.
Die WooCommerce Shop-Struktur planen
Eine klare Shop-Struktur ist der wichtigste Hebel für Orientierung, Conversion und Wartbarkeit. Deine Webseite sollte logisch aufeinander aufgebaut sein und eine sinnvolle Reihenfolge für den Nutzer besitzen. Je einfacher diese Seitenhierarchie aufgebaut ist, desto schneller finden deine Nutzer ihr Zielprodukt.
Beispiel: Startseite → Shop/Kategorien → Produktseiten → Warenkorb → Checkout
Studien zur Benutzerfreundlichkeit zeigen, dass unnötig tiefe bzw. komplexe Strukturen in einem Shop die Kaufabbrüche um bis zu 15 % erhöhen.
Beachte bei der Planung folgende Aspekte:
- Plane die Produktkategorien deshalb nach Nutzerlogik, nicht nach deiner internen Organisation
- Halte die Anzahl der Kategorien überschaubar. Für komplexere oder große Sortimente ist es schlauer, die Hauptkategorien mit klaren Filtern zu kombinieren, anstatt zu viele Unterkategorien unübersichtlich zu stapeln.
- Wenn du in die Planung deines Shops noch dedizierter einsteigen möchtest, hilft dir das Arbeiten mit Sitemaps oder einfachen Flowcharts. Du kannst so typische Nutzerpfade vorab skizzieren und darauf basierend deine Shop-Struktur erarbeiten.
Das Baymard Institute betont, dass Nutzer vor allem die Hauptnavigation und Kategoriestruktur zum Produktfinden nutzen und dass diese Struktur möglichst eng an der tatsächlichen Nutzersprache ausgerichtet sein sollte.
In den Search- und Best-Practices-Artikeln wird zudem empfohlen, echte Suchanfragen (Search-Logs) zu analysieren, um Synonyme, „Symptom-Suchen“ und häufige Query-Typen zu erkennen und das Sortiment sowie die Filter daran auszurichten
Quelle: Apparel and Accessories Sites | Deconstructing E-Commerce Search UX: The 8 Most Common Search Query Types | 35 Data-Driven E-Commerce Best Practices
Produktarten & Logik definieren
Bei der Definition deiner Produkte geht es für die Webseitenstruktur vor allem um die richtige Kategorisierung, sodass deine Kunden auf einfachem Wege finden, was sie suchen. Die Entscheidung über die zentralen Produktarten bestimmt, wie flexibel und stabil dein Shop später ist.
WooCommerce unterscheidet u. a. einfache Produkte, variable Produkte, digitale Produkte und Kombinationen – jede Variante hat Auswirkungen auf Darstellung, Pflegeaufwand und Performance:
Einfache Produkte: Ein einzelnes Produkt ohne Varianten. Du hast einen Preis und einen Lagerbestand. Bsp: „1x Tasse“ oder „1x Gutschein“.
Variable Produkte: Ein Produkt mit auswählbaren Varianten, z. B. Größe und Farbe. Jede Variante kann einen eigenen Preis, Lagerbestand und sogar ein eigenes Bild haben. Wichtig ist nur: Wenn du sehr viele Varianten baust, kann das die Shop-Performance beeinflussen.
Digitale Produkte: Produkte, die nicht physisch verschickt werden, zum Beispiel als Download (z. B. PDF, Software) oder als „virtuell“ (z. B. Dienstleistung).
Kombinationen (z. B. Bundles): Mehrere Einzelprodukte werden als „Paket“ verkauft. Das kann ein fixes Bundle sein oder ein konfigurierbares Set, bei dem der Kunde Komponenten auswählt (z. B. „Kamera + Objektiv + Tasche“). Bei WooCommerce läuft das oft über Erweiterungen, weil es über die Standard-Produktarten hinausgeht.
Design- & UX-Grundlagen festlegen
Das Design deiner Webseite beginnt nicht mit Elementor, sondern mit einem unverwechselbaren CI und klaren UX-Entscheidungen. Nutzer erwarten konsistente Layouts, klare Call-to-Actions und eine mobile Darstellung ohne Abstriche. Hier gibt es grundsätzlich zwei verschiedene Perspektiven:
- dein CI (Corporate Identity), also dein Unternehmens-Erscheinungsbild
- und Design auf benutzerfreundlicher Ebene
Für beides solltest du dir vorab einen Fahrplan zurechtlegen.
CI-Design (Corporate Identity/Markenidentität) und UX-Design (Nutzererlebnis) sind eng verwandt, unterscheiden sich aber in ihrem Fokus:
- Während das CI-Design deine konsistente visuelle Marke mit Logo, Farben sowie Schrift gestaltet,
- zeigt das UX-Design, das optimierte Gesamterlebnis des Nutzers mit einem Produkt oder einer Dienstleistung.
- Dabei zeigt das visuelle UI-Design (User Interface) einen Teilbereich des UX und beschreibt Funktionalität sowie die Benutzerfreundlichkeit.
Kurz gesagt: Dein CI schafft die Markenpersönlichkeit, UX sorgt für eine einfache, effiziente Benutzererfahrung auf deiner Webseite und die UI ist die ästhetische Oberfläche, die zu deiner Marke passt.
Definiere im Planungsprozess deiner Webseite also früh globale Designregeln wie Farben, Logos, Typografie und Abstände, um visuelle Brüche innerhalb deines CIs zu vermeiden. Elementor erleichtert dir zwar die Umsetzung, ersetzt aber keine inhaltliche Priorisierung:
Was ist das wichtigste Element auf jeder Seite?
Für eine vertiefte Planung empfehlen UX-Expert:innen einfache Wireframes , um Fokus und Blickführung zu testen, bevor Designzeit investiert wird. Wer noch tiefer in die Nutzerperspektive einsteigen möchte, kann Heatmap- oder Nutzerfeedback-Tools verwenden, um Annahmen datenbasiert zu überprüfen.
3. WoCommerce & Elementor installieren und einrichten
Elementor installieren & vorbereiten
Die visuelle Basis deiner Webseite bildet das Theme bzw. der Website-Builder – diese geben dir Layout und Struktur. Für deinen WooCommerce Shop mit Elementor empfehlen wir dir Elementor sowohl als Page-Builder als auch das passende Theme von Elementor zu verwenden. Gemeinsam bilden die beiden Elementor Systeme die perfekte Kompatibilität – je weniger unterschiedliche Systeme du verwendest, desto weniger Störfaktoren erhältst du langfristig.
Preise und Informationen zu Elementor Pro als Page-Builder und dem Theme Hello Elementor kannst du hier nachlesen:
🔮 Elementor Website Builder – der Page-Builder mit viel Design-Freiheit.
💰Preise und weitere Informationen zum Elementor Website-Builder.
Das Elementor Theme und den Site-Builder installierst du wie gewohnt über dein WordPress Dashboard.
Der erste Schritt in der Konfiguration von Elementor ist erst einmal das Upgrade auf die Pro-Version, damit du vollen Zugang zu allen Blöcken und Webseiten-Funktionen erhältst. Und im Grunde kannst du dann direkt mit dem Design deiner Webseite loslegen.
Um den roten Faden von Beginn an auf deiner Webseite zu integrieren, solltest du dich aber bereits jetzt mit der Wahl eines Farbschema und eine Schriftart auseinandersetzen.
Header und Footer mit Elementor anlegen
Nach der allgemeinen Einrichtung von Elementor baust du am besten direkt den Header und den Footer deiner Webseite. Diese geben den Rahmen deiner Webseite und die Navigation deiner Webseite vor.
Weitere Anleitungen und Hilfestellungen für die Anpassungen von Header und Footer bei WordPress findest du in diesen Artikeln:
Um deinen Header und Footer mit Elementor zu gestalten gehst du wie folgt vor:
- Klicke in deinem WordPress Dashboard in der linken Menüleiste auf Elementor und Theme Builder .
- Klicke oben rechts auf Add New und wähle Kopf- oder Fußleiste aus.
- Wähle eine Vorlage oder baue deinen Header und Footer selbst. Wir empfehlen Vorlagen insbesondere für Anfänger und Einsteiger.
In unserem Beispiel wird von Elementor unser vorab angefertigtes Menü direkt im Header platziert. Falls du bis hierhin noch kein Menü angelegt hast, bekommst du von Elementor einen Hinweis und kannst das direkt nachholen.
Das Logo auf der linken Seite kannst du mit dienem austauschen und in der Größe einstellen. Sollte dir noch ein Widget, wie zum Beispiel eine Suchleiste oder der Warenkorb fehlen, kannst du diesen per Drag-and Drop einfach in den Header ziehen.
Gleiches gilt auch für den Footer deiner Seite, hier kannst du bereits vorab angelegte Menüs wählen oder einen schlichten Footer einrichten.
WooCommerce installieren
Die Grundinstallation und Basis-Konfiguration von WooCommerce ist der erste Schritt für deinen Online-Shop. Dazu gehst du wie gewohnt vor, um dein Plugin bei WordPress zu installieren :
- Logge dich in deinem WordPress Dashboard ein und klicke in der linken Menüleiste auf Plugin > Plugin hinzufügen .
- Suche nach „WooCommerce“ und klicke auf installieren > aktivieren .
- WooCommerce erscheint nun als eigene Position in deinem Menü.
Nachdem die Basis installiert ist, beginnst du mit der Grundkonfiguration deines Online-Shops. Starte hierbei am besten mit den allgemeinen Einstellungen, wie zum Beispiel:
- deine Adresse
- Verkaufsländer und Versandorte
- deine Währung
- Gutscheinaktivierung
- Zahlungsoptionen
- Datenschutz-Einstellungen
- Kontoerstellungen und Gastbestellungen
- automatisierte E-Mails (Bestellbestätigung, Stornierung …)
Beginnst du bei der Anpassung deines Shops mit dem Design und nutzt ein Theme/Theme-Erstellung über WooCommerce wird dein aktuelles Webseiten-Design überschrieben. Da wir dieses in unserem Fall mit Elementor bauen wollen, solltest du den Step „Deinen Shop anpassen“ auslassen. Auch ohne vorherige Designanpassungen kannst du im Hintergrund deinen Shop mit Produkten, Zahlungsoptionen, Versand und Gutscheinen anpassen.
Die Einstellung der grundlegenden Informationen wie Standorte und Währung beeinflusst in der Konsequenz Zahlungsoptionen und Steuersätze. Daher ist der nächste Schritt der Konfiguration der Bereich Steuern und Versand. Hier kannst du einstellen, ob du unterschiedliche Steuersätze in verschiedenen Ländern verwenden möchtest, sowie Zonen und Versandmethoden hinterlegen.
Zuletzt kannst du einmal kontrollieren ob zentrale Shop-Seiten wie Warenkorb, Checkout und die Mein-Konto Seite bereits in der Seiten-Übersicht zu finden sind. Meist werden diese Seiten bei der Installation von WooCommerce direkt mitangelegt. Sie sind leer und können von dir später über Elementor entsprechend angepasst werden.
Weitere Unterseiten oder weitere Shop-Seiten findest du und legst sie neu an über den Bereich Seiten in der linken Menü-Leiste deines Dashboards.
Bevor du mit dem Design und der strukturellen Anlegung deines Online-Shops startest, empfehlen wir dir schon mal einige Produkte anzulegen.
Das kannst du einfach im Dashboard in der linken Menüleiste unter Produkte und Neues Produkt hinzufügen. Das vereinfacht dir später die optische Konfiguration von verschiedenen Templates.
- PageSpeed Score
- Core Web Vitals
- Parameter mit Erläuterung
Nach dem Absenden erhältst du das Ergebnis direkt per E-Mail.
Mit dem Absenden dieses Formulars stimmst du unseren Datenschutzbestimmungen zu.
4. Shop-Design mit Elementor umsetzen
In unserem Beispiel gehen wir von der Neugestaltung deiner Webseite aus. Wir gehen Schritt-für-Schritt vor. Das Design deiner Webseite kannst du sowohl selbst, mit Hilfe einer WordPress-Agentur oder sogar mit dem WooCommerce Shop-Builder umsetzen.
Mit Elementor und dem passenden Hello Elementor Theme kannst du aus einer leeren Seite dein komplett eigenes Design zaubern. Mit den Elementor Templates und Vorlagen ist dieser Prozess für Einsteiger viel einfacher umzusetzen.
Wir empfehlen dir dein Webseiten- und Shop-Design nicht über WooCommerce zu bauen, da du damit von WooCommerce abhängig wirst. Deaktivierst du WooCommerce ist das Design deiner gesamten Seite weg.
Sinnvoller ist es, Vorlagen und Templates von Elementor zu integrieren und diese auf dein CI anzupassen.
Verwendung von Templates und Vorlagen
Zu den ersten Schritten deiner Webseite gehört das Erstellen wichtiger Templates, wie zum Beispiel Header, Footer, Menüs und für deinen Shop auch Produktarchive oder Einzelprodukte.
Templates sind dein zentrales Werkzeug, um deinen Shop skalierbar und konsistent aufzubauen.
Ein Template dient als wiederverwendbares Gerüst mit Platzhaltern für Inhalte wie Texte, Bilder oder Layout-Elemente. Diese technische Art einer Schablone spart dir Zeit und sorgt für die Konsistenz in Design und Formatierung. Templates ermöglichen dir dadurch eine schnelle Anpassung ohne Neuentwicklung, fördern Einheitlichkeit und sind SEO-freundlich bei Webdesigns.
Anstatt jedes einzelne Produkt händisch auf einer dafür angelegten Seite zu erstellen, definierst du einmal das Layout deines Templates und lässt es automatisch auf alle passende Inhalte anwenden. Besonders wichtig für deinen WooCommerce Shop sind:
- Einzelprodukt-Templates – sie legen fest, wie eine einzelne Produktseite strukturiert und aufgegabut ist. Dieses kannst du für jedes Produkt anwenden.
- Produkt-Archive – steuern die Darstellung von Shop- und Kategorieseiten und zeigen deinem Besucher eine einheitliche Produktübersicht.
- Header & Footer – ergänzt werden diese Shop-Bestandteile durch Header und Footer, die auf deiner Webseite die Navigation angeben.
Grundsätzlich kannst du aber verschiedenste Templates anlegen, darunter zum Beispiel auch die 404-Fehlerseite die erscheint, wenn ein Inhalt auf deiner Seite einmal nicht erreichbar sein sollte.
Templates bei Elementor anlegen
- Klicke in deinem WordPress Dashboard in der linken Menüleiste auf Elementor. und Theme Builder.
- Hier findest du erst einmal eine Übersicht mit allen Templates, die eventuell schon bestehen.
- Klicke oben rechts auf Add New um ein neues Template anzulegen.
- Klicke auf das Template, dass du benötigst und es öffnet sich eine Übersicht mit Auswahlmöglichkeiten. Wähle eine Grundkonfiguration deiner Wahl und Einfügen .
- Nun kannst du dein Template optisch so gestalten wie du es möchtest.
- Klicke auf Veröffentlichen.
- Vor dem finalen Veröffentlichen kannst du festlegen, auf welchen Seiten dein Template voreingestellt erscheinen soll. Zum Beispiel auf jeder Seite, nur bei bestimmten Unterseiten etc.
- Klicke abschließend auf Speichern & Schließen.
- Und schon ist dein Template fertig erstellt.
Die Startseite gestalten
Die Startseite ist der wichtigste Berührungspunkt für Nutzer und sollte daher als Einstiegspunkt sowohl optisch ansprechend als auch funktional sein. Ein klarer Visueller Fokus auf Produkte, Angebote oder Markenwerte hilft, die erste Aufmerksamkeit zu fesseln. Klar strukturierte Inhalte und eine gute Orientierung stärken das Vertrauen und bieten deinen Nutzern den direkten Einstieg ind den Kaufprozess.
Die Startseite bei WordPress festlegen
Zunächst einmal musst du wissen, dass deine Startseite nicht gleich als Startseite festgelegt ist. Mit der Installation eines neuen WordPress sind eine Seite und die Datenschutzerklärung bereits vorinstalliert. Damit deine Startseite auch zukünftig die Startseite bleibt, legst du sie wie folgt im Customizer fest:
- Klicke im Dashboard auf Design und auf Customizer.
- Es öffnet sich das Frontend mit einem Menü auf der linken Seite.
- Klicke im Menü auf Homepage Einstellungen.
- Wähle eine statische Seite und anschließend die Seite aus, die du als Startseite verwenden möchtest.
- Klicke auf Veröffentlichen um deine Änderungen anzuwenden.
Die Startseite optisch gestalten
Nachdem die kleine technische Stellschraube abgearbeitet ist kannst du deine Startseite anfangen aufzubauen. Folgende Inhalte solltest du unbedingt richtig platzieren:
- Der Mehrwert deines Online-Shops in Titel und Untertitel muss klar herausgearbeitet sein: Was verkauft ihr, für wen ist es gedacht und warum sollte ich es bei dir kaufen.
- Prominente Platzierung eines Call-to-Action-Buttons im Hero Bereich deiner Seite lädt zum Entdecken des Produktes ein.
- Eine klar sichtbare Hauptnavigation mit Kategorien und Suchfunktion im Header vereinfacht die Nutzung deiner Seite.
- Weniger visuell aber wichtig: eine schnelle Ladezeit und ein mobiloptimiertes Layout sorgen für die optimale Benutzererfahrung über jedes Endgerät.
Rund 40 % der Nutzer verlassen Webseiten, wenn das Design nicht professionell aussieht. Ganze 86 % der Nutzer sind eher dazu bereit, Angebote weiter zu erkunden, wenn die Startseite überzeugt.
Formulare mit Trust-Badges erzielten in einer Untersuchung 42 % mehr Conversions als solche ohne. Vertrauenselemente senken Kaufangst und erhöhen insgesamt die Conversion-Rate deutlich.
Statistiken zeigen, dass 33 % der Besucher innerhalb der ersten 15 Sekunden entscheiden, ob sie bleiben oder gehen – dieser Bereich muss also besonders klar und überzeugend sein.
Quelle: 54 E-Commerce Best Practices
- Integriere Vertrauenselemente , wie zum Beispiel ein TÜV-Siegel, unterstützte Zahlungsarten, Hinweise zu Versand und Retouren, Kundenbewertungen, Kontaktdaten oder dein Serviceversprechen
- Markenerkennung: Zeige wer du bist, für was du einstehst, was ist deine Markenstory
- Produktpräsentation: ob Neuheiten oder Bestseller und personalisierte Empfehlungen vermittelm den Nutzer einen Eindruck in das Portfolio deines Online-Shops.
Sei es in Form von besten Verkäufen, Angeboten oder Neuheiten – bieten eine einfache Möglichkeit, Nutzer sofort in die Produktwelt deines Shops zu ziehen. Elementor bietet hier jede Menge Gestaltungsmöglichkeiten, um interaktive und visuell starke Teaser zu erstellen.
Ein gezielt platzierter Call-to-Action (CTA) im Hero Bereich deiner Webseite führt direkt zu einer hohen Interaktionsrate. Oft hilft dir bei Platzierungs-Entscheidungen ein A/B-Test mit verschiedenen Layouts. Achter allerdings auf die mobile Optimierung deines Online-Shops, mehr als 50 % der Shopping-Sessions finden heute auf mobilen Geräten statt.
Shop- und Kategorieseiten erstellen
Für die Shop- und Kategorieseiten ist es entscheidend, eine klare Struktur zu wahren und die Produktauswahl übersichtlich darzustellen. Elementor ermöglicht es dir, ein Produkt-Raster zu erstellen, das nicht nur gut aussieht, sondern auch die Navigation für die Nutzer intuitiv umsetzt.
Um deinen Online Shop professionell umzusetzen solltest du erst einmal sicher gehen, dass du Elementor One (ehemals Elementor Pro) verwendest. Damit hast du alle Tools und Möglichkeiten, um einen High Performance Shop auf die Beine zu stellen.
Um zum Beispiel eine Kategorie-Seite für deinen Online-Shop zu erstellen gehst du wie folgt vor:
Kategorien anlegen
- Klicke im WordPress Dashboard in der linken Menüleiste auf Produkte und auf Kategorien.
- Es öffnet sich ein Fenster in dem du deiner neuen Kategorie einen Namen geben kannst.
- Gib alle Informationen an und klicke auf Kategorie hinzufügen.
Hier kannst du auch direkt Ober- und Unterkategorien anlegen, Beschreibungen hinzufügen oder Vorschaubilder hinterlegen. Achte darauf, dass die Gruppierungen wirklich Sinn ergeben und logisch strukturiert sind.
Wenn du bereits einige Produkte angelegt hast, kannst du diese nun auch einer Kategorie zuordnen. Dazu klickst du einfach eines der Produkte an und wählst den passenden Haken der gewünschten Kategorie aus.
Kategorie-Seite mit Elementor aufbauen
Elementor ermöglicht es dir, ein Produkt-Raster zu erstellen, das nicht nur gut aussieht, sondern auch die Navigation für die Nutzer intuitiv macht. Eine gut strukturierte Produktansicht fördert die Klickrate und damit den Umsatz. Die Verwendung von Filter- und Sortiermöglichkeiten ist für eine große Produktauswahl extrem wichtig. Nutzer wollen schnell durch Produktkategorien navigieren und nach bestimmten Kriterien wie Preis, Farbe oder Größe filtern können.
Jetzt kommen wir zum komplexeren Teil. Zunächst begibst du dich auch hier erneut in den Theme Builder von Elementor, denn dazu musst du ein passendes Template anlegen – und zwar das Produktarchiv.
Achte darauf, dass die Produktkategorien auch optisch durch visuelle Hierarchien und klare Bezeichnungen verständlich dargestellt sind. Das macht die Navigation für das Auge direkt sichtbar.
Du kannst einen Block oder Starter Entwurf auswählen oder komplett leer starten, je nachdem, was für dich einfacher ist. Wir haben in unserem Beispiel ein Produkt-Raster vorausgewählt. Dieses integriert nun automatisch dir von dir angelegten Produkte. So kannst du dir das finale Ergebnis optisch besser vorstellen.
Das Design und Layout der Kategorie-Seite kannst du nun mit verschiedenen Blöcken erweitern und ausbauen. Die Ergebnis-Anzeige, sowie die Toolbar zum Sortieren der Produkte gehört hier bereits zum vorausgewählten Raster.
Alternativ zum Raster kannst du hier auch mit dem Loop Grid Block arbeiten, um alle Produkt-Karten freizuschalten bzw. nach deiner Wahl hinzuzufügen. Beim Loop Grid musst du allerdings alles selbst erstellen: Bild, Titel, Preis, Warenkorb-Button etc. Das bietet dir individuellere Möglichkeiten, ist aber auch deutlich mehr Arbeit.
Die Bedingungen festlegen
Das entscheidende am Kategorie-Archiv ist das Festlegen der Bedingungen. Wenn du deine Seite und das Design so erstellt hast, wie es dir gefällt, klicke auf Veröffentlichen.
Hier fragt dich Elementor jetzt nach den Konditionen, also wo deine Template überall erscheinen soll:
Wähle aus:
- Ob du das Template auf einer Seite einschließen oder von gewissen Seiten ausschließen möchtest.
- Wähle die Seiten bzw. die Kategorien, auf der dein Archiv sichtbar sein soll. Wähle in unserem Fall Produkt-Kategorie .
- Gib die Kategorie an, in der du deine Produkte führen möchtest.
- Klicke Speichern & Schließen.
Produktdetailseiten gestalten
Die einzelne Produktseite bzw die Produktansicht ist ein zentraler Punkt für die Kaufentscheidung deiner Kunden. Produktbilder, eine gut strukturierte Galerie und wichtige Informationen zu deinem Produkt müssen den Käufer auf visueller und inhaltlicher Ebene überzeugen.
Hierbei entscheidet eine hohe Bildqualität sowie eine klare Darstellung der Produktmerkmale sind wichtig, um Vertrauen zu dir und deinem Shop zu schaffen.
Laut einer Adobe Umfrage neigen 67 % der Käufer dazu, ein Produkt zu kaufen, wenn die Produktbilder von hoher Qualität sind. Preisangaben, Varianten und Call-to-Action-Buttons (CTA) sind auf der Produktseite unverzichtbar – achte darauf, dass diese Elemente auffällig, aber nicht aufdringlich sind.
Quelle: Adobe Studie 20218
Zentrale Aspekte für die Gestaltung der Produktseiten sind:
Hochwertige Produktbilder (mind. 1200x1200px, mehrere Winkel, Zoom-Funktion aktivieren).
Detaillierte Beschreibungen mit Bullet-Points, Vorteilen, Merkmalen (kurze obere Zusammenfassung).
Klare Preis angaben inkl. MwSt., Rabatte und Versandkosten.
Auffällige CTA-Buttons (z. B. „In den Warenkorb“) mit einer guten Kontrastfarbe.
Bewertungen, ähnliche Produktvorschläge und Trust-Signale.
Mobile-Optimierung und schnelle Ladezeiten mit Hilfe von Bildkomprimierungen.
Produktseite erstellen und einrichten
Dein Produkt hast du bereits bei WooCommerce angelegt. Jetzt geht es an die Umsetzung der Produktseite bei Elementor. Dazu gehst du wie folgt vor:
- Gehe erneut in den Elementor Theme-Builder.
- Wähle Einzelprodukt und Neu hinzufügen.
- Entscheide dich für eine Produkt-Vorlage oder gestalte deine Seite komplett selbst.
- Wir haben in unserem Beispiel eine Vorlage gewählt, die du vollständig anpassen kannst.
Es erscheint nur ein Produkt aus deinem Portfolio auf der Seite. Die gesamte Darstellung kannst du anpassen und verändern, wie es dir gefällt. Wenn du dein Produkt bei WooCommerce schon vollumfänglich angelegt hast, ist es leichter die Optik der Seite anzupassen, da du hier schon Texte und Produktbeschreibungen siehst.
- Klicke anschließend auf Veröffentlichen.
- Wähle die Bedingungen aus.
- Wenn das Template für alle deine Produkte angewendet werden soll, wähle „Produkte „.
- Speichern und Schließen und schon ist deine Produktseite fertig.
- Teste auf deiner Seite, ob das Template richtig dargestellt wird.
Warenkorb und Checkout
Im Warenkorb bzw. im Checkout entscheidet sich, ob der Kunde den Kauf abschließt. Dieser sollter daher technisch einwandfrei funktionieren und so benutzerfreundlich wie möglich sein.
Elementor bietet dir viele Anapssungs- und Gestaltungsmöglichkeiten, aber es gibt auch Hindernisse.
Warenkorb
Der Warenkorb und der Checkout werden von WooCommerce bei der Installation automatisch angelegt – und zwar über Gutenberg. Das kann in erster Instanz zu Problemen mit Elementor führen, wenn du die Bereiche nicht mit Gutenberg bearbeiten willst.
❌ Das Problem:
Der automatisch konfigurierte Warenkorb von WooCommerce wurde uns im Elementor optisch nicht angezeigt und konnte daher auch nicht bearbeitet werden.
💡Die Lösung:
- Die Warenkorb-Seite enthält noch den WooCommerce-Shortcode [woocommerce_cart]. Entferne diesen aus deinem Code über den Text-Editor. Somit entfernst du die Vorlage von WooCommerce.
- Der einfachste Weg überhaupt: Entferne im Elementor den Block, in dem der WooCommerce Warenkorb hinterlegt, aber nicht angezeigt wird. Einfach über Rechtsklick und Löschen. So hast du die alte Konfiguration entfernt und kannst einen neuen über das Warenkorb Widget von Elementor anlegen.
Den Warenkorb mit Elementor bearbeiten
Um den Warenkorb im Elementor zu bearbeiten, gehst du wie folgt vor:
- Gehe in deinem WordPress Dashboard auf Seiten > Warenkorb > Mit Elementor bearbeiten .
- Es öffnet sich jetzt dein Elementor, in dem du vielleicht den vorinstallierten WooCommerce Warenkorb nicht angezeigt bekommst.
- Lösche den „ergrauten“ Block, um den WooCommerce Warenkorb zu entfernen.
- Öffne die linke Widget Leiste und ziehe unter WooCommerce das Widget „Warenkorb“ auf deine leere Seite.
- Bearbeite deine Warenkorb-Anzeige, wie es dir gefällt.
- Über das Augensymbol links neben dem Veröffentlichen-Button, kannst du dir deine Aktualisierungen auf der Live-Webseite anschauen.
- Klicke auf Veröffentlichen , wenn dein Warenkorb finalisiert ist.
Experten empfehlen, den Checkout-Prozess so kurz wie möglich zu halten und Unnötige Schritte zu eliminieren – jeder Klick erhöht die Wahrscheinlichkeit eines Kaufabbruchs.
UX-Best Practices besagen, dass ein klarer Überblick über den Bestellvorgang, eine Fortschrittsanzeige und eine einfache Korrektur von Fehlern den Checkout-Prozess verbessern.
Den Warenkorb kannst du über das Widget nur in einem gewissen Maß bearbeiten. Wenn du mehr möchtest, benötigst du weitere Plugins. Das ist von unserer Seite aus aber nicht immer empfehlenswert, da es die Performance deines Online-Shops beeinträchtigen kann.
Zahlungsarten, Versandoptionen und Versandländer solltest du vorab bei WooCommerce einstellen – das machst du aber meist bei der ersten Einstellung direkt mit. Hier geht es erst einmal nur um die Struktur der Seiten.
Checkout
Auch die Checkout bzw. Kassen-Seite ist von dem Darstellungsproblem in Elementor betroffen. Daher gehst du hier genauso vor, wie im Warenkorb. So bearbeitest du deine Checkout-Seite:
- Gehe in deinem WordPress Dashboard auf Seiten > Kasse > Mit Elementor bearbeiten .
- Entferne den Block mit den grauen Ausblendungen über Rechtsklick > Löschen.
- Öffne die Blockleiste und ziehe den Block „Zur Kasse “ auf deine leere Seite.
- Dein Checkout erscheint nun und du kannst ihn so anpassen, wie du es benötigst.
- Lasse dir die Vorschau über das Augensymbol anzeigen.
- Veröffentliche deinen fertigen Kassen-Bereich.
Hast du gewusst, wie viele typische Abbruchgründe es alleine im Checkout-Prozess eines Online-Shops gibt? Wer kennt es nicht: Du fügst etwas hinzu und kurz vor dem Checkout überlegst du es dir anders? Statistisch gesehen, sind das die häufigsten Gründe dafür:
Ein zu langer oder komplizierter Checkout: Mehr als ein Viertel (ca. 26%) aller User brechen deshalb ab.
Erneute Eingabe von Zahlungs- oder Versanddaten: Rund 55 % deiner Kunden brechen ab, wenn sie ihre Kreditkarten- oder Versandinformationen mehr als einmal eingeben müssen.
Die durchschnittliche globale Warenkorbabbruchrate liegt (je nach Studie) bei etwa 70 % – 73 %. Das ist nicht gerade wenig.
Juhu, du hast es bis hierher geschafft und damit die wichtigsten Seiten, Produkte und Kategorien für deinen neuen Online-Shop mit WooCommerce und Elementor angelegt. 🎉 Das Gröbste liegt nun also hinter dir. Wenn du noch Fragen dazu hast oder irgendwo nicht weiterweißt, melde dich gerne bei uns.
5. Best Practices für WooCommerce Shops mit Elementor
Templates und ihre Wiederverwendbarkeit
Einer der größten Vorteile von Elementor ist die Möglichkeit, Templates zu erstellen, die über mehrere Seiten hinweg wiederverwendet werden können. Diese Templates sorgen für konsistentes Design und ermöglichen es dir, deinen Shop schnell zu skalieren, ohne ständig von Null anfangen zu müssen.
- Single Product Templates sind besonders wichtig, um einheitliche Produktseiten zu gestalten, ohne jede Seite manuell bearbeiten zu müssen. Diese Templates stellen sicher, dass alle Produktseiten das gleiche Design und die gleiche Struktur haben, was die Benutzererfahrung optimiert.
- Archive Templates hingegen sorgen für ein konsistentes Layout auf Shop-Seiten oder Kategorieseiten und verhindern, dass du jede Seite einzeln anpassen musst.
- Globale Elemente , wie z.B. Header, Footer oder wiederkehrende Boxen für Sonderangebote, sollten ebenfalls als Template erstellt werden. Diese Elemente können dann auf allen Seiten deines Shops verwendet und bei Bedarf an einer zentralen Stelle angepasst werden.
- Ein häufig übersehener Vorteil von dynamischen Inhalten ist die Möglichkeit, Produktdaten automatisch aus WooCommerce zu ziehen, anstatt sie manuell in jedes Template einzufügen. Elemente wie Produktnamen, Preise oder Varianten werden dann direkt in das Design integriert. Bedingte Anzeigen – also Inhalte, die nur angezeigt werden, wenn bestimmte Kriterien erfüllt sind – ermöglichen es dir, die Produktseiten weiter zu individualisieren, ohne zusätzliche manuelle Eingriffe.
Nutze globale Templates , um deine Shop-Seiten effizient zu gestalten und die Verwaltung zu vereinfachen.
Setze dynamische Felder ein, um Produktdaten automatisch einzubinden und Fehler zu vermeiden.
Achte darauf, dass deine Archive Templates übersichtlich und benutzerfreundlich bleiben, auch bei wachsenden Produktkatalogen.
Erweiterungen & sinnvolle Add-ons
Add-ons können deinen Shop erheblich erweitern und anpassen, aber sie sollten mit Bedacht eingesetzt werden. Sie sind besonders nützlich, wenn Standard-Widgets nicht ausreichen oder du komplexere Filter für die Produktauswahl benötigst.
Add-ons bieten:
- zusätzliche Marketing-Features
- die Integration von Rabattcodes
- Cross-Selling oder Upselling-Optionen
- WooCommerce Product Add-Ons
- WooCommerce Dynamic Pricing
Jedoch birgt der Einsatz von zu vielen Erweiterungen Risiken. Zu viele Plugins können die Performance deines Shops beeinträchtigen, was insbesondere bei einer großen Anzahl an Produkten zu langsamen Ladezeiten führt.
Add-ons können auch die Wartbarkeit deines Online-Shops erschweren, da bei jeder Änderung an einem Plugin Anpassungen vorgenommen werden müssen. Zudem kann es zu Abhängigkeiten von Drittanbietern kommen, die deinen Shop langfristig weniger flexibel machen.
- Setze Add-ons gezielt ein, um Fehlende Funktionalitäten zu ergänzen, aber vermeide eine Überladung mit Plugins.
- Achte darauf, dass performance-relevante Erweiterungen regelmäßig aktualisiert und auf ihre Kompatibilität geprüft werden.
- Testen, testen, testen : Führe nach jeder Erweiterung Performance-Tests durch, um sicherzustellen, dass dein Shop schnell bleibt.
Typische Fehler und ihre Lösungen
Einer der häufigsten Fehler ist die Überlastung des Shops mit zu vielen dynamischen Inhalten. Zu viele bedingte Anzeigen oder komplexe Produktkataloge können die Ladezeiten signifikant verlängern. Eine gute Lösung ist hier, die dynamischen Felder zu optimieren und nur die wirklich notwendigen Daten anzuzeigen.
Ein weiterer Fehler ist das Ignorieren von Responsivität – besonders bei der Erstellung von Templates. Es passiert oft, dass die Desktop-Ansicht perfekt aussieht, während die mobile Ansicht unübersichtlich wird. Best Practice: Baue die Templates zunächst mobil und optimiere sie dann für Desktop.
Fehler bei den Add-ons
Ein häufiges Problem entsteht, wenn zu viele Plugins verwendet werden, die überlappen. Du solltest regelmäßig prüfen, ob Funktionen doppelt vorhanden sind und welche Plugins unnötig sind. Lösung: Verwende nur Add-ons, die wirklich einen Mehrwert bieten und keine redundanten Funktionen haben.
WooCommerce & Elementor dein perfect Match
Ein WooCommerce-Shop mit Elementor verbindet funktionale Shop-Funktionen und kreatives Design. WooCommerce sorgt für die Shop-Basis wie Produktkataloge, Warenkorb und Zahlungen, während Elementor die visuelle Gestaltung übernimmt, ohne dass Programmierkenntnisse erforderlich sind.
Zuerst wird WooCommerce installiert und für grundlegende Shop-Einstellungen wie Steuern, Versand und Produktdarstellung konfiguriert. Elementor kommt dann zum Einsatz, um Startseiten, Produktseiten und Kategorieseiten zu gestalten. Templates helfen, das Design konsistent und einfach anpassbar zu halten. Dynamische Inhalte erleichtern die Darstellung von Produktdaten und sparen Pflegeaufwand.
Erweiterungen wie WooCommerce Product Add-Ons und Elementor Pro erweitern die Funktionalität mit Filtern und Marketing-Tools, aber zu viele Plugins können die Performance beeinträchtigen. Typische Fehler sind die Überlastung mit dynamischen Inhalten und fehlende mobile Optimierung. Eine klare Shop-Hierarchie und durchdachte Templates sorgen für eine bessere Benutzerführung.
Mit der richtigen Planung und den passenden Erweiterungen lässt sich ein skalierbarer und benutzerfreundlicher Shop mit WooCommerce und Elementor erstellen.
