3D-Konfigurator für WordPress — in deiner Website, nicht daneben.
Du hast eine WordPress-Website und möchtest, dass Kunden dein Produkt in 3D zusammenstellen: Maße, Farben, Materialien, Zubehör — mit Live-Preis und direkter Anfrage oder Bestellung. Hier steht ausführlich, wie das technisch in WordPress sitzt, wie deine Redaktion es pflegt, was es kostet und wann es sich nicht lohnt.
Ein 3D-Konfigurator für WordPress ist eine interaktive Three.js-Anwendung, die direkt in eine WordPress-Seite eingebunden wird — als Shortcode, Gutenberg-Block oder Elementor-Widget. Optionen, Preise und Texte werden im WordPress-Backend gepflegt, die fertige Konfiguration landet als Anfrage im Postfach oder als Bestellung in WooCommerce.
Warum der Konfigurator in WordPress gehört.
Viele Konfiguratoren laufen auf einer eigenen Plattform: Der Kunde klickt auf „Jetzt konfigurieren“, landet auf einer fremden Domain mit anderem Design, und nach der Konfiguration muss er mühsam zurückfinden. Für Google ist diese Seite nicht Teil deiner Website, und für den Kunden wirkt der Bruch, als würde er an einen Dienstleister weitergereicht.
Sitzt der Konfigurator direkt in WordPress, bleibt alles an einem Ort: dasselbe Menü, dieselbe Schrift, dieselbe Domain, derselbe Warenkorb. Texte rund um den Konfigurator — Produktbeschreibung, FAQ, Referenzen — pflegst du wie jede andere Seite. Und der Traffic, den der Konfigurator erzeugt, zahlt auf deine Domain ein.
Dazu kommt ein praktischer Grund: Die meisten mittelständischen Unternehmen in Deutschland haben bereits eine WordPress-Website mit funktionierenden Formularen, Tracking, Cookie-Banner und Rechtstexten. Ein Konfigurator, der diese Infrastruktur nutzt, muss nichts davon neu erfinden.
Drei Wege, einen 3D-Konfigurator in WordPress einzubinden.
Es gibt nicht die eine richtige Methode. Welche passt, hängt davon ab, wie eng der Konfigurator mit WordPress verzahnt sein soll und wer ihn später pflegt.
1. Shortcode oder Gutenberg-Block
Der Konfigurator wird als kleines Plugin geliefert. Auf jeder beliebigen Seite setzt du einen Block oder einen Shortcode wie [konfigurator produkt="carport"], und an dieser Stelle erscheint die 3D-Szene. Skripte werden nur auf Seiten geladen, die den Konfigurator tatsächlich enthalten. Das ist für die meisten Projekte der beste Weg: sauber, updatesicher und vom Theme unabhängig. Wie ein eigener Block aufgebaut ist, zeigt der Ratgeber Gutenberg-Block für 3D.
2. Elementor-Widget
Arbeitet deine Website mit Elementor, kann der Konfigurator als eigenes Widget erscheinen — mit Einstellungen in der gewohnten Seitenleiste, etwa für Höhe, Startansicht oder Produkt. Das HTML-Widget funktioniert für einfache Fälle auch, stößt aber schnell an Grenzen. Details dazu im Ratgeber 3D in Elementor einbinden.
3. Eigenständige App, eingebettet
Bei sehr großen Anwendungen — etwa einem kompletten Hallen- oder Anlagenplaner — kann es sinnvoll sein, die App separat zu bauen und in WordPress einzubetten. Der Nachteil: Die Verbindung zu Warenkorb, Formularen und Benutzerkonten muss über Schnittstellen hergestellt werden, und iframes sind für Suchmaschinen und Barrierefreiheit schwieriger.
| Shortcode / Block | Elementor-Widget | Eingebettete App | |
|---|---|---|---|
| Verzahnung mit WP | Eng | Eng | Über Schnittstellen |
| Pflege durch Redaktion | Sehr gut | Sehr gut | Eingeschränkt |
| WooCommerce-Warenkorb | Direkt | Direkt | Aufwendiger |
| Theme-Wechsel | Unkritisch | Elementor nötig | Unkritisch |
| Geeignet für | Die meisten Projekte | Elementor-Websites | Sehr große Planer-Apps |
Fertiges Plugin oder individuelle Entwicklung?
Für WordPress gibt es Plugins und Software-Dienste, mit denen sich Produktkonfiguratoren zusammenklicken lassen. Das ist für manche Fälle genau richtig — und ich sage dir das auch, wenn es bei dir so ist.
Ein fertiges Werkzeug passt gut, wenn dein Produkt aus austauschbaren Einzelteilen besteht, die sich als fertige Modelle kombinieren lassen, und wenn eine monatliche Gebühr in Ordnung ist. Individuelle Entwicklung lohnt sich, wenn sich das Produkt in Maßen verändert (ein Schrank, der 1,20 oder 2,35 Meter breit sein kann), wenn Regeln gelten (bestimmte Optionen schließen andere aus), wenn es eine besondere Darstellung braucht (Explosionsansicht, Tag-Nacht-Wechsel) oder wenn du keine laufenden Lizenzkosten und keine Abhängigkeit willst.
Beim EICHWERK-Konfigurator zum Beispiel wird das Möbelstück bei jeder Maßänderung neu im Code berechnet. Mit einem Baukastensystem aus fertigen Modellen wäre das nicht machbar gewesen. Einen ausführlichen Vergleich findest du im Ratgeber WordPress 3D-Plugin oder individuell?
Pflege im WordPress-Backend: ohne Entwickler anrufen.
Der größte Vorteil eines WordPress-Konfigurators ist, dass deine Mitarbeiter ihn pflegen können. Das muss aber von Anfang an so gebaut werden. Typischerweise lege ich dafür an:
- Einen eigenen Bereich „Konfigurator“ im Backend, in dem Produkte, Optionsgruppen und Optionen als Einträge verwaltet werden.
- Preise pro Option — als fester Aufpreis, pro Meter, pro Quadratmeter oder als Staffel.
- Texte und Hinweise zu jeder Option, die im Konfigurator als Erklärung erscheinen.
- Material- und Farbfelder, bei denen die Redaktion eine Farbe wählt oder ein Texturbild hochlädt.
- Regeln, etwa „Glasdach nur ab 3 Metern Breite“, als einfache Auswahlfelder statt als Code.
Der Konfigurator liest diese Daten beim Laden über die WordPress-Schnittstelle. Ändert jemand im Backend einen Preis, gilt er sofort — ohne neues Deployment und ohne Entwickler.
Nicht alles gehört ins Backend. Neue 3D-Modelle, neue Produktarten oder komplett neue Logik bleiben Entwicklungsarbeit. Preise, Texte, Farben und das An- oder Abschalten von Optionen dagegen sollten immer von deinem Team pflegbar sein.
Was mit der fertigen Konfiguration passiert.
Ein Konfigurator ist nur so gut wie das, was danach passiert. In WordPress gibt es drei übliche Wege:
Anfrage statt Kauf
Bei B2B-Produkten, Handwerk und allem, was vor Ort aufgemessen wird, ist die Anfrage der richtige Abschluss. Der Kunde konfiguriert, trägt seine Kontaktdaten ein, und dein Vertrieb bekommt eine E-Mail mit allen gewählten Optionen, dem Richtpreis und einem Bild der Konfiguration. Zusätzlich wird die Anfrage im Backend gespeichert. Mehr dazu im Ratgeber Produktkonfigurator mit Anfrage.
Direkt in den WooCommerce-Warenkorb
Bei Produkten mit festem Preis landet die Konfiguration als Artikel im Warenkorb — mit allen gewählten Optionen in der Bestellübersicht, der Bestätigungsmail und im Backend. Wichtig: Der Preis muss auf dem Server neu berechnet werden, nicht im Browser. Wie das funktioniert, steht ausführlich unter WooCommerce 3D-Konfigurator.
Übergabe an CRM oder ERP
Soll die Konfiguration automatisch in HubSpot, Pipedrive oder ein Warenwirtschaftssystem, wird sie beim Absenden zusätzlich an dessen Schnittstelle übergeben. Das ist gut machbar, wenn das Zielsystem eine dokumentierte API hat.
Technischer Aufbau.
Für Entscheider reicht die Kurzfassung: Die 3D-Darstellung läuft mit Three.js im Browser des Besuchers, WordPress liefert Daten und nimmt Ergebnisse entgegen. Für alle, die es genauer wissen wollen:
- Plugin statt Theme: Der Konfigurator steckt in einem eigenen Plugin. Ein Theme-Wechsel oder Theme-Update zerstört ihn nicht.
- Skripte nur bei Bedarf: Three.js und die Modelle werden nur auf Seiten geladen, die den Konfigurator enthalten.
- Daten per REST-API: Optionen und Preise kommen als JSON aus einem eigenen Endpunkt.
- Serverseitige Prüfung: Preise und Regeln werden beim Absenden auf dem Server erneut geprüft. Was im Browser berechnet wird, kann manipuliert werden.
- Modelle als GLB: komprimiert und zwischengespeichert, idealerweise über ein CDN oder mit langen Cache-Zeiten.
<?php
/**
* Plugin Name: Produkt-Konfigurator 3D
*/
add_shortcode( 'konfigurator', function ( $atts ) {
$atts = shortcode_atts( [ 'produkt' => '' ], $atts );
// Skripte nur laden, wenn der Shortcode auf der Seite steht
wp_enqueue_script_module(
'konfigurator-3d',
plugins_url( 'build/konfigurator.js', __FILE__ ),
[],
'1.0.0'
);
return sprintf(
'<div class="konfigurator" data-produkt="%s" data-api="%s" data-nonce="%s"></div>',
esc_attr( $atts['produkt'] ),
esc_url( rest_url( 'konfigurator/v1/' ) ),
esc_attr( wp_create_nonce( 'wp_rest' ) )
);
} );
// Optionen und Preise aus dem Backend als JSON bereitstellen
add_action( 'rest_api_init', function () {
register_rest_route( 'konfigurator/v1', '/produkt/(?P<slug>[a-z0-9-]+)', [
'methods' => 'GET',
'permission_callback' => '__return_true',
'callback' => function ( $req ) {
$daten = konfigurator_lade_produkt( $req['slug'] ); // eigene Funktion
return $daten ?: new WP_Error( 'nicht_gefunden', 'Produkt fehlt', [ 'status' => 404 ] );
},
] );
} );wp_enqueue_script_module gibt es seit WordPress 6.5. Auf älteren Installationen wird stattdessen wp_enqueue_script mit einem gebündelten Skript verwendet. Der Aufbau ist ein Grundgerüst zum Verständnis — kein fertiges Plugin.
Ablauf in sieben Schritten.
- Erstgespräch: Was soll konfigurierbar sein, wie wird heute angefragt oder bestellt, welche WordPress-Umgebung gibt es? Hier klären wir auch, ob sich 3D überhaupt lohnt.
- Bestandsaufnahme: Blick in deine WordPress-Installation — Version, Theme, Page Builder, WooCommerce, Hosting, Caching-Plugins.
- Konzept: Optionen, Regeln, Preislogik und Abschluss (Anfrage oder Warenkorb) werden festgelegt. Daraus entsteht ein Festpreisangebot.
- 3D-Modelle: Aus CAD-Daten, in Blender modelliert oder prozedural im Code — je nach Produkt.
- Entwicklung auf einer Testumgebung: Nie direkt auf der Live-Website. Du bekommst einen Link und testest selbst, auch auf dem Smartphone.
- Backend und Schulung: Deine Redaktion bekommt eine kurze Einweisung, wie Preise, Texte und Optionen gepflegt werden.
- Livegang und Messung: Einbindung auf der Live-Seite, Test der Anfrage- oder Bestellstrecke, Einrichtung der Erfolgsmessung in Analytics.
Ladezeit, Hosting und SEO.
Ein Konfigurator darf deine Website nicht langsam machen. Drei Punkte entscheiden darüber:
Laden auf Abruf: Die 3D-Szene startet erst, wenn sie in den sichtbaren Bereich kommt. Bis dahin steht ein schnelles Vorschaubild an ihrer Stelle. So bleibt der erste Seitenaufbau genauso schnell wie ohne Konfigurator.
Caching- und Optimierungs-Plugins: Plugins, die JavaScript bündeln oder verzögern, zerstören 3D-Anwendungen erstaunlich oft. Die Konfigurator-Skripte werden deshalb gezielt ausgenommen. Mehr dazu im Ratgeber 3D in WordPress schnell halten.
SEO: Google kann eine 3D-Szene nicht lesen. Deshalb braucht jede Konfigurator-Seite ein echtes Textfundament: Produktbeschreibung, Varianten, Maße, FAQ. Genau hier hat WordPress einen Vorteil gegenüber externen Konfigurator-Plattformen — der Text steht auf deiner Domain und wird mit dem Konfigurator gemeinsam gefunden.
Normales Shared Hosting reicht in den meisten Fällen aus, weil die Rechenarbeit im Browser des Besuchers stattfindet, nicht auf dem Server.
Was kostet ein 3D-Konfigurator für WordPress?
Ein Produkt, wenige Optionen, Farben und Materialien, Abschluss als Anfrage.
Maßänderungen, Regeln, Live-Preis, pflegbares Backend, Anfrage oder WooCommerce.
Mehrere Produktfamilien, Planer-Funktionen, ERP- oder CRM-Anbindung.
Diese Zahlen sind Orientierung, keine Fixpreise. Nach dem Erstgespräch bekommst du ein Festpreisangebot. Laufende Lizenzgebühren fallen bei einer individuellen Entwicklung nicht an — nur Hosting und, falls gewünscht, eine Wartungsvereinbarung. Eine ausführliche Aufschlüsselung findest du unter 3D-Konfigurator Kosten.
Wann es sich nicht lohnt.
- Dein Produkt hat nur zwei, drei Varianten, die sich mit Fotos gut zeigen lassen.
- Die Entscheidung fällt ohnehin erst im persönlichen Beratungsgespräch, und niemand informiert sich vorher online.
- Die Website hat kaum Besucher. Ein Konfigurator verbessert, was aus Besuchern wird — er bringt aber selbst keine.
- Die WordPress-Installation ist stark veraltet. Dann gehört zuerst die Basis in Ordnung.
In diesen Fällen sage ich dir das im Erstgespräch — und was stattdessen mehr bringt.
Die Horizont-Baureise läuft eingebettet in einer WordPress-Website. Die übrigen Demos laufen als eigenständige Three.js-Anwendungen — technisch dieselbe Grundlage, die sich genauso in WordPress einbinden lässt. Die Markennamen sind überwiegend erfundene Showcases.
Nicht glauben — ausprobieren.
Alle Demos laufen live im Browser, auch auf dem Smartphone.
FAQ — 3D-Konfigurator für WordPress.
Kann man einen 3D-Konfigurator in WordPress einbinden?
Ja. Ein 3D-Konfigurator auf Basis von Three.js lässt sich als Shortcode, Gutenberg-Block oder Elementor-Widget direkt in eine WordPress-Seite einbinden. Optionen und Preise können im Backend gepflegt werden, und die fertige Konfiguration wird als Anfrage oder als WooCommerce-Bestellung übergeben.
Brauche ich dafür ein kostenpflichtiges Plugin?
Nicht zwingend. Es gibt fertige Plugins und Konfigurator-Dienste mit monatlichen Gebühren, die für einfache Baukasten-Produkte gut funktionieren. Eine individuelle Entwicklung als eigenes Plugin verursacht keine laufenden Lizenzkosten und eignet sich besonders für Produkte mit variablen Maßen, Regeln oder besonderer Darstellung.
Können meine Mitarbeiter Preise und Optionen selbst ändern?
Ja, wenn der Konfigurator dafür gebaut ist. Produkte, Optionen, Aufpreise, Texte und Farben werden dann als Einträge im WordPress-Backend verwaltet und gelten sofort. Neue 3D-Modelle oder neue Logik bleiben dagegen Entwicklungsarbeit.
Funktioniert ein 3D-Konfigurator mit WooCommerce?
Ja. Die gewählte Konfiguration wird als Artikel mit allen Optionen in den WooCommerce-Warenkorb gelegt und erscheint in Bestellübersicht, Bestätigungsmail und Backend. Der Preis muss dabei auf dem Server neu berechnet werden, damit er im Browser nicht manipuliert werden kann.
Macht ein 3D-Konfigurator meine WordPress-Seite langsam?
Nicht, wenn er richtig eingebunden ist. Skripte und Modelle werden nur auf Seiten mit Konfigurator geladen, und die 3D-Szene startet erst, wenn sie sichtbar wird. Wichtig ist außerdem, die Konfigurator-Skripte von Caching- und Optimierungs-Plugins auszunehmen, die JavaScript bündeln oder verzögern.
Was kostet ein 3D-Konfigurator für WordPress?
Ein einfacher Konfigurator mit wenigen Optionen beginnt bei etwa 4.000 Euro. Typische Konfiguratoren mit Maßänderungen, Regeln, Live-Preis und pflegbarem Backend liegen meist zwischen 6.000 und 15.000 Euro, komplexe Planer mit Systemanbindung darüber. Diese Zahlen sind Orientierung und keine Fixpreise.
Brauche ich besonderes Hosting?
In den meisten Fällen nicht. Die 3D-Berechnung findet im Browser des Besuchers statt, nicht auf dem Server. Normales WordPress-Hosting reicht aus, sofern die Modelldateien komprimiert sind und mit langen Cache-Zeiten ausgeliefert werden.
Das bin ich – rechts im BildErzähl mir, was du zeigen willst.
Ich sage dir ehrlich, ob sich 3D für dein Vorhaben lohnt — und wenn nicht, was stattdessen mehr bringt.
Antwort meist innerhalb von 24 Stunden · hallo@manuelkillert.de