3D-Produktansicht in WooCommerce einbauen.
Fotos zeigen dein Produkt aus den Winkeln, die der Fotograf gewählt hat. Eine 3D-Ansicht auf der WooCommerce-Produktseite lässt Kunden selbst drehen, zoomen und per AR in den eigenen Raum stellen. Diese Anleitung zeigt, wie das sauber eingebaut wird — mit Modell pro Produkt, Farbwechsel bei Variationen und den typischen Fehlern.
Für eine 3D-Produktansicht in WooCommerce braucht es drei Dinge: ein optimiertes GLB-Modell pro Produkt, ein Feld am Produkt, in dem die Modelldatei hinterlegt wird, und einen Viewer — etwa Googles model-viewer oder eine eigene Three.js-Szene —, der auf der Produktseite in oder neben der Galerie erscheint. Bei variablen Produkten reagiert der Viewer zusätzlich auf die Auswahl von Farbe oder Material.
Wann sich eine 3D-Ansicht im Shop lohnt.
Nicht jedes Produkt braucht 3D. Eine Tasse, ein Buch oder ein T-Shirt verkauft sich mit guten Fotos genauso gut. Eine 3D-Ansicht bringt vor allem dann etwas, wenn Kunden vor dem Kauf eine dieser Fragen haben:
- Wie sieht es von hinten, unten oder innen aus? Etwa bei Taschen, Möbeln, Geräten und technischen Produkten.
- Wie groß ist es wirklich? Hier hilft vor allem die AR-Ansicht im eigenen Raum.
- Wie wirkt die Farbe oder das Material? Wenn es viele Varianten gibt, die nicht alle fotografiert wurden.
- Wie funktioniert es? Klappen, Auszüge, Mechanik — Dinge, die auf einem Foto stillstehen.
Außerdem ist eine 3D-Ansicht bei hochpreisigen Produkten sinnvoll, bei denen jede Unsicherheit vor dem Kauf zu einer Retoure oder einem Kaufabbruch führen kann.
Vorbereitung: Modelle und Dateigrößen.
Die meisten Probleme mit 3D in WooCommerce entstehen nicht im Code, sondern bei den Modellen. Ein 3D-Modell aus der Konstruktion oder vom Hersteller ist fast nie direkt fürs Web geeignet.
| Ziel | Richtwert | Warum |
|---|---|---|
| Dateigröße pro Produkt | möglichst unter 3–5 MB | Produktseiten müssen auch mobil schnell laden |
| Texturen | 1K bis 2K, WebP oder KTX2 | Texturen sind meist der größte Anteil der Datei |
| Format | GLB | Eine Datei mit Geometrie, Material und Texturen |
| Maßstab | 1 Einheit = 1 Meter | Sonst stimmt die Größe in AR nicht |
| Ursprung | Unterseite, Mitte | Das Produkt steht auf dem Boden statt zu schweben |
Wie man eine zu große Datei verkleinert, steht ausführlich im Ratgeber 3D-Modell auf Website einbinden. Wie GLB-Dateien überhaupt in die WordPress-Mediathek kommen, erklärt GLB-Dateien in WordPress hochladen — denn standardmäßig lehnt WordPress sie ab.
Schritt 1: Modell am Produkt hinterlegen.
Jedes Produkt braucht ein Feld, in dem die Modelldatei ausgewählt wird. Das geht mit einem Feld-Plugin wie Advanced Custom Fields oder ohne zusätzliches Plugin über ein eigenes Metafeld. Wichtig ist nur, dass die Redaktion das Modell direkt im Produkt auswählen kann — genau wie das Produktbild.
<?php
// Feld im Tab "Allgemein" der Produktdaten
add_action( 'woocommerce_product_options_general_product_data', function () {
woocommerce_wp_text_input( [
'id' => '_modell_3d_url',
'label' => '3D-Modell (GLB-URL)',
'placeholder' => 'https://…/modell.glb',
'desc_tip' => true,
'description' => 'URL der GLB-Datei aus der Mediathek.',
] );
} );
add_action( 'woocommerce_admin_process_product_object', function ( $product ) {
if ( isset( $_POST['_modell_3d_url'] ) ) {
$product->update_meta_data( '_modell_3d_url', esc_url_raw( wp_unslash( $_POST['_modell_3d_url'] ) ) );
}
} );Für Redaktionen ist ein Auswahlfeld mit Mediathek-Button komfortabler als eine URL. Mit Advanced Custom Fields ist das ein Dateifeld mit wenigen Klicks. Der Code zeigt die schlanke Variante ohne weiteres Plugin.
Schritt 2: Viewer auf der Produktseite.
Jetzt muss die Ansicht auf der Produktseite erscheinen. Dafür gibt es zwei übliche Positionen:
- In der Galerie: Das 3D-Modell ist ein weiteres „Bild“ neben den Fotos, erkennbar an einem 3D-Symbol. Das wirkt am natürlichsten, erfordert aber mehr Anpassung, weil die WooCommerce-Galerie auf Bilder ausgelegt ist und viele Themes sie verändern.
- Unter der Galerie oder in einem eigenen Bereich: Ein Button „In 3D ansehen“ öffnet den Viewer. Einfacher, robuster und mit fast jedem Theme kompatibel.
Für den Einstieg empfehle ich die zweite Variante. Die folgende Lösung nutzt Googles model-viewer, weil er Drehen, Zoomen und AR ohne eigenen Three.js-Code mitbringt. Für besondere Darstellungen — Explosionsansicht, animierte Mechanik, eigene Lichtstimmung — ist eine eigene Three.js-Szene die bessere Wahl.
<?php
add_action( 'woocommerce_product_thumbnails', function () {
global $product;
$modell = $product->get_meta( '_modell_3d_url' );
if ( ! $modell ) {
return;
}
// Skript nur auf Produktseiten mit Modell laden
wp_enqueue_script_module(
'model-viewer',
'https://ajax.googleapis.com/ajax/libs/model-viewer/4.0.0/model-viewer.min.js',
[],
null
);
printf(
'<model-viewer id="produkt-3d" src="%s" alt="%s in 3D"
camera-controls touch-action="pan-y" loading="lazy" reveal="interaction"
poster="%s" ar ar-modes="webxr scene-viewer quick-look"
style="width:100%%;aspect-ratio:1/1;background:#f4f1ec;border-radius:12px;">
<button slot="ar-button" class="button">Im eigenen Raum ansehen</button>
</model-viewer>',
esc_url( $modell ),
esc_attr( $product->get_name() ),
esc_url( wp_get_attachment_image_url( $product->get_image_id(), 'woocommerce_single' ) )
);
}, 30 );loading="lazy" und reveal="interaction" sorgen dafür, dass das Modell erst geladen wird, wenn der Viewer sichtbar ist, und bis zur ersten Berührung das Produktbild als Vorschau zeigt. touch-action="pan-y" verhindert, dass man auf dem Smartphone beim Scrollen versehentlich das Modell dreht. Der Hook woocommerce_product_thumbnails ist in manchen Themes nicht vorhanden — dann eine andere Position wählen.
Schritt 3: Farbwechsel bei Variationen.
Bei variablen Produkten soll sich die 3D-Ansicht ändern, wenn der Kunde eine andere Farbe wählt. Dafür gibt es zwei Ansätze:
Ein Modell pro Variation: Jede Variation bekommt ihre eigene GLB-Datei. Einfach zu verstehen, aber bei 20 Farben sind das 20 fast identische Dateien, die gepflegt und geladen werden müssen.
Ein Modell, Material wird umgefärbt: Es gibt nur eine Datei. Bei der Auswahl einer Variation wird im Viewer die Farbe oder Textur des betreffenden Materials geändert. Das ist schlanker und schneller, setzt aber voraus, dass das Modell sauber aufgebaut ist — mit klar benannten Materialien wie „Bezug“ oder „Gestell“.
WooCommerce löst beim Wechsel der Variation im Browser das Ereignis found_variation aus. Darauf reagiert das Skript.
// Voraussetzung: Die Variation hat ein Metafeld "farbe_hex",
// das ueber den Filter woocommerce_available_variation mitgeliefert wird.
jQuery( function ( $ ) {
const viewer = document.getElementById( 'produkt-3d' );
if ( ! viewer ) return;
$( 'form.variations_form' ).on( 'found_variation', async ( e, variation ) => {
if ( ! variation.farbe_hex ) return;
await viewer.updateComplete;
const material = viewer.model?.materials.find( m => m.name === 'Bezug' );
if ( ! material ) return;
// Hex in RGBA 0..1 umrechnen
const hex = variation.farbe_hex.replace( '#', '' );
const rgb = [ 0, 2, 4 ].map( i => parseInt( hex.substr( i, 2 ), 16 ) / 255 );
material.pbrMetallicRoughness.setBaseColorFactor( [ ...rgb, 1 ] );
} );
} );Das Ereignis found_variation stammt aus dem Variations-Skript von WooCommerce und nutzt jQuery. Viele Variations-Swatch-Plugins lösen es ebenfalls aus — das sollte man mit dem eingesetzten Plugin testen. Der Materialname Bezug muss exakt dem Namen im Modell entsprechen.
Schritt 4: AR-Button fürs Smartphone.
Mit dem Attribut ar blendet model-viewer auf geeigneten Smartphones automatisch einen Button ein, der das Produkt in die AR-Ansicht des Systems übergibt: Scene Viewer auf Android, Quick Look auf dem iPhone. Auf Geräten ohne AR bleibt der Button unsichtbar.
Damit das gut aussieht, muss das Modell im richtigen Maßstab vorliegen. Für das iPhone lohnt sich zusätzlich eine eigene USDZ-Datei über das Attribut ios-src, weil die automatisch erzeugte Variante nicht alle Materialien gleich gut umsetzt. Wird das Material bei Variationen umgefärbt, sollte getestet werden, ob die Farbe auch in der AR-Ansicht übernommen wird.
Typische Fehler.
- Upload schlägt fehl: WordPress erlaubt GLB-Dateien standardmäßig nicht. Lösung im Ratgeber GLB-Dateien hochladen.
- Modell lädt, bleibt aber unsichtbar: Oft ist es tausendfach zu groß oder zu klein, weil es in Millimetern exportiert wurde.
- Produktseite ist plötzlich langsam: Das Modell wird sofort geladen statt bei Sichtbarkeit, oder die Texturen sind in 4K oder 8K.
- Viewer funktioniert nach Aktivierung eines Optimierungs-Plugins nicht mehr: Das Skript wird verzögert oder gebündelt. Ausnehmen, siehe 3D in WordPress schnell halten.
- Auf dem Smartphone kann man nicht mehr scrollen: Der Viewer fängt alle Wischgesten ab.
touch-action="pan-y"setzen. - Galerie-Lightbox öffnet sich statt des Viewers: Das Theme behandelt den Bereich als Bild. Viewer außerhalb der Galerie-Links platzieren.
Viewer oder Konfigurator?
Eine 3D-Produktansicht zeigt ein fertiges Produkt in seinen vorhandenen Varianten. Sobald Kunden selbst Maße verändern, Teile kombinieren oder Regeln greifen sollen, wird daraus ein Konfigurator. Die Grenze ist fließend, aber als Faustregel gilt: Passen alle Varianten gut in die normalen WooCommerce-Variationen, reicht ein Viewer. Sprengen sie das System, lohnt sich ein WooCommerce 3D-Konfigurator.
Eine professionell umgesetzte 3D-Produktansicht beginnt bei etwa 2.500 Euro, abhängig von Zahl und Zustand der Modelle und davon, ob Variationen und AR eingebunden werden. Wer die obigen Schritte selbst umsetzt, braucht vor allem gute Modelle — und etwas Geduld beim Testen im eigenen Theme.
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-Produktansicht.
Wie füge ich eine 3D-Produktansicht in WooCommerce ein?
Man hinterlegt pro Produkt eine optimierte GLB-Datei in einem eigenen Feld und gibt auf der Produktseite einen 3D-Viewer aus, etwa Googles model-viewer oder eine eigene Three.js-Szene. Die Ausgabe erfolgt über einen WooCommerce-Hook in oder unter der Produktgalerie.
Brauche ich dafür ein Plugin?
Nicht zwingend. Es gibt Plugins, die 3D-Ansichten in WooCommerce ergänzen. Mit wenigen Zeilen Code in einem eigenen Plugin lässt sich aber ein Modellfeld am Produkt und die Ausgabe mit model-viewer auch ohne zusätzliches Plugin umsetzen, was mehr Kontrolle über Ladeverhalten und Darstellung gibt.
Kann sich das 3D-Modell bei Auswahl einer Farbe ändern?
Ja. Entweder bekommt jede Variation ein eigenes Modell, oder es gibt ein Modell, dessen Material beim Variationswechsel umgefärbt wird. WooCommerce löst dafür im Browser das Ereignis found_variation aus, auf das der Viewer reagieren kann. Das zweite Verfahren ist schlanker, setzt aber sauber benannte Materialien voraus.
Wie groß darf ein 3D-Modell für eine Produktseite sein?
Als Orientierung möglichst unter 3 bis 5 MB. Den größten Anteil haben meist die Texturen, die auf 1K bis 2K verkleinert und als WebP oder KTX2 gespeichert werden sollten. Zusätzlich sollte das Modell erst geladen werden, wenn der Viewer sichtbar ist.
Funktioniert AR mit WooCommerce?
Ja. Mit model-viewer erscheint auf geeigneten Smartphones ein Button, der das Produkt an die AR-Ansicht des Systems übergibt, also Scene Viewer auf Android und Quick Look auf dem iPhone. Voraussetzung ist ein Modell im richtigen Maßstab, für das iPhone idealerweise zusätzlich eine USDZ-Datei.
Warum kann ich auf dem Smartphone nicht mehr scrollen?
Der 3D-Viewer fängt alle Wischgesten ab, um das Modell zu drehen. Mit dem Attribut touch-action auf pan-y bleibt senkrechtes Wischen zum Scrollen erhalten, während waagerechtes Wischen das Modell dreht.
Wann brauche ich statt eines Viewers einen Konfigurator?
Wenn Kunden Maße stufenlos verändern, Teile frei kombinieren oder Regeln zwischen Optionen gelten sollen. Passen alle Varianten gut in die normalen WooCommerce-Variationen, reicht eine 3D-Produktansicht.
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