WooCommerce 3D-Konfigurator — konfigurieren und direkt kaufen.
Variable Produkte in WooCommerce stoßen schnell an Grenzen: 12 Farben mal 8 Größen mal 5 Materialien sind 480 Varianten, und kein Kunde kann sich darunter etwas vorstellen. Ein 3D-Konfigurator zeigt jede Kombination sofort — und legt sie mit korrektem Preis in den Warenkorb. So funktioniert das im Detail.
Ein WooCommerce 3D-Konfigurator verbindet eine interaktive 3D-Produktansicht mit dem Warenkorb von WooCommerce. Der Kunde wählt Optionen, sieht das Ergebnis in Echtzeit, und die Konfiguration wird als Warenkorbartikel mit allen Details übergeben. Der Preis wird dabei auf dem Server berechnet, nicht im Browser.
Wo variable Produkte an Grenzen stoßen.
WooCommerce bringt mit „variablen Produkten“ bereits eine Variantenlogik mit: Attribute wie Farbe und Größe, jede Kombination eine eigene Variation mit Preis, Bild und Lagerbestand. Für ein T-Shirt in fünf Farben und vier Größen ist das perfekt.
Schwierig wird es in drei Situationen:
- Kombinatorische Explosion: Jede weitere Option multipliziert die Zahl der Variationen. Ab einigen hundert wird das Backend unübersichtlich und die Produktseite langsam.
- Stufenlose Maße: Ein Regal, das zwischen 60 und 240 Zentimetern breit sein kann, lässt sich nicht als Variation abbilden.
- Bilder: Für jede Kombination bräuchte es ein eigenes Produktfoto. Bei 480 Varianten fotografiert niemand 480 Bilder.
Ein 3D-Konfigurator löst alle drei: Er berechnet die Darstellung, statt sie aus Fotos zu wählen, akzeptiert stufenlose Werte und kommt mit einem einzigen WooCommerce-Produkt aus, an das die Konfiguration angehängt wird.
Wie der Konfigurator mit WooCommerce spricht.
Technisch passiert beim Klick auf „In den Warenkorb“ Folgendes:
- Der Konfigurator sammelt alle gewählten Optionen — etwa Breite 180 cm, Eiche geölt, 4 Fachböden, Rückwand ja.
- Diese Auswahl wird zusammen mit der Produkt-ID an WooCommerce übergeben, entweder über das normale Warenkorb-Formular oder über einen eigenen Endpunkt.
- WooCommerce hängt die Auswahl als Warenkorbdaten an den Artikel. Zwei unterschiedlich konfigurierte Regale sind so zwei getrennte Positionen.
- Der Server prüft die Auswahl gegen die erlaubten Werte und berechnet den Preis neu.
- Im Warenkorb, an der Kasse, in der Bestellung und in der E-Mail erscheinen alle Optionen lesbar.
Das Ergebnis ist ein ganz normaler WooCommerce-Bestellprozess. Zahlungsarten, Versand, Steuern, Rechnungs-Plugins und Buchhaltungs-Anbindungen funktionieren weiter wie gewohnt.
<?php
// 1. Beim Hinzufuegen: Auswahl pruefen und am Artikel speichern
add_filter( 'woocommerce_add_cart_item_data', function ( $data, $product_id ) {
if ( empty( $_POST['konfiguration'] ) ) {
return $data;
}
$roh = json_decode( wp_unslash( $_POST['konfiguration'] ), true );
$sauber = konfigurator_validieren( $product_id, $roh ); // nur erlaubte Werte
if ( is_wp_error( $sauber ) ) {
wc_add_notice( $sauber->get_error_message(), 'error' );
return $data;
}
$data['konfiguration'] = $sauber;
$data['unique_key'] = md5( wp_json_encode( $sauber ) ); // eigene Warenkorbposition
return $data;
}, 10, 2 );
// 2. Auswahl im Warenkorb und an der Kasse anzeigen
add_filter( 'woocommerce_get_item_data', function ( $zeilen, $item ) {
foreach ( $item['konfiguration']['anzeige'] ?? [] as $label => $wert ) {
$zeilen[] = [ 'key' => $label, 'value' => $wert ];
}
return $zeilen;
}, 10, 2 );konfigurator_validieren() ist eine eigene Funktion, die jede Option gegen die im Backend gepflegten Werte prüft. Ohne diese Prüfung könnte jemand beliebige Werte in das Formular schreiben.
Sichere Preisberechnung.
Das ist der wichtigste Punkt dieser Seite, und er wird bei selbstgebauten Lösungen erstaunlich oft falsch gemacht: Der Preis, den der Browser anzeigt, darf nie der Preis sein, der berechnet wird.
Alles, was im Browser passiert, kann ein Besucher mit den Entwicklertools verändern. Übergibt der Konfigurator „Preis: 1.890 €“ an den Warenkorb, kann jemand daraus „Preis: 18,90 €“ machen. Deshalb gilt:
- Der Browser berechnet den Preis nur zur Anzeige — damit der Kunde sofort sieht, was eine Option kostet.
- Übergeben werden nur die gewählten Optionen, nie ein Preis.
- Der Server berechnet den Preis aus diesen Optionen und den im Backend gepflegten Aufpreisen neu.
- Browser und Server nutzen dieselbe Preistabelle, damit beide Werte übereinstimmen.
<?php
add_action( 'woocommerce_before_calculate_totals', function ( $cart ) {
if ( is_admin() && ! defined( 'DOING_AJAX' ) ) {
return;
}
foreach ( $cart->get_cart() as $item ) {
if ( empty( $item['konfiguration'] ) ) {
continue;
}
// Preis ausschliesslich aus den gepruefte Optionen berechnen
$preis = konfigurator_preis( $item['product_id'], $item['konfiguration'] );
$item['data']->set_price( $preis );
}
}, 20 );
// Konfiguration dauerhaft in der Bestellung speichern
add_action( 'woocommerce_checkout_create_order_line_item', function ( $line, $key, $values ) {
foreach ( $values['konfiguration']['anzeige'] ?? [] as $label => $wert ) {
$line->add_meta_data( $label, $wert );
}
}, 10, 3 );Mit add_meta_data erscheinen die Optionen automatisch in der Bestellansicht im Backend und in den Standard-E-Mails von WooCommerce.
Konfiguration in Bestellung und E-Mail.
Für den Kunden muss nach dem Kauf eindeutig nachvollziehbar sein, was er bestellt hat. Für deine Fertigung muss es erst recht eindeutig sein. Bewährt haben sich:
- Lesbare Optionen in Warenkorb, Kasse, Bestellbestätigung und Backend — „Breite: 180 cm“ statt „w=180“.
- Ein Vorschaubild der Konfiguration, das beim Hinzufügen aus der 3D-Szene erzeugt und an der Bestellung gespeichert wird.
- Ein Konfigurationscode oder Link, mit dem sich genau diese Konfiguration später wieder öffnen lässt — praktisch für Rückfragen und Nachbestellungen.
- Eine Fertigungsansicht oder ein PDF mit Stückliste, wenn deine Werkstatt damit arbeitet.
Lager, Artikelnummern und Fertigung.
Hier unterscheiden sich Shops stark, und das sollte im Konzept früh geklärt werden:
Auftragsfertigung: Jedes Produkt wird nach Bestellung gebaut. Dann braucht es keinen Lagerbestand pro Variante — die Konfiguration ist der Fertigungsauftrag. Das ist der einfachste Fall.
Kombination aus Lagerteilen: Das Produkt setzt sich aus vorrätigen Komponenten zusammen, etwa Gestell, Platte und Zubehör. Dann kann der Konfigurator die Bestände der Komponenten abfragen und nicht vorrätige Optionen kennzeichnen.
Artikelnummern für die Warenwirtschaft: Braucht dein ERP eine Artikelnummer, wird sie nach festen Regeln aus der Konfiguration zusammengesetzt und an der Bestellposition gespeichert.
Typische Stolpersteine.
- Seiten-Caching: Warenkorb, Kasse und Konto dürfen nie gecacht werden. Die meisten Caching-Plugins wissen das — bei eigenen Endpunkten muss man es ihnen aber sagen.
- Script-Optimierung: „JavaScript verzögern“ oder „Dateien zusammenfassen“ in Optimierungs-Plugins legt 3D-Anwendungen regelmäßig lahm. Die Konfigurator-Skripte werden ausgenommen.
- Gutscheine und Rabatte: Sie wirken auf den neu berechneten Preis. Das sollte getestet werden, bevor der erste Kunde bestellt.
- Preisanzeige und Steuern: Ob Preise inklusive oder exklusive Mehrwertsteuer angezeigt werden, muss im Konfigurator genauso eingestellt sein wie im Shop.
- Grundpreis-Angaben: Bei Produkten, die nach Menge oder Länge verkauft werden, gelten in Deutschland Pflichtangaben zum Grundpreis. Das klärt dein Rechtsberater — technisch lässt es sich im Konfigurator abbilden.
- WooCommerce-Updates: Eigene Anpassungen nutzen die offiziellen Hooks, statt Dateien von WooCommerce zu verändern. Nur so bleiben Updates problemlos.
Umsetzung und Kosten.
Die Umsetzung läuft grundsätzlich auf einer Kopie deines Shops, nie auf dem Live-System. Dort testen wir die komplette Strecke: konfigurieren, in den Warenkorb, Gutschein, Bezahlung im Testmodus, Bestätigungsmail, Bestellung im Backend. Erst wenn das sauber läuft, geht der Konfigurator live.
Ein WooCommerce-Konfigurator liegt kostenseitig meist im Bereich 6.000 bis 15.000 Euro, abhängig von der Zahl der Produkte, der Komplexität der Regeln und davon, ob Warenwirtschaft oder Fertigung angebunden werden. Einfache Konfiguratoren mit wenigen Optionen beginnen bei etwa 4.000 Euro. Das sind Orientierungswerte — du bekommst nach dem Erstgespräch ein Festpreisangebot.
Hast du nur ein Produkt mit zehn Varianten, reicht meist ein gut gemachtes variables Produkt mit einer 3D-Produktansicht. Der Konfigurator lohnt sich, wenn die Zahl der Kombinationen oder stufenlose Maße WooCommerce überfordern.
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 — WooCommerce 3D-Konfigurator.
Kann man in WooCommerce einen 3D-Konfigurator nutzen?
Ja. Ein individuell entwickelter 3D-Konfigurator wird mit einem WooCommerce-Produkt verbunden. Die gewählten Optionen werden als Warenkorbdaten an den Artikel gehängt, der Preis wird auf dem Server berechnet, und alle Optionen erscheinen in Warenkorb, Kasse, Bestellung und E-Mail.
Warum reichen variable Produkte in WooCommerce nicht?
Für wenige Varianten reichen sie gut. Bei vielen Optionen wächst die Zahl der Variationen aber multiplikativ, stufenlose Maße lassen sich gar nicht abbilden, und für jede Kombination bräuchte es ein eigenes Foto. Ein 3D-Konfigurator berechnet die Darstellung stattdessen in Echtzeit.
Wie wird verhindert, dass Kunden den Preis manipulieren?
Der Browser berechnet den Preis nur zur Anzeige. An WooCommerce werden ausschließlich die gewählten Optionen übergeben, niemals ein Preis. Der Server prüft die Optionen gegen die erlaubten Werte und berechnet den Preis aus den im Backend gepflegten Aufpreisen neu.
Sieht meine Fertigung, was genau bestellt wurde?
Ja. Die Optionen werden dauerhaft an der Bestellposition gespeichert und erscheinen lesbar im Backend und in den E-Mails. Zusätzlich können ein Vorschaubild, ein Konfigurationscode zum erneuten Öffnen und eine Stückliste als PDF erzeugt werden.
Funktionieren Zahlungsarten und Rechnungs-Plugins weiter?
Ja. Nach dem Hinzufügen zum Warenkorb läuft der normale WooCommerce-Bestellprozess. Zahlungsarten, Versand, Steuern, Rechnungs-Plugins und Anbindungen an die Buchhaltung arbeiten wie gewohnt. Gutscheine und Rabatte sollten vor dem Livegang trotzdem getestet werden.
Warum funktioniert mein Konfigurator nach Aktivierung eines Caching-Plugins nicht mehr?
Viele Optimierungs-Plugins bündeln oder verzögern JavaScript. Das verändert die Ladereihenfolge und legt 3D-Anwendungen häufig lahm. Die Konfigurator-Skripte müssen von diesen Funktionen ausgenommen und eigene Endpunkte vom Seiten-Caching ausgeschlossen werden.
Was kostet ein WooCommerce 3D-Konfigurator?
Meist zwischen 6.000 und 15.000 Euro, abhängig von der Zahl der Produkte, der Regeln und davon, ob Warenwirtschaft oder Fertigung angebunden werden. Einfache Konfiguratoren beginnen bei etwa 4.000 Euro. Diese Zahlen sind Orientierung und keine Fixpreise.
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