WordPress Training
ElementorWordPress

JetWooBuilder Anleitung: WooCommerce-Seiten mit Elementor

JetWooBuilder Anleitung: WooCommerce-Seiten mit Elementor
Inhaltsverzeichnis (12)

WooCommerce ist ein solides Shopsystem, aber seine Standardseiten sehen so aus, wie das Theme sie vorgibt. Die Produktseite, der Shop, der Warenkorb, die Kasse: Wer daran etwas ändern will, landet schnell bei Theme-Dateien, Hooks und CSS. Für die meisten kleinen Shops ist das keine Option.

JetWooBuilder setzt genau dort an. Das Plugin von Crocoblock bringt eigene Elementor-Widgets für alle wichtigen Shopseiten mit und lässt Sie diese Seiten als Vorlagen gestalten, so wie Sie den Rest Ihrer Website auch bauen.

In dieser Anleitung zeige ich, was JetWooBuilder laut Hersteller kann, wie ich es einrichte und wo die typischen Stolpersteine liegen.

Die kurze Antwort

JetWooBuilder lohnt sich, wenn Sie einen WooCommerce-Shop mit Elementor betreiben und Produktseite, Shopseite, Warenkorb, Kasse oder Kundenkonto gestalterisch an Ihre Marke anpassen wollen. Es funktioniert laut Produktseite mit dem Elementor-Editor.

Wenn Ihnen das Standardlayout Ihres Themes reicht oder Sie gar nicht mit Elementor arbeiten, brauchen Sie es nicht.

Was JetWooBuilder kann

Laut der offiziellen Produktseite deckt JetWooBuilder diese Bereiche ab:

Bereich Was das konkret heißt
Einzelproduktseite Eigene Vorlage mit regulärem Preis, Aktionspreis, Lagerstatus, Warenkorb-Button, Produkt-Metadaten und Produkt-Tabs
Produktbilder Beitragsbild je Produkt, drei Galerie-Layouts für die weiteren Bilder
Ähnliche Produkte Verwandte, empfohlene, hervorgehobene und neueste Produkte, Cross-Selling
Shopseite und Kataloge Produktliste und Produktraster, Kategorie-Raster mit zehn Vorlagen, Taxonomie-Kacheln, eigener Produkt-Loop
Layout-Umschalter Besucher wechseln zwischen Listen- und Rasteransicht
Navigation im Katalog Ergebnisanzahl, Produktnavigation, Seitennummerierung
Kasse Mehrstufige oder einseitige Kasse, Bestellübersicht, Formulare für Rechnung, Versand und Zahlung, Gutscheinfeld
Warenkorb Alle Elemente gestaltbar, Produktvorschläge für Up-Selling, Text für den leeren Warenkorb, Summenanzeige, „Zurück zum Shop“-Button
Danke-Seite Bestell- und Adressdaten nach dem Kauf
Kundenkonto Menü und Übersicht, Login- und Registrierungsformular, „Angemeldet bleiben“, offene und abgeschlossene Bestellungen, Downloads
Weiteres Eigene Produkthinweise, Sortierung nach mehreren Kriterien, Bewertungsformular, gestaltbare Sternebewertung, Hover-Effekte für Produktbilder

Dazu kommen globale Widgets wie Categories Grid, Products Grid, Products List und Taxonomy Tiles, die Sie auf jeder Elementor-Seite einsetzen können, etwa auf der Startseite.

JetWooBuilder einrichten: Vorlagen für Produktseite, Shop und Kasse in Elementor

Schritt für Schritt: JetWooBuilder einrichten

Voraussetzung: WordPress, WooCommerce und Elementor sind installiert, und Sie haben schon ein paar Produkte mit Bildern und Preisen angelegt. Ohne echte Produkte sieht man in der Vorschau wenig.

  1. Plugin installieren und Lizenz aktivieren. Laden Sie JetWooBuilder aus Ihrem Crocoblock-Konto herunter, installieren Sie es unter Plugins → Installieren → Plugin hochladen und aktivieren Sie es. Den Lizenzschlüssel tragen Sie im WordPress-Menü Crocoblock ein, damit Updates ankommen.
  2. Einstellungen prüfen. Unter Crocoblock → JetPlugins Settings finden Sie die Optionen von JetWooBuilder. Hier legen Sie später fest, welche Ihrer Vorlagen für welche Shopseite gilt.
  3. Erste Vorlage anlegen: die Produktseite. Erstellen Sie im Vorlagenbereich von JetWooBuilder eine neue Vorlage vom Typ Einzelprodukt und öffnen Sie sie in Elementor. Ich fange fast immer hier an, weil die Produktseite am meisten verkauft.
  4. Layout bauen. Ziehen Sie die Einzelprodukt-Widgets in die Vorlage: Produktbilder links, rechts Titel, Preis, Lagerstatus und Warenkorb-Button, darunter die Produkt-Tabs und ähnliche Produkte. Gestalten Sie Schriften und Farben über Ihre globalen Elementor-Vorgaben, nicht pro Widget.
  5. Vorlage zuweisen. Speichern Sie, wechseln Sie zurück in die JetWooBuilder-Einstellungen und wählen Sie Ihre neue Vorlage als Standard für Einzelprodukte aus.
  6. Ergebnis prüfen. Öffnen Sie ein echtes Produkt im Frontend, am besten in einem privaten Browserfenster, damit kein Cache dazwischenfunkt. Prüfen Sie auch die mobile Ansicht und ein Produkt mit Varianten.
  7. Nächste Seiten. Erst wenn die Produktseite sitzt, folgen Shopseite, Warenkorb, Kasse und Kundenkonto nach demselben Muster: Vorlage anlegen, Widgets platzieren, zuweisen, testen.

