Elementor und WooCommerce bilden zusammen eine der flexibelsten Kombinationen zum Erstellen von benutzerdefinierten Online-Shops auf WordPress. Während WooCommerce die E-Commerce-Funktionalität (Produkte, Warenkorb, Kasse, Zahlungen) übernimmt, gibt Ihnen Elementor die visuelle Kontrolle darüber, wie diese Shop-Seiten aussehen und funktionieren. In diesem Leitfaden gehen wir durch den Aufbau wichtiger WooCommerce-Seiten mit Elementor, einschließlich Produktseiten, Shop-Archiven und der Warenkorb-Erfahrung.
Dieses Tutorial setzt voraus, dass Sie WordPress, WooCommerce und Elementor Pro installiert haben. Elementor Pro ist erforderlich für WooCommerce-Widgets – die kostenlose Version von Elementor enthält diese nicht.
Was Sie Vor Dem Starten Benötigen
| Anforderung | Warum Es Benötigt Wird | Wo Man Es Bekommen Kann |
|---|---|---|
| WordPress 6.x+ | Core CMS-Plattform | wordpress.org |
| WooCommerce (kostenlos) | E-Commerce-Funktionalität | WordPress-Plugin-Verzeichnis |
| Elementor Pro | WooCommerce-Widgets und Theme Builder | PluginTheme.net |
| Kompatibles Theme | Basis für Ihren Shop | Theme-Auswahlleitfaden |
| Beispielprodukte | Inhalt zum Entwerfen von Vorlagen | WooCommerce → Werkzeuge → Beispiel-Daten importieren |
Verstehen des WooCommerce Builders von Elementor
Elementor Pro enthält einen speziellen WooCommerce Builder innerhalb seines Theme Builder-Systems. Damit können Sie benutzerdefinierte Vorlagen für Folgendes erstellen:
- Einzelne Produktseite: Steuern Sie das Layout einzelner Produktseiten
- Produktarchiv: Passen Sie die Shop-Seite und Kategorieseiten an
- Warenkorbseite: Gestalten Sie ein benutzerdefiniertes Warenkorb-Layout
- Kassen-Seite: Passen Sie das Layout des Kassenformulars an
- Mein Konto-Seite: Gestalten Sie das Dashboard des Kundenkontos neu
Jede Vorlage verwendet WooCommerce-spezifische Widgets, die dynamische Daten aus Ihren Produkten abrufen. Das bedeutet, dass Sie das Layout einmal gestalten und es automatisch auf alle Produkte (oder spezifische Kategorien) angewendet wird.
Erstellen einer benutzerdefinierten Produktseite
Schritt 1: Erstellen Sie die Vorlage
- Navigieren Sie zu Vorlagen → Theme Builder in Ihrem WordPress-Admin
- Klicken Sie auf "Neu hinzufügen" und wählen Sie "Einzelnes Produkt" als Vorlagentyp
- Wählen Sie eine vorgefertigte Produktseitenvorlage oder beginnen Sie mit einer leeren Leinwand
- Der Elementor-Editor öffnet sich mit WooCommerce-Widgets, die im Panel verfügbar sind
Schritt 2: Fügen Sie WooCommerce-Widgets hinzu
Wichtige WooCommerce-Widgets für Produktseiten:
| Widget | Was Es Anzeigt | Anpassungsoptionen |
|---|---|---|
| Produktbilder | Galerie mit Miniaturansichten und Lightbox | Galerie-Layout, Miniaturansichtsposition, Zoom-Umschalter |
| Produktname | Produktname (H1) | Typografie, Farbe, Ausrichtung |
| Produktpreis | Regulärer und Aktionspreis | Typografie, Farbe des Aktionsschildes, Layout |
| Produktbewertung | Sternebewertung aus Bewertungen | Sternfarbe, Größe, Ausrichtung |
| In den Warenkorb | Mengenauswahl + In den Warenkorb-Button | Button-Stil, Farben, Mengenlayout |
| Produktkurzbeschreibung | Kurze Produktzusammenfassung | Typografie, Abstände |
| Produkt-Meta | SKU, Kategorien, Tags | Layout, Typografie, Trennzeichen |
| Produktdaten-Registerkarten | Beschreibung, Bewertungen, zusätzliche Informationen | Tab-Stil, Rand, Abstände |
| Ähnliche Produkte | Produkte aus derselben Kategorie | Spalten, Anzahl, Reihenfolge |
| Upsells | Manuell verlinkte Upsell-Produkte |
Schritt 3: Layout-Best Practices
Eine hochkonvertierende Produktseite folgt einem getesteten Layout-Muster:
- Über der Falz: Produktbilder (links, 50-60% Breite) + Titel, Preis, Bewertung, kurze Beschreibung und Warenkorb-Button (rechts, 40-50% Breite)
- Unter der Falz: Produktdaten-Tabs (vollständige Beschreibung, Spezifikationen, Bewertungen)
- Unterer Bereich: Verwandte Produkte und Upsells in einem Raster (3-4 Spalten)
- Vertrauensmerkmale: Versandinformationen, Rückgabebedingungen, Sicherheitsabzeichen in der Nähe des Warenkorb-Buttons
Halten Sie den Warenkorb-Button sowohl auf Desktop- als auch auf Mobilgeräten sichtbar, ohne scrollen zu müssen. Verwenden Sie kontrastierende Farben für den Button, um Aufmerksamkeit zu erregen.
Anpassen der Shop-Seite (Produktarchiv)
Schritt 1: Erstellen Sie eine Archivvorlage
- Gehen Sie zu Vorlagen → Theme Builder → Produktarchiv
- Fügen Sie eine neue Vorlage hinzu und wählen Sie "Produktarchiv" als Typ aus
- Weisen Sie Anzeigebedingungen zu (alle Archive, spezifische Kategorien oder Tag-Seiten)
Schritt 2: Konfigurieren Sie das Produktgitter
Das Archivprodukte-Widget zeigt Ihre Produktauflistung mit diesen Optionen an:
- Spalten: 2-6 Spalten (3-4 funktionieren gut für die meisten Shops)
- Produkte pro Seite: 12-24 ist der Standard für die Benutzererfahrung
- Paginierung: Nummerierte Seiten, "mehr laden"-Button oder unendliches Scrollen
- Sortierdropdown: Ermöglichen Sie Kunden, nach Preis, Beliebtheit oder Bewertung zu sortieren
- Verkaufsschild: Passen Sie die Position, Farbe und den Text des Verkaufsschilds an
Für Shops mit vielen Produkten fügen Sie eine Kategoriefilterung über dem Gitter hinzu. Sie können das Menü-Widget von Elementor oder ein Produktfilter-Plugin wie JetWooBuilder für erweiterte Filteroptionen verwenden.
Gestaltung der Warenkorbseite
Elementor Pro ermöglicht es Ihnen, das Layout der Warenkorbseite anzupassen. Eine gute Warenkorbseite sollte:
- Produktbilder, Namen, Preise und Mengen in einer übersichtlichen Tabelle anzeigen
- Den laufenden Gesamtbetrag deutlich anzeigen
- Eine Schaltfläche "Einkauf fortsetzen" enthalten, die zur Shop-Seite zurückführt
- Ein Versandkostenrechner anzeigen, damit Kunden die Lieferkosten schätzen können
- Cross-Sell-Produkte unter der Warenkorbtabelle anzeigen
Das Elementor-Warenkorb-Widget ersetzt das Standard-WooCommerce-Warenkorb-Layout durch einen visuellen Editor, in dem Sie jedes Element gestalten können—Tabellenränder, Buttonfarben, Typografie und Abstände.
Anpassen der Checkout-Seite
Die Checkout-Seite hat direkten Einfluss auf Ihre Konversionsrate. Das Checkout-Widget von Elementor Pro bietet Kontrolle über:
- Formularlayout: Einspaltiges oder zweispaltiges Rechnungs-/Versandformular
- Position der Bestellübersicht: Nebeneinander mit dem Formular oder darüber/darunter
- Button-Styling: Farbe, Größe und Text des Bestellen-Buttons
- Zahlungsbereich: Radio-Button- oder Tab-Layout für Zahlungsmethoden
- Vertrauensabzeichen: Sicherheitsicons und Garantie-Text in der Nähe des Zahlungsformulars hinzufügen
Für Tipps zur Optimierung der Checkout-Konversion sehen Sie sich unseren Leitfaden zur Optimierung des WooCommerce-Checkouts an.
Leistungsüberlegungen
Elementor fügt Ihren Seiten CSS und JavaScript hinzu. Für einen WooCommerce-Shop ist die Leistung direkt mit Konversionen verbunden. Behalten Sie diese Tipps im Hinterkopf:
- Verwenden Sie Flexbox-Container anstelle von Abschnitten/Spalten für weniger DOM-Elemente
- Optimieren Sie Produktbilder: Verwenden Sie das WebP-Format, richtige Abmessungen und Lazy Loading. Siehe unseren Leitfaden zur Bildoptimierung
- Widget-Anzahl begrenzen: Jedes Widget fügt Markup hinzu; verwenden Sie nur das, was Sie benötigen
- Aktivieren Sie die Leistungsmerkmale von Elementor: Verbesserte Asset-Ladung, Verbesserte CSS-Ladung
- Verwenden Sie ein Caching-Plugin: WP Rocket funktioniert gut mit Elementor WooCommerce-Setups
Wichtige Addons für Elementor WooCommerce
Diese Elementor-Addons erweitern die WooCommerce-Bau-Funktionen:
| Addon | Wichtige WooCommerce-Funktionen |
|---|---|
| JetWooBuilder | Erweiterte Produktgitter, benutzerdefinierte Archivvorlagen, Layouts für einzelne Produkte mit bedingter Logik |
| Essential Addons Pro | Produktgitter, Produktkarussell, WooCommerce-Checkout |
| Happy Elementor Addons | Produktkategorie-Gitter, Mini-Warenkorb, Produktkarussell |
Häufig gestellte Fragen
Benötige ich Elementor Pro für WooCommerce oder funktioniert die kostenlose Version?
Elementor Pro ist erforderlich für WooCommerce-spezifische Widgets (Produktbilder, In den Warenkorb, Produktdaten-Tabs, Warenkorb, Checkout usw.). Die kostenlose Version von Elementor enthält diese Widgets nicht. Sie können die kostenlose Version verwenden, um reguläre Seiten zu gestalten, aber benutzerdefinierte WooCommerce-Vorlagen erfordern Elementor Pro.
Kann ich Elementor für die Checkout-Seite verwenden?
Ja. Elementor Pro enthält ein Checkout-Widget, das das standardmäßige WooCommerce-Checkout-Layout ersetzt. Sie können die Formularfelder, die Bestellübersicht, den Zahlungsbereich und das gesamte Layout anpassen. Seien Sie jedoch vorsichtig mit umfangreichen Anpassungen, die die Integrationen von Zahlungsanbietern beeinträchtigen könnten – testen Sie immer den gesamten Kaufprozess nach Änderungen.
Wie erstelle ich unterschiedliche Produktseitenlayouts für verschiedene Kategorien?
Im Theme Builder von Elementor können Sie Anzeige-Bedingungen für jede Vorlage zuweisen. Erstellen Sie eine Produktseitenvorlage für Kleidung (mit Größen-/Farbwählern), eine andere für digitale Produkte (ohne Versandinformationen) usw. Jede Vorlage gilt nur für Produkte in den angegebenen Kategorien.
Verlangsamt Elementor WooCommerce?
Elementor fügt jeder Seite CSS- und JavaScript-Overhead hinzu. Auf Produktseiten mit vielen Widgets kann dies die Ladezeiten um 0,5-1,5 Sekunden im Vergleich zu den standardmäßigen WooCommerce-Vorlagen erhöhen. Die Verwendung der integrierten Leistungsmerkmale von Elementor, die Optimierung von Bildern und die Verwendung eines Caching-Plugins helfen, diese Auswirkungen zu mildern. Für leistungsoptimierte Shops sollten Sie ein leichteres Theme wie GeneratePress in Betracht ziehen.
Kann ich Elementor WooCommerce-Vorlagen mit jedem Theme verwenden?
Die meisten Elementor WooCommerce-Vorlagen funktionieren mit jedem Theme, das WooCommerce unterstützt. Einige Themes können jedoch ihre eigenen Produktseiten-Stile haben, die mit Elementor-Vorlagen in Konflikt stehen. Themes wie Astra, GeneratePress und OceanWP sind so konzipiert, dass sie nahtlos mit Elementor arbeiten und die sauberste Leinwand für benutzerdefinierte Vorlagen bieten.
Holen Sie sich Elementor Pro für den WooCommerce-Shop-Bau
Zugriff auf alle WooCommerce-Widgets, Theme Builder und 100+ Pro-Vorlagen. Erstellen Sie benutzerdefinierte Produktseiten, Shop-Archive und Checkout-Layouts visuell.
Durchsuchen Sie Elementor Pro →
