Store-wide, not per product. Appearance is a single global setting. There is no per-product or per-group override — a change here restyles every add-on field and panel on every product page.

Where to find Appearance settings

Go to Smart Add-Ons → Appearance in wp-admin. Any user who can manage WooCommerce can open it. The page has a live preview panel that updates as you change settings; click Save appearance to apply them on the storefront, or Reset to defaults to restore the built-in values below.

Brand colors

Eight hex color pickers, across two sections. Accent colors are used for selected options, prices, and focus states; the two background colors set the panel and field surfaces.

Setting	Default	Used for
Accent	`#00a3a3`	Primary highlight: selected options, prices, and focus.
Accent hover	`#008585`	Hover and pressed state of the accent color.
Selected background	`#effafb`	Soft fill behind a selected option.
Text	`#0f172a`	Primary field and panel text.
Muted text	`#64748b`	Secondary labels, help text, and captions.
Borders	`#e2e8f0`	Field, group, and panel borders.
Panel background	`#fafbfc`	Background of the add-on panel itself.
Field background	`#ffffff`	Background of individual fields inside the panel.

Typography

Type scale, label weight, and an optional font family. Leave font family empty to inherit the theme’s font.

Setting	Options
Type scale	Compact, Default, or Comfortable — a preset bundle of seven font sizes (eyebrow, title, heading, label, body, caption, price).
Label weight	Medium (`500`), Semibold (`600`, default), or Bold (`700`).
Font family	Optional free-text CSS font-family, for example `"Inter", system-ui, sans-serif`. Empty inherits the theme.

Type scale sizes

Role	Compact	Default	Comfortable
Eyebrow	`0.6875rem`	`0.75rem`	`0.8125rem`
Title	`1rem`	`1.125rem`	`1.25rem`
Heading	`0.875rem`	`0.9375rem`	`1.0625rem`
Label	`0.75rem`	`0.8125rem`	`0.875rem`
Body	`0.8125rem`	`0.875rem`	`1rem`
Caption	`0.6875rem`	`0.75rem`	`0.8125rem`
Price	`0.75rem`	`0.8125rem`	`0.875rem`

Layout

Spacing density and an optional maximum width for the add-on panel on product pages.

Setting	Options
Density	Compact, Default, or Comfortable — a preset bundle of five spacing values (field, group, and panel spacing, textarea min-height, and control height).
Max panel width	Optional free-text CSS length, for example `42rem`, `640px`, or `100%`. Empty defaults to `100%`.

Density spacing

Token	Compact	Default	Comfortable
Field spacing	`0.5rem`	`0.625rem`	`0.75rem`
Group spacing	`0.75rem`	`1rem`	`1.25rem`
Panel spacing	`0.75rem`	`0.875rem`	`1rem`
Textarea min-height	`4.5rem`	`5.5rem`	`6.5rem`
Control height	`2.25rem`	`2.5rem`	`2.75rem`

How it is applied

Saved settings compile into CSS custom properties scoped to .saue-addon-wrapper, the wrapper around every add-on field and panel on the storefront. Because that class is on every product that shows add-ons, the same tokens apply store-wide.

To override a token from a child theme or custom CSS plugin, target that wrapper with a standard CSS custom property (opens in new tab) — there is no custom-CSS field on the Appearance settings screen itself.

theme.css

.saue-addon-wrapper {
  --saue-accent: #1d4ed8;
  --saue-accent-dark: #1e40af;
}

CSS custom properties

Property	Source
`--saue-accent`	Accent
`--saue-accent-dark`	Accent hover
`--saue-accent-soft`	Selected background
`--saue-text`	Text
`--saue-text-muted`	Muted text
`--saue-border`	Borders
`--saue-surface`	Panel background
`--saue-surface-elevated`	Field background
`--saue-font-family`	Font family, or inherit
`--saue-font-size-*`	Type scale (eyebrow, title, heading, label, body, caption, price)
`--saue-font-weight-label`	Label weight
`--saue-space-field`, `--saue-space-group`, `--saue-space-panel`	Density spacing
`--saue-control-height`, `--saue-textarea-min-height`	Density control sizes
`--saue-panel-max-width`	Max panel width, or 100%

The same settings are readable and writable over REST at GET / PUT /saue/v1/appearance (admin-only, manage_woocommerce). See the REST API reference.

← File uploads

Next: Licensing →