Letting customers rotate a product, change its color, swap materials, and see the result in real time turns a flat product page into something closer to holding the item in their hands. It also cuts returns and raises confidence at checkout. This guide shows you how to add a 3D configurator to WooCommerce — what you need, the options available, and a step-by-step setup using a model uploaded straight from the product editor, no developer required.
What a 3D product configurator actually does
A 3D product configurator replaces (or sits alongside) your static product images with an interactive 3D model. Customers can rotate and zoom it, and — this is the part that drives sales — change it: pick a paint color, switch upholstery, toggle between component options, choose a finish. The model updates instantly, and the chosen configuration is saved with the order so you know exactly what to make or ship.
It is the difference between selling “a chair, available in 5 fabrics” as five thumbnail swatches and letting the customer build the exact chair they want and watch it appear.
What you need before you start
Three things:
- A WooCommerce store. A working WordPress site with WooCommerce installed and active.
- A 3D model in GLB format. GLB is the standard for web 3D — a single file holding geometry, materials, and textures. You can export one from Blender, commission a 3D artist, buy one from a marketplace, or generate one from a 3D scan. Keep it optimized for the web so it loads fast; an unoptimized model is the most common cause of a sluggish configurator.
- A configurator plugin. The piece that turns the GLB into an interactive, customizable viewer inside WooCommerce. This is where your options diverge.
Your options for adding a configurator
There are broadly three routes, with very different cost and effort:
1. Custom development
Hire a developer to build a viewer with Three.js or Babylon.js and wire it into WooCommerce. Total control, but expensive, slow, and you own the maintenance forever. Rarely justified unless your needs are genuinely unusual.
2. Hosted SaaS platforms
Services like Threekit, Zakeke, and similar host the configurator and charge a recurring subscription, often scaling with traffic or product count. Powerful, but you pay monthly indefinitely, your 3D assets live on their servers, and costs grow with your store.
3. A WooCommerce plugin
A plugin runs the configurator inside your own WordPress install. You upload your GLB, configure options through the admin, and the viewer appears on the product page. No monthly platform fee, no third-party hosting your models. For most stores this is the simplest and most cost-effective route — and it is the one this guide walks through.
Step by step: adding a configurator with a plugin
The following uses the 3D Product Customizer for WooCommerce, a free plugin that handles upload, customization, and AR. The general flow is similar for any well-built configurator plugin.
Step 1 — Install the plugin
In WordPress, go to Plugins → Add New, search for “3D Product Customizer,” install and activate. It adds a 3D section to your WooCommerce product editor.
Step 2 — Upload your GLB model
Edit the product you want to make configurable. In the product editor’s 3D panel, upload your .glb file. The plugin registers the GLB MIME type with WordPress so it uploads through the standard Media Library, and it reads the model’s full mesh structure automatically on upload — no manual tagging of parts.
Step 3 — Create customization steps
A step is a choice you offer the customer — “Body color,” “Upholstery,” “Base.” For each step, you assign the materials or options the customer can pick. Because the plugin already detected every mesh in the model, you simply choose which part each step affects and which finishes to offer. Materials use physically based rendering, so colors, metals, and woods react to light realistically.
Step 4 — Configure options and pricing
Each option can do more than change appearance. You can show or hide geometry — for example, switch a chair between fixed legs and a wheeled base by showing one mesh and hiding the other. Options can also carry a price modifier, so a premium leather or a metal base adds to the product total automatically and flows into the WooCommerce order. No separate product variations to manage.
Step 5 — Choose how it displays
Good configurator plugins do not lock you to one theme. This one offers a few ways to display it: automatic placement before the product summary, a shortcode you can drop into Elementor, Divi, or any page builder, and a manual hook for custom theme templates. Pick whichever fits your setup.
Step 6 — Enable AR (optional)
Let customers view the product at real-world scale on their phone. AR works through Quick Look on iOS and WebXR on Android, with a single button on the product page. For furniture and larger items, true-to-scale AR is one of the strongest confidence drivers before purchase.
Step 7 — Test the full flow
Open the product as a customer would. Rotate the model, run through each step, confirm the materials and any priced options behave correctly, and place a test order to verify the chosen configuration is saved to the order details. The selection should appear as line-item meta on the order and in order emails, so fulfillment knows exactly what was configured.
Getting it right: a few practical tips
- Optimize the model first. A large GLB makes the configurator feel slow regardless of how good the plugin is. Compress geometry, resize textures, and serve the file efficiently before uploading.
- Start with one product. Configure a single product end to end before rolling it out across the catalog. You will learn the workflow fast.
- Name options clearly. “Brushed Metal” beats “Option 3.” Customers see these labels.
- Keep steps logical. Order them the way a customer thinks about the product — big decisions first, finishes last.
See it working before you build
The fastest way to understand what is possible is to use a live configurator yourself. We have built interactive demos — a car with priced paint options, a multi-step chair, a shoe, and more — that run exactly as they would on a real store. Explore the live demos and full plugin features, or install the 3D Product Customizer free from WordPress.org and add your first configurable product today.
