Appearance
Appearance settings
Match add-on fields on your product pages to your store’s brand: colors, type scale, and spacing. One settings page, applied store-wide.
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 it
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
Six hex color pickers. Accent colors are used for selected options, prices, and focus states.
| 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. |
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. There is no custom-CSS field on the Appearance screen itself.
.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-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.