Field Types
Image Select Field
Image select field — a visual pick-one selector with an image per option. Ideal for colour swatches, styles, and design choices.
When to use
- Colour or finish swatches
- Design / style previews
- Any pick-one choice that benefits from a thumbnail
The Color image-select field on the Premium Custom T-Shirt demo product — captured on the live Smart Add-Ons demo store.
Settings reference
| Setting | Description |
|---|---|
| Field label | The title customers see above the swatches. |
| Options & prices | One row per choice: Label (what customers see), Value (stored value, used in conditional rules), Swatch (an image from the Media Library, or a color) and Price. Click Add option for more rows. |
| Description | Optional help text shown below the field label on the product page. |
| Required field | Customers must choose a swatch before adding the product to cart. |
| Price type | Fixed amount or Percentage of product price. With percentage, each option’s Price is a % of the product price. See Pricing. |
| Quantity pricing | Per product quantity multiplies the price by the quantity ordered. Flat fee (once per line item) charges it once. |
| Conditional logic | Tick Enable conditional logic to show or hide this field based on another field in the same group. See Conditional logic. |
Order item meta
The selected swatch is stored on the order item:
Field label: "Colour"
Value: Navy
Price: +0.00How to add an image select field
- In WordPress, go to Smart Add-Ons → Add-On Groups and open a group, or click + Add group.
- Click + Add field.
- Enter a Field label and set Field type to Image selection.
- Under Options & prices, enter a Label, a Value and a Price for each choice.
- In the Swatch column, choose Image and pick a picture from the Media Library, or choose Color and set a color.
- Click Save group, then open a product the group applies to and check the field.
Example: color swatches on a T-shirt
A T-shirt store adds an image select field labelled “Color” with White (0), Black (0) and Navy (2), each with a color swatch. Customers click a swatch instead of reading a list, and choosing Navy adds 2 to the live price. The cart shows “Color: Navy”.
Image select FAQ
What image size should I upload?
Square images of about 300 × 300 pixels work well. Use WebP or compressed JPG so the product page stays fast.
Does choosing a swatch change the main product photo?
No. Add-on choices don’t change the product gallery. If the main photo must change, use WooCommerce variations for that attribute; see options vs variations.
Can I use plain colors instead of images?
Yes. Each option’s swatch can be an image or a color, and you can mix both in one field.