Woo Custom SASS/CSS

WooCommerce layout and style editor for custom themes. Adds a Custom CSS tab under WooCommerce → Settings with sections for shop/category styling, layout, cart, checkout, theme hooks and free-form CSS.

Settings live at WooCommerce → Settings → Custom CSS.

How styling works

Every setting maps to a CSS custom property. The stylesheet (assets/frontend/css/woocommerce.css) is plain CSS and ships with a modern default for each property, so the plugin produces a complete, contemporary WooCommerce look with zero settings saved. Saving a setting emits only that one property into a :root{} block injected ahead of the stylesheet.

option  ──▶  WOOCUSTOMOPTION (read + sanitise)
        ──▶  WOOCSSVARIABLE  (build :root{} block)
        ──▶  wp_add_inline_style( 'woocustommincss', … )
        ──▶  woocommerce.css  var(--woo-x, <modern default>)

Nothing is compiled and nothing is written to disk at runtime.

Styling from a theme

The stylesheet's own tokens are overridable, so a theme can restyle the plugin without touching the settings screen:

:root {
    --woo-accent: #7c3aed;
    --woo-radius: 4px;
    --woo-card-border: 1px solid #e5e7eb;
}

Or filter the generated properties in PHP:

add_filter( 'woocustomcss_css_variables', function ( $properties ) {
    $properties['--woo-sale-bg'] = '#111827';
    return $properties;
} );

Sections

Sections are ordered the way a theme gets built: global foundations, then structure, then per-page styling in the order a customer walks the store, then behaviour, then raw CSS.

Extra CSS

Three editors. The global one applies everywhere; the tablet and mobile ones are wrapped in @media (max-width: 991.98px) and @media (max-width: 575.98px) automatically, so write plain rules with no media query. They are emitted global → tablet → mobile, so the narrower block wins on equal specificity. Breakpoints match the stylesheet's.

A block whose braces do not balance is dropped rather than printed — an unclosed { would otherwise swallow every rule after it. Override design tokens from here too:

:root { --woo-accent: #7c3aed; --woo-sale-bg: #111827; }

Markup support

WooCommerce catalogue cards come in three shapes, and the plugin covers all three:

1. Classic — ul.products > li.product (WooCommerce's own content-product.php)
2. Theme override — a theme's own card markup, e.g. div.card-product
3. Product Collection block — ul.wc-block-product-template > li.wc-block-product

Shapes 2 and 3 fire none of the classic loop hooks, so:

• the "hide X" toggles apply the template unhook and a body-class CSS fallback
• the image hover swap collects gallery URLs on the_post (which all three run through) and overlays a second image via JS, rather than re-rendering the thumbnail — which used to duplicate the image on block shops

Tests

php tests/test-css-vars.php

Covers the option → custom-property pipeline: unset options must emit nothing (so the stylesheet fallback wins), unit/border validation, responsive column clamping, custom-CSS assembly and brace balancing, and that a hostile option value cannot break out of the `