🎨 How to Configure the Variation Wizard

Build a multi-step guided configurator for your WooCommerce product using NP Variation Wizard slide types — color swatches, option buttons, image grids, text input, size & quantity, and order summary.

Understanding Product Modes: Simple 3D vs Full Wizard

Every NexPoint 3D product operates in one of two modes set in the NexPoint 3D Configurator metabox on the product edit page.

⚡ Simple 3D

Color ▾

Size ▾

Add to cart

Standard WooCommerce add-to-cart form. The 3D viewer renders alongside normal variant dropdowns and a single “Add to cart” button. Use this for products where a traditional shopping experience is preferred.

✨ Full Wizard

drag to rotate

Step 2 of 4

Logo Color

Black

← Back

Continue →

Replaces add-to-cart with a step-by-step wizard. The 3D viewer sits alongside a panel that guides the customer through each configuration step. Selections update the 3D model in real time. Ends with an order summary + Add to Cart.

💡 Custom Cap (view live example) uses Full Wizard mode with 4 steps: Main Color → Logo Color → Custom Text → Order Summary.

Enable Full Wizard Mode on the Product

Open the product in WP admin (Products → All Products → click the product name). Scroll to Meta Boxes → NexPoint 3D Configurator. Confirm 3D Viewer Enabled is on, then set Product Mode to Full Wizard.

Click Save before continuing to the wizard admin.

Open the NP Variation Wizard Admin

Go to NP Variation Wizard in the left sidebar. Select your product from the dropdown at the top to load its current wizard configuration. If no slides exist yet the canvas will be empty — click Add Slide to begin.

Choose and Configure Slide Types

Each slide becomes one step in the wizard. Click Add Slide and pick a type:

color

Color Swatches

Circular color pickers linked to a WooCommerce attribute. Each swatch can target one or more 3D material slots. Selecting a color live-updates the 3D model.

grouped

Option Buttons

Pill-style buttons for choices like style, finish, or material. Linked to a WooCommerce attribute.

image

Image Grid

Thumbnail grid of options. Ideal for pattern or logo selection — each image maps to an attribute value.

text

Custom Text / Engraving

A text input for personalisation — name, number, or message. Stored as an order line-item meta field.

size-qty

Size & Quantity

Per-size quantity table. Customers enter a quantity for each size they want. Running total updates in real time.

summary

Order Summary

Read-only review slide showing all selections and the final price. Always place this last — it contains the Add to Cart button.

Linking Color Slides to 3D Material Slots

For color slides, the 3D Material Slot field tells the viewer which part of the model to recolor when a swatch is selected:

Field	Description
Slide Title	Step heading shown to the customer — e.g. “Main Color”
WooCommerce Attribute	The PA attribute whose terms are the color options
3D Material Slot	GLB mesh material name(s) to update. For multi-zone coloring, comma-separate slot names — e.g. `Logo1,Logo1_All`

💡 Finding slot names: On the product edit page, scroll to NexPoint 3D — Material Slots & Attribute Overrides. Click any mesh on the 3D preview — its slot name is highlighted in the table below. For the Custom Cap, the slots are Logo1 and Logo1_All.

Reorder, Save and Preview

Drag slides to reorder them. Place the summary slide last. Click Save Configuration.

Click View product in the admin bar to see the wizard live. Customers see a progress indicator, mini selection pills, and Back / Continue navigation. The 3D model updates as they make choices. The Order Summary slide shows all picks and the Add to Cart button.

💡 Live example: Visit the Custom Cap product page to experience a 4-step Full Wizard: Main Color → Logo Color → Custom Text → Order Summary.

→ ← How to Set Up the 3D Viewer | Back to Documentation