🎨 Variation Wizard — Series 1 of 7
The NP Variation Wizard replaces the standard WooCommerce add-to-cart form with a guided, step-by-step product configurator. Instead of dropdowns and a single button, customers move through a multi-slide wizard where each step represents one product decision — color, style, size, personalization — with the 3D model updating live as they choose.
How to Get There
WordPress Admin
→
NP Variation Wizard
The admin page lists products that have wizard configurations. Select a product to open its wizard builder.
Required Setup First
- The product must have NP 3D Viewer enabled and a model assigned.
- Set Product Mode → Full Wizard in the NexPoint 3D Configurator metabox on the product edit page.
- The product needs WooCommerce attributes created (e.g.
pa_color,pa_size) with terms that match your wizard options.
Building a Wizard
| Step | What to Do |
|---|---|
| 1 | Open NP Variation Wizard admin → select your product |
| 2 | Click Add Slide and choose a slide type |
| 3 | Configure the slide (title, attribute, slot if color) |
| 4 | Repeat for each step in the customer journey |
| 5 | Drag slides to reorder them — the order here = step order on the frontend |
| 6 | Add a Summary slide as the final step |
| 7 | Save and preview on the product frontend |
The 6 Slide Types
| Type | What It Collects |
|---|---|
color | Color swatch selection, updates 3D material slots live |
grouped | Style/option pill buttons, linked to a WooCommerce attribute |
image | Image grid selection, linked to a WooCommerce attribute |
text | Custom text or engraving input, stored as order meta |
size-qty | Per-size quantity table for bulk or multi-size orders |
summary | Read-only review of all selections + Add to Cart button |
Frontend Result
Full Wizard mode — 3D viewer + wizard panel side by side
3D Viewer (live updates)
Step 2 of 4
Logo Color
← Back
Continue →
Ready to add 3D to your WooCommerce store?
Get the NP Matrix plugin suite or try it instantly — no install required.
The playground runs entirely in your browser — no account needed.