Swatches & quantity
Show variation options as swatches and add plus/minus buttons to the quantity field.
- Size options shown as swatches
- The − 1 + quantity stepper next to Add to cart
Swatches
| Setting | Default | Options |
|---|---|---|
| Show variation swatches | On | Turns each option dropdown in the modal into swatches |
| Swatch type | Automatic | Automatic (color dots for colors, labels otherwise), Variation images where available, Text labels only |
| Show the chosen value next to the option name | On | "Color: Blue" |
| Swatches added by another plugin | Replace them inside quick view | Or keep them (no Pro swatches for those options) |
| Unavailable combinations | Crossed out | Crossed out, Faded, Hidden |
- Color dots are used for values that are color names or codes, such as "Blue" or "#1e40af".
- Variation images suit one option that changes the product's look, such as a pattern. Products with more than 30 variations fall back to Automatic.
- Clicking the chosen swatch clears it. Clicking an unavailable swatch clears the other options and picks it, so shoppers are never stuck. Arrow keys move between swatches.
- The original dropdown stays in the form (hidden), so WooCommerce's own variation handling, prices and stock keep working.
- Other swatch plugins often don't work inside a modal. "Replace" hides them in the modal only; product pages are unaffected.
Swatch appearance
| Setting | Default |
|---|---|
| Size (px) | 36 (24–64) |
| Selected outline · Border | #2563eb · #d1d5db |
Corners follow the modal shape.
Quantity stepper
| Setting | Default |
|---|---|
| Show plus/minus buttons | On. Respects each product's minimum, maximum and step (the buttons disable at the limits); hidden when Free's Show quantity field is off |
| Height (px) | 44 (32–60) |
| Button background · Button icon · Border | #f3f4f6 · #111827 · #d1d5db |