How to Add Custom CSS in WordPress (2026): Block Themes, Classic Themes & WooCommerce

Custom CSS lets you adjust colours, spacing, fonts and layout beyond what your theme settings allow. Where you add it in 2026 depends on whether you use a block theme or a classic theme.

Method 1: Block themes — Site Editor Additional CSS

1. Go to Appearance → Editor.
2. Open Styles, click the three-dot menu (or the Styles panel options) and choose Additional CSS.
3. Paste your CSS and Save. It applies site-wide.

Inside Styles → Blocks you can also add CSS that applies only to a specific block type.

Method 2: Classic themes — the Customizer

1. Go to Appearance → Customize.
2. Open Additional CSS.
3. Add your CSS; the preview updates live. Click Publish.

CSS added here is stored separately from the theme, so it survives theme updates (but not a theme switch).

Method 3: A child theme stylesheet

For larger amounts of CSS, create a child theme with its own style.css. This keeps code in version control and survives parent theme updates. Never edit the parent theme’s files directly — updates overwrite them.

Method 4: Per-block Additional CSS class

Select any block, open Advanced → Additional CSS class(es), add a class like promo-box, then style .promo-box using method 1, 2 or 3.

Styling WooCommerce with CSS

Common targets include buttons, prices and notices. For example:

.woocommerce .price { color: #1a7f37; font-weight: 600; }
.wc-block-components-button { border-radius: 8px; }

Use your browser’s Inspect tool to find the exact class names, as block-based checkout uses different classes from classic shortcode pages. Plugins like Custom Product Builder for WooCommerce also expose classes you can style to match your theme.

Best practices

• Keep CSS specific — avoid !important unless necessary.
• Test on mobile and after theme updates.
• Comment your CSS so you remember why each rule exists.
• Clear caching/minification plugins after changes.

Frequently Asked Questions

Where do I add custom CSS in a WordPress block theme?

In a WordPress block theme, add custom CSS under Appearance → Editor → Styles → Additional CSS. It applies site-wide and survives theme updates.

Where is Additional CSS in a classic WordPress theme?

In a classic WordPress theme, go to Appearance → Customize → Additional CSS, add your rules and click Publish.

Will my custom CSS be lost when I update my theme?

Custom CSS added through Additional CSS or a child theme is kept when the parent theme updates. CSS edited directly in the parent theme’s files is overwritten.