NP Matrix: Setting Up WooCommerce Attributes for the Variation Wizard

The NP Variation Wizard reads options from WooCommerce product attributes. Each wizard slide maps to an attribute (e.g. pa_color, pa_size). Setting up the right attributes before building your wizard slides ensures the wizard pulls the correct options and terms.

Step 1 — Create Global Attributes

1. Go to WooCommerce → Attributes in the WordPress admin sidebar
2. Fill in the Name (e.g. Color) — WooCommerce auto-generates the slug as pa_color
3. Set Type to Select (default) for most wizard slides
4. Click Add attribute
5. Click Configure terms to add the individual options (e.g. Red, Blue, Navy)

Step 2 — Add Color Swatches to Terms

For color slides, each term needs a hex color value so the Variation Wizard can render a color swatch instead of a plain button. After adding terms:

1. Click on a term name (e.g. “Red”) to edit it
2. Look for the Color field added by the NP Variation Wizard
3. Enter a hex value (e.g. #cc2200)
4. Click Update

Step 3 — Link Attributes to the Product

1. Open the product in the WordPress editor
2. Go to the Product data panel → Attributes tab
3. From the dropdown, select your global attribute (e.g. Color) and click Add
4. Tick all terms you want available on this product
5. Check Used for variations if using variable products
6. Click Save attributes

Attribute Reference