Bring your WooCommerce products to life with an interactive 3D viewer and mobile AR. Upload GLB/GLTF models, configure camera, lighting, hotspots, dimensions, and material variants, then let customers spin and explore products on the product page or place them in their room with augmented reality.
Features
- Interactive 3D viewer on product pages, powered by Google’s
<model-viewer>web component - Mobile AR via QR code (ARCore on Android, ARKit on iOS)
- GLB / GLTF model upload through the standard WordPress media library
- Fullscreen editor with tabs for Lighting, Camera, Materials, Animations, Hotspots, Camera Views, Dimensions, AR, Attribute Mapping, and Presentation
- Per-material color / metallic / roughness overrides
- Map WooCommerce product attributes (e.g. Color Red) to material changes for instant variant previews
- Dimension overlay with cm / m / inches / feet units
- Signed proxy URLs so the raw GLB attachment URL is never exposed — cache-friendly, and revocable at any time from the settings page
- Show the 3D viewer inside the WooCommerce product gallery (as the first image) or as a button that opens a pop-up — your choice
[bss3dv_viewer id="123"]shortcode and a “BSS 3D Viewer” block to embed a model on any page or post- Translation-ready, RTL-ready, HPOS-compatible, no external CDN runtime dependencies
Privacy / Data
This plugin does not call any external services at runtime. All assets (model-viewer, QR generator) are bundled locally.
Bundled third-party libraries
This plugin bundles two open-source libraries. Both are GPL-compatible and their unminified/source distributions are publicly available:
- Google <model-viewer> 4.0.0 (Apache-2.0) — source: https://github.com/google/model-viewer
- QR code generator (MIT) — source: https://github.com/davidshimjs/qrcodejs
Screenshots
The "View in 3D" and "View in Your Room" buttons on a product page.
The interactive 3D viewer modal, showing real-world product dimensions.
Mobile AR via a scannable QR code, with a copy-link fallback.
The admin settings — display mode, accent color, per-field tooltips, and a Custom CSS tab.
The product editor's "3D Model" tab — upload a GLB and open the editor.
The fullscreen 3D editor — lighting, camera, materials, hotspots, dimensions, and AR.