Adding Custom CSS

5 min readUpdated October 31, 2026

The Advanced CSS box lets you change anything about the portal’s look that the settings do not cover: fonts, spacing, the account menu, single colours in one mode only. It loads only on the portal’s pages and is printed after all of the portal’s own styles, so you rarely need !important.

Add your CSS#

Go to WooCommerce > Account Portal > Appearance and scroll to section 8, Advanced CSS.
Paste your CSS into the box. Write plain CSS rules only: no <style> tags.
Click Save Settings.
Open My account on the front end (logged in, and logged out for the login page) and check the result in light and dark mode, on a computer and on a phone.

Advanced CSS box on the Appearance tab with a --wap-font line and a menu link rule

Tip

Scope every rule to the portal with .wap-portal-body (the class on the portal’s <body>). It keeps your CSS from touching anything else and gives your selectors enough weight to beat the portal’s defaults.

Where your CSS is printed#

The portal loads assets/css/portal.css on account pages, then adds one inline style block right after it. That block is built in this order, and later rules win over earlier ones with the same selector weight:

The brand colour variables on :root (--wap-primary, --wap-secondary and their shades, --wap-logo-max-h).
The theme style colours (Clean Light or Deep Dark) and any colours picked in Fine-tune colours.
The button radius from Buttons (--wap-btn-radius).
The mobile layouts for the downloads and orders tables (Downloads Table (Mobile) and Orders Table (Mobile) on the General tab).
The Brand theme CSS, when you use Brand theme with AI.
Your Advanced CSS, last.

Things to know:

Only portal pages. The CSS loads on the My account page (the account area and the login page), not on the rest of your site. It does not load on pages listed in Excluded Pages on the General tab.
Selector weight still counts. Being last only wins a tie. If the portal’s rule is more specific than yours, match its selector (see the menu link example below). A few icon and table rules use !important; to change those, you need !important too.
Media queries. Rules that the portal sets inside @media (max-width: 768px) or @media (min-width: 769px) need the same media query in your CSS when your selector is equally specific, or yours will apply on every screen size.
Cleaning on save. Style and script tags, expression( and javascript: are removed when you save. Everything else is kept as you typed it.
Export / Import. Your Advanced CSS is included when you export the settings and is cleaned the same way on import.
Caching. If you use a page cache or a CSS optimisation plugin, clear it after saving.

CSS variables#

Most of the portal’s colours, sizes and fonts come from CSS variables named --wap-*. Changing a variable is usually safer than overriding individual rules, because every element that uses it follows. The ones you will reach for most:

Variable	What it controls
`--wap-primary`	Main brand colour: buttons, active menu item, login panel. Set from Brand colours.
`--wap-primary-rgb`	The primary colour as `R,G,B`, used for soft tints (`rgba(var(--wap-primary-rgb), 0.1)`).
`--wap-primary-light`, `--wap-primary-dark`	Lighter and darker shades: active menu text in dark and light mode.
`--wap-secondary`, `--wap-secondary-rgb`	Secondary brand colour, also used for links.
`--wap-bg`	Page background.
`--wap-surface`, `--wap-surface-2`	Menu (sidebar) background and its second shade.
`--wap-card-bg`, `--wap-card-br`	Card background and border.
`--wap-on-bg`, `--wap-on-s`, `--wap-on-s2`	Main text, menu and body text, muted text.
`--wap-nav-hover`, `--wap-nav-active`, `--wap-nav-color`	Menu item hover background, active background and active text.
`--wap-menu-bg`	Background of every account menu style (falls back to `--wap-surface`).
`--wap-font`	Font for the whole portal (the visitor’s system font by default).
`--wap-btn-radius`	Button corner radius, set from Buttons.
`--wap-logo-max-h`	Logo max height, set from Logo max height (80px by default).
`--wap-sidebar-w`	Sidebar width on computers (280px).
`--wap-radius-sm`, `--wap-radius-md`, `--wap-radius-lg`	The corner radius scale (8, 12 and 16px) used by notices, cards and panels.

The full list, with defaults for light and dark mode, is in CSS Variables Reference in the Developers section.

Warning

--wap-primary-rgb, --wap-primary-light and --wap-primary-dark are worked out from your primary colour when the page is built. If you change --wap-primary in CSS, set those three as well, or simply change the colour in Brand colours instead.

Body classes#

The portal prints its own <body> tag, so your theme’s body classes are not there. Use these instead:

Class	When it is present
`wap-portal-body`	Always, on every portal page (logged in or not).
`wap-mode-light` / `wap-mode-dark`	The mode the visitor is seeing right now.
`wap-mode-auto`	Only in the page source when the default mode is Auto. A small script replaces it with `wap-mode-light` or `wap-mode-dark` (from the device setting) before the page is drawn, so do not use it for styling.
`wap-navd-sidebar`, `wap-navd-top`, `wap-navd-rail`, `wap-navd-dock`	The account menu style on computers and tablets (769px and wider). Logged-in pages only.
`wap-navm-drawer`, `wap-navm-tabbar`	The account menu style on phones (768px and narrower). Logged-in pages only.

The <html> element also carries data-wap-mode (light or dark, the mode shown) and data-wap-choice (light, dark or auto, the visitor’s choice), plus dir="rtl" on right-to-left sites.

Note

To style one mode only, use two classes, for example .wap-portal-body.wap-mode-dark. The theme styles and the Brand theme use the same two-class selectors, and your CSS comes after them, so it wins.

Examples#

Use your own font#

The portal loads no web fonts. Load the font in your theme (self-hosted is best for GDPR), then point the portal at it:

:root {
  --wap-font: "Inter", system-ui, sans-serif;
}

Change the page background in dark mode only#

.wap-portal-body.wap-mode-dark {
  --wap-bg: #0b0d12;
  --wap-card-bg: #161a22;
}

Give the account menu its own colour in light mode#

.wap-portal-body.wap-mode-light {
  --wap-menu-bg: #f3f1ff;
}

Keep the menu text readable: in light mode the menu text uses --wap-on-s and the active item uses --wap-nav-color.

Larger, bolder menu links#

.wap-portal-body .wap-nav-link {
  font-size: var(--wap-fs-base);
  font-weight: 600;
  letter-spacing: 0.01em;
}

The Top tabs style sets its own link padding inside a media query, so padding changes here only affect the sidebar, rail and phone menus. To change the top tabs too, target .wap-portal-body.wap-navd-top .wap-nav-link inside @media (min-width: 769px).

Use the secondary colour for the active menu marker#

The active item in the sidebar has a thin bar on its inner edge (a bar under the tab with Top tabs):

.wap-portal-body .wap-nav-item--active::before {
  background: var(--wap-secondary);
}

Square cards and panels#

.wap-portal-body {
  --wap-radius-sm: 4px;
  --wap-radius-md: 4px;
  --wap-radius-lg: 6px;
}

For buttons, use Appearance > Buttons rather than CSS.