MKL Product Configurator for WooCommerce – 2D & 3D Live Preview
Build 2D and 3D product configurators for WooCommerce. Customers design their product with a live visual preview, then add it to the cart.
4.8
(42 ratings)Will this break my store?
What the WordPress.org registry says about keeping MKL Product Configurator for WooCommerce – 2D & 3D Live Preview running.
Tested to 7.1.4
Tested against the WordPress branch in use today.2 days ago
At least 18.0 releases a year since launch. WordPress.org only lists versions still available for download, so the real number may be higher.7.4
Your host must be running at least this version.6.0
woocommerce
These must be installed and active first.2
Maintenance & trust
Scored on how MKL Product Configurator for WooCommerce – 2D & 3D Live Preview is looked after — not on how many stores run it.
98
out of 100Maintenance
35 / 35WordPress compatibility
20 / 20Support responsiveness
20 / 20Merchant satisfaction
13 / 15Listing transparency
10 / 10Ratings
4.8
42 ratingsProduct Configurator for WooCommerce turns any WooCommerce product into an interactive product builder. Every option a customer picks updates a live preview, so they see exactly what they are buying before they add it to the cart — in 2D or in 3D.
- 2D product configurator – Stack transparent image layers exported from Photoshop, 3D renders or product photography, across several views (front, side, back…).
- 3D product configurator – Upload a glTF / GLB model and let customers rotate, zoom and configure it in real time: show or hide parts, swap materials and colors, move components.
Add colors and swatches, conditional logic, pricing rules, form fields, file uploads and linked WooCommerce products, and replace hundreds of product variations and images with a single configurable product. Build a configurator once and share it across your whole catalog with global configurators and global layers.
No coding and no bulky setup: the configurator works with any WooCommerce theme, and everything is managed from a visual editor in the WordPress admin.
New in version 2: 3D configurator, global configurators and global layers. Read what’s new in v2
Perfect for:
- Bikes, bicycles and other vehicles
- Furniture, sofas and lighting
- Custom jewelry and watches
- Clothing, shoes and accessories
- Electronics, computers and simulators
- Industrial, B2B and made-to-order products
- Any product you sell in many combinations
🎮 Check out the live demos
🛠️ Set up a sandbox with admin access
Have feedback, ideas, or found a bug? Report issues on GitHub or use the support forum.
Features
2D and 3D visual configurators
- 2D Layered Images – Compose product previews from transparent PNG layers—no need to create an image for every combination.
- 3D Models – Configure glTF / GLB models in real time. Each choice can show, hide or move a part of the model, or change its material.
- Multiple Views – Show several angles of a 2D product, or saved camera views of a 3D model, each framing the part that matters.
- Realistic 3D Scenes – HDRI or cubemap environments, six light types, and soft or real-time shadows.
- Fast Loading – 3D scripts only load on products that use them, and secondary models can load on demand.
- Configuration Image in the Cart – The cart, orders and quotes show a picture of the configured product, in 2D or 3D.
- Live Text Overlay (via add-on) – Let customers preview custom text with your fonts and colors—ideal for engraving, embroidery, and personalization.
- 3D Premium (via add-on) – Clickable hotspots, model animations, augmented reality (“View in your space”), parts that snap onto anchors, and photo-style postprocessing.
Reuse configurators across your catalog
- Global Configurators – Share one configurator between many products. Edit it once and every product using it is updated. Assign it product by product or to whole categories, and detach a single product with “Make local copy” when it needs to differ.
- Global Layers – Build a layer once, such as a fabric range or a color palette, and import it into any configurator. Changes reach every product using it, and any product can disconnect to customize its own copy.
Create smart configuration flows
- Multi-Step Configurator – Split complex product builds into multiple steps for a guided product selection experience.
- Required Selections – Make sure customers choose an option before they can add the product to the cart.
- B2B – Compatible with quote plugins, tiered pricing and wholesale prices. A configured product keeps its choices, price and preview image in the quote, the cart and the order.
- Conditional Logic (via add-on) – Show/hide options dynamically depending on user selections. Perfect for complex logic flows.
- Form Fields (via add-on) – Let users enter text, numbers, or upload files—ideal for personalized orders.
Connect to WooCommerce
- Price per Option (via add-on) – Assign additional pricing to individual options (great for premium upgrades).
- Custom Pricing Formulas (via add-on) – Calculate advanced prices dynamically based on user input and selected options.
- Inventory & Stock Management (via add-on) – Track inventory per option inside the configurator, or by linking to actual WooCommerce products.
- Linked Products (via add-on) – Link any configurator choice to a real product in your WooCommerce shop:
- Add real components to the cart
- Track SKUs and inventory
- Support ERP/warehouse integration
- Build composite/bundled products
- Use or override linked product pricing
- Order Data Your Tools Can Read – Store the configuration as one plain-text order meta per layer, ready for exports, invoices and ERP integrations.
Ready for your shop
- No development required — works out of the box on any Woo store
- Multilingual – Compatible with WPML and Polylang, with translatable layers and choices.
- Developer Friendly – Includes hooks, filters, a JavaScript API, and a clean, commented codebase to adapt it to your needs.
- Accessible – Full keyboard use, including the 3D view, screen-reader friendly labels and live announcements, validation errors shown in-page with links to each field
Shortcodes
-
Configurator Button:
[mkl_configurator_button product_id=1 classes=”button primary”]
Optional content:
[mkl_configurator_button product_id=1]Button text[/mkl_configurator_button] -
Inline Configurator:
[mkl_configurator product_id=1 classes=”your-css-class”]
Configurator templates
- Includes 9 built-in high quality themes (see Screenshots)
- Easily create your own theme for full control
- Supports WordPress Customizer (Appearance > Customize) to change visual styles
Premium features
The core plugin is fully functional. Extend it with these premium features:
- 3D Premium – Hotspots, animations, augmented reality, parts that snap onto anchors and photo-quality rendering for 3D configurators
- Extra Price – Add custom pricing to options
- Save Your Design – Save feature – Let users save their designs
- Save Your Design – Share feature – Let users share their designs, copy a link or email their configuration
- Save Your Design – Presets feature – Create configuration presets for direct access
- Save Your Design – PDF download – Users can download their configuration as PDF
- Multiple Choice – Enable multi-select per layer
- Linked Products & Stock Management – Link options to WooCommerce products, track inventory, sync with ERP
- Conditional Logic – Build complex products: dynamically show, hide, or auto-select items based on conditions
- Form Fields – Add forms to collect extra input, upload files and perform price calculations
- Text Overlay – Let users preview personalized text in real time
💬 For custom development or tailored integrations, contact me here.
I just found the plugin, how do I use the configurator?
Watch the get started video on Youtube:
Not enough? Ask your questions on the support forum
Can I use 3D models? Which formats are supported?
Yes. Set the product’s Configurator type to “3D configurator” and upload a glTF model, as a .glb file, a .gltf file, or a .zip containing the .gltf file and its textures. Models compressed with Draco or Meshopt, and KTX2 textures, are supported through options in the settings.
The parts customers can configure must be separate, named objects in the model: choices are linked to those objects by name, and can show, hide or move them, or change their material.
Do I still need product variations?
No. A single product with a configurator replaces the variations and the images for every combination: customers pick their options and the preview is built from your layers or your 3D model. Prices, stock and SKUs per option are available with the Extra Price and Linked Products & Stock Management add-ons.
Variable products are supported too, if you need them: their variations can share one configurator or each have their own.
Can several products share the same configurator?
Yes, with global configurators. Build a configurator once under Product Configurator > Global configurators, or turn an existing product’s configurator into a global one, then assign it to products or to whole product categories. A change made to a global configurator applies to every product using it, and any product can be detached with “Make local copy”.
To share only part of a configurator, such as a fabric range, make a layer global and import it into other products.
Does it work with my theme or page builder?
Yes. By default the configurator opens from a “Configure” button that replaces the Add to cart button, which works with any WooCommerce theme. To embed the configurator in the product page, or anywhere else, use the [mkl_configurator] and [mkl_configurator_button] shortcodes in a block theme template, Elementor, Divi or any other page builder.
The configurator’s look comes from its own themes, which you can pick and adjust in the settings and the WordPress Customizer.
Can customers see the product in augmented reality?
Yes, with the 3D Premium add-on. Customers on a phone or tablet get a “View in your space” button that places the product, as they configured it, in their room through the camera. It uses AR Quick Look on iPhone and iPad, and WebXR in Chrome on ARCore Android devices. The site must be served over HTTPS.
How can I create a custom theme for the configurator?
Use the starter theme, which you can find on github with simple instructions to get started.
Is the product configurator compatible with WPML or Polylang?
Yes, the plugin is compatible with both, and will add localization for the layer and choice fields.
How can I optimize the layers in the configurator?
We recommend using a plugin such as WP-Optimize for all-round performance improvements:
Which open source libraries does the plugin use?
The product configurator plugin uses other Open Source libraries:
- PixiJS
- Three.js
- tippy and popper.js
- html2canvas.js
- download.js by dandavis
- Intervention/Image
Open Source SVG icons:
- Blender.org UI icons
- WordPress Gutenberg icons
Categories
Plugin details
Tags on WordPress.org
Alternatives
Other plugins in the same categories.
Advanced Product Fields (Product Addons) for WooCommerce
Smart Coupons For WooCommerce Coupons
YayPricing – WooCommerce Dynamic Pricing & Discounts
Product Addons for Woocommerce – Product Options with Custom Fields
Extra Product Options For WooCommerce | Custom Product Addons and Fields
