內容簡介
這款外掛讓顧客可以在互動式 3D 環境中設計他們理想的產品，選擇材料、顏色和組件，並即時查看變更，簡化訂購流程，提升顧客體驗。
【主要功能】
• 實時 3D 產品檢視器，支持旋轉和縮放
• 自訂步驟，將選項組織成標籤群組
• 每個選項的價格附加費用即時顯示
• 可分享的配置 URL，方便顧客檢視
• PDF 下載功能，提供訂單記錄
• 支援 AR 檢視於行動裝置
外掛標籤
開發者團隊
② 後台搜尋「3D Product Customizer & Configurator for WooCommerce」→ 直接安裝（推薦）
📦 歷史版本下載
原文外掛簡介
DEMO
Let your customers design their perfect product in interactive 3D — pick materials, colors, and components, see every change instantly, and order exactly what they built. Every selection is saved to the WooCommerce order automatically, so your team always knows what to make.
Perfect for: furniture & upholstery, jewelry, footwear, apparel, signage, engraving, sports gear, packaging, and any product that comes in multiple finishes or configurations.
What it does for your store:
Customers stop asking “can I get it in blue?” — they configure it themselves and see the result live
Every option selection is stored on the order as a line item — your workshop or fulfillment team sees exactly what was chosen
Per-option pricing — add a surcharge to premium finishes and watch the total update in real time as the customer selects
Customers can share their exact configuration via a link, perfect for review-before-you-order workflows
PDF download gives customers a record of what they ordered
Features:
Real-time 3D product viewer — rotate, zoom, and see changes instantly
Customization steps — organize options into labeled groups (e.g. Frame, Fabric, Legs) each targeting specific parts of the model
Material swapping — assign a texture or base color to each option
Geometry toggles — show or hide parts of the model based on selections (e.g. add a badge, swap a component)
Step visibility — show or hide entire configuration steps based on what the customer has already selected
Per-option price surcharge with live price display
Undo / redo history
Shareable configuration URL
PDF preview download
AR view on supported mobile devices
HDR environment lighting and background color switcher
Custom icons per step and per option
Reusable texture library (Custom Post Type)
Automatic step thumbnail generation (EXPERIMENTAL)
Technical:
GLB / GLTF model format support
PBR (Physically Based Rendering) material support — base color, roughness, normal, AO, metalness, and displacement maps
Powered by Three.js (WebGL), bundled — no external CDN dependency
Shortcodes, Gutenberg blocks, action hook, and automatic placement support — including standalone viewer-only variants for embedding just the 3D canvas anywhere
18+ WordPress action hooks for developer extensibility
Free vs Premium:
The free version is fully functional for single-material customization. Premium unlocks advanced workflows and productivity features for studios managing large product catalogs.
Free
Upload & display a 3D model
Base color texture or color picker per option
Roughness & metalness sliders
Customization steps
Viewer Only Mode
Camera, zoom & background settings
HDR environment map
Undo / redo, PDF, AR view
Set custom icons (images) for every step / options of a step
Set additional prices per option
Premium (everything in Free, plus)
Material Preview
Multiple textures per option
Bulk Add Materials to a step
Show / Hide mesh controls per option
Normal, AO, metalness & displacement maps
Reflection intensity & displacement scale
Hotspots/Annotations
NEW — Usage Analytics — track customizer opens, option selections, and add-to-cart clicks per product (GDPR-friendly aggregate data, no personal information stored)
NEW – Show / Hide steps based on the selected option
Upgrade to Premium
Inside WordPress admin, go to 3D Customizer → Account (added after activation).
Click Upgrade to Premium and complete the purchase on the checkout page.
Return to 3D Customizer → Account/Upgrade and enter your license key to activate.
Then in the same page download and activate the Premium version.
Alternatively, click the Upgrade to Premium button that appears inside any locked premium feature panel.
Display Methods & Hooks
The 3D Customizer provides three flexible ways to display the customizer on your product pages:
1. Automatic Display (Default)
The customizer is automatically displayed before the product summary.
Setting: 3D Customizer → Global Settings → Display Method → “Automatic (before product summary)”
No code required — it just works!
This only applies to the full customizer (canvas + steps). Products with
Viewer Only Mode enabled are never auto-placed — use the [dprcu-viewer]
shortcode, the 3D Viewer Only block, or the dprcu_display_customizer
hook to place them.
2. Manual
Setting: 3D Customizer → Global Settings → Display Method → “Manual”
Block (Gutenberg)
In FSE themes (Gutenberg) you can use the block 3D Product Customizer, or
the 3D Viewer Only block to show just the 3D canvas with no customization
steps, regardless of the product’s own Viewer Only Mode setting.
Shortcode Display
Display the customizer anywhere using the [dprcu-customizer] shortcode.
Usage:
[dprcu-customizer] — uses the current product
[dprcu-customizer id="123"] — uses a specific product ID
Perfect for custom layouts and page builders (Elementor, Divi, etc.)
To display just the 3D viewer with no customization steps — regardless of
the product’s own Viewer Only Mode setting — use [dprcu-viewer] instead:
[dprcu-viewer] — uses the current product
[dprcu-viewer id="123"] — uses a specific product ID
Manual Hook Display
Display the customizer using the dprcu_display_customizer action hook.
Usage in your theme template:
Source Code & Build Instructions
All source code is human-readable and included in this plugin.
The /js/ folder contains the original, uncompiled JavaScript source files:
customizer.js — Main 3D configurator frontend logic
viewer.js — Lean canvas-only frontend logic for Viewer Only Mode (no customization steps)
model-scanner.js — 3D model mesh detection and analysis
material-preview.js — Material preview rendering
ui.js — UI state management and interactions
Admin scripts in /admin/js/ — Dashboard-specific functionality
The /dist/ folder contains pre-compiled, production-ready bundles. These are generated by bundling the source files with their dependencies (three.js, pdf-lib, lucide) using Webpack. The /dist/ folder is auto-generated output and not part of the source code.
Rebuilding from Source:
This plugin uses Webpack to compile and minify JavaScript, bundling dependencies to keep the plugin size manageable (avoiding the need to distribute node_modules).
Requirements:
Node.js (v14 or newer)
npm (included with Node.js)
Build commands:
npm install Install dependencies from package.json
npm run dev Development build with watch mode (rebuilds on file changes)
npm run build Production build (minified and optimized)
Dependencies:
three.js — WebGL 3D rendering library (licensed under MIT)
jspdf — PDF generation for preview downloads (licensed under MIT)
lucide — Icon library (licensed under MIT)
webpack — Module bundler (licensed under MIT)
All original code is GPLv2 or later. Third-party dependencies follow their respective open-source licenses, listed in package.json.
External Services
This plugin integrates with Freemius for license management, automatic updates, and premium feature delivery:
Service: Freemius License Management
Server: https://freemius.com
Purpose: Validates premium licenses, manages plugin updates, delivers premium features, and provides usage analytics
Data Sent: Plugin activation events, license key validation, and anonymized usage analytics
Account Required: Optional — only if upgrading to Premium
Terms & Conditions
All other assets (JavaScript, CSS, images) are included locally within the plugin package. No other external services are used.
Documentation
For the developer documentation please visit this link.
Authors & Credits
Development: deosebIT Soft
This plugin was developed with attention to WordPress.org standards and is maintained by the deosebIT Soft team. For support, updates, and premium features, visit our website.
