Skip to main content
All Unwan presentation lives in one file, assets/css/unwan.css. There is no inline styling generated by JavaScript and no styles injected any other way — if you want to change how something looks, this file (or your own CSS loaded after it) is the only place that matters.

​
How the isolation works

Both address-list surfaces (#unwan-account-list and the checkout picker roots) are rooted at stable IDs, not just classes. That ID gives Unwan’s reset and component rules enough specificity to beat broad theme and WooCommerce selectors without reaching for !important anywhere. Reset rules (box sizing, margins, padding, borders, backgrounds, shadows, appearance, typography, alignment, text transforms) load first; every rule that restores real presentation has strictly greater specificity than the reset. The stylesheet is also enqueued late in the normal frontend lifecycle, so it follows typical theme styles in the cascade rather than fighting to load first. The practical result: broad theme rules (button { ... }, input { ... }, aggressive resets) mostly can’t leak into the picker, but the DOM stays fully inspectable and overridable — nothing is hidden behind a Shadow DOM boundary.

​
CSS variables

There are no separate hover-color tokens. Hover states are derived directly from --unwan-color-accent with color-mix(), and 5%/10% surfaces use rgba(var(--unwan-color-accent-rgb), …). If you override the accent, update the hex and the RGB-channel token together, or hover/alpha surfaces will fall out of sync with the base color.
Spacing and other component-specific values are ordinary rules in the stylesheet rather than public variables. Scope any deeper override with the stable root ID plus the relevant BEM class, loaded after Unwan’s stylesheet.

​
Markup structure

The picker is standard light-DOM HTML — <div>/<span> for structure, <button type="button"> for every action and address option, role="radio" / aria-checked on options, full arrow/Home/End keyboard support. It registers no custom element and creates no Shadow DOM. Checkout and My Account share .unwan-address-list, .unwan-address-search, .unwan-address-item, and their BEM elements. Checkout alone adds .unwan-address-item__control (the radio indicator); My Account alone adds .unwan-address-item__menu (the three-dot action menu). Every address item has no enforced minimum height and uses 12px 16px padding. See the JavaScript API for the picker’s mount/update/destroy controller, and the Hooks Reference for filtering the data these templates render from.

Related topics

JavaScript APIAppearance & ThemingArchitectureChangelogFAQ & Troubleshooting