Bei der Kasse rate ich zu Zurückhaltung. Testen Sie jede Änderung mit einer echten Testbestellung, inklusive Zahlungsart und E-Mail-Bestätigung.

Drei Praxisbeispiele

Hofladen mit Onlineshop. Ein Direktvermarkter aus dem Mostviertel verkauft Säfte und Geschenkkörbe. Mit JetWooBuilder bekommt die Produktseite einen klaren Aufbau mit großem Bild, Preis und Lagerstatus. Darunter stehen passende Produkte für den Geschenkkorb.

Fachhändler mit großem Sortiment. Ein Werkzeughändler mit mehreren hundert Artikeln nutzt das Kategorie-Raster auf der Startseite und den Layout-Umschalter im Shop. Kunden, die Details vergleichen, wechseln in die Listenansicht.

Kleine Marke mit Kundenkonto. Ein Label für Naturkosmetik möchte, dass das Kundenkonto aussieht wie der Rest der Website. Login, Bestellübersicht und Downloads werden als eigene Vorlage gestaltet statt im nackten Standardlook.

Typische Fehler und wie Sie sie vermeiden

Alle Seiten auf einmal umbauen. Wer Produktseite, Shop, Warenkorb und Kasse gleichzeitig angreift, findet Fehler später kaum noch. Eine Seite nach der anderen, jeweils mit Test.

Theme und Plugin streiten um die Shopseiten. Manche Themes bringen eigene WooCommerce-Layouts mit. Arbeiten Sie mit einem schlanken Theme wie Hello und prüfen Sie, ob das Theme die Shopseiten noch selbst überschreibt.

Caching auf Warenkorb und Kasse. Diese Seiten müssen vom Seiten-Cache ausgenommen sein. Die meisten Caching-Plugins erkennen WooCommerce, aber kontrollieren Sie es nach dem Umbau trotzdem.

Zu viele Jet-Plugins auf Verdacht aktiv. Jedes aktive Plugin lädt Code. Aktivieren Sie nur, was Sie wirklich nutzen.

Kasse ohne Testbestellung live geschaltet. Eine schöne Kasse, die eine Zahlungsart verschluckt, kostet mehr Umsatz als jede hässliche.

Lohnt sich JetWooBuilder? Kosten und Alternativen

Laut Produktseite kostet JetWooBuilder als Einzellizenz 55 US-Dollar pro Jahr für eine Website, zeitweise zeigt Crocoblock dort einen reduzierten Aktionspreis. Enthalten sind ein Jahr Updates und Support. Alternativ gibt es das Paket All-Inclusive Plus mit allen 23 JetPlugins für 249 US-Dollar pro Jahr. Crocoblock nennt eine 30-tägige Geld-zurück-Garantie. (Preisstand Oktober 2026 — bitte vor dem Kauf prüfen.)

Meine Faustregel: Brauchen Sie nur die Shopseiten, reicht die Einzellizenz. Wenn Produktfilter, Galerie, Merkliste und Suche dazukommen, rechnen Sie das Crocoblock-Paket gegen die Summe der Einzellizenzen.

Die Alternativen sind ehrlich gesagt gut. Elementor Pro bringt selbst einen Theme Builder mit WooCommerce-Widgets mit, der für viele Shops reicht. Viele Shop-Themes haben ordentliche Produktseiten an Bord. Und wer mit dem Block-Editor arbeitet, kann WooCommerce-Seiten inzwischen auch mit Blöcken anpassen. JetWooBuilder spielt seine Stärke dort aus, wo Sie mehr Kontrolle über Kasse, Warenkorb und Kundenkonto brauchen und sowieso mit Crocoblock arbeiten. JetWooBuilder bei Crocoblock ansehen

Einen Überblick, wie die Plugins zusammenspielen, gibt meine Übersicht der Crocoblock-Plugins. Für Filter im Shop ist JetSmartFilters der naheliegende Partner.

Häufige Fragen

Brauche ich für JetWooBuilder Elementor Pro?

Die Produktseite nennt den Elementor-Editor als Voraussetzung, nicht Elementor Pro. Ob Sie Pro zusätzlich brauchen, hängt davon ab, was Sie außerhalb des Shops bauen, etwa Header und Footer.

Funktioniert JetWooBuilder mit Gutenberg oder Bricks?

Auf der Produktseite ist nur der Elementor-Editor als unterstützter Builder ausgewiesen. Wenn Sie mit einem anderen Editor arbeiten, ist JetWooBuilder nicht das passende Werkzeug.

Kann ich die WooCommerce-Kasse damit mehrstufig machen?

Ja, laut Hersteller lassen sich mehrstufige und einseitige Kassen umsetzen. Testen Sie jede Variante mit echten Zahlungsarten, bevor Sie sie freischalten.

Gehen meine Produktdaten verloren, wenn ich JetWooBuilder deaktiviere?

Nein. Produkte, Preise und Bestellungen liegen in WooCommerce. Weg ist nur das Layout, die Shopseiten fallen dann auf die Darstellung Ihres Themes zurück.

Hilfe beim Einrichten

Wenn Sie JetWooBuilder nicht allein einrichten möchten: In meiner Elementor-Schulung richte ich es mit Ihnen gemeinsam an Ihrer eigenen Website ein, remote, € 109,– pro Stunde. Geht es eher um den Shop selbst, also Versand, Steuern und Zahlungsarten, ist die WooCommerce-Schulung der bessere Einstieg.

Newsletter

WordPress-Wissen per E-Mail

Neue Anleitungen und Praxistipps zu WordPress, Elementor und WooCommerce. Kein Spam, Abmeldung jederzeit.

Sie bekommen zuerst eine Mail zur Bestätigung. Details in der Datenschutzerklärung.

Tags

CrocoblockElementorJetWooBuilderWordPress