Overriding Styles with CSS Custom Properties

The plugin defines all visual parameters as CSS custom properties on :root. Because custom property inheritance works from the cascade root downward, you can set them in your own stylesheet even though it loads before the plugin CSS — the plugin reads the current computed value at paint time, so your values win.

This is the lightest-weight customization path. No PHP, no module, no build pipeline change needed.

How it works

The plugin declares defaults like:

:root {
  --cart-border-radius: 0;
  --cart-submit-button-background-color: #009688;
}

Your stylesheet (loaded earlier) sets:

:root {
  --cart-border-radius: 8px;
  --cart-submit-button-background-color: #e53935;
}

The last :root declaration for a custom property wins — and since both are on :root with equal specificity, the order of the <link> tags decides. In that scenario the plugin would still win.

The correct approach is to set your overrides at a higher-specificity selector so they win regardless of load order:

html body {
  --cart-border-radius: 8px;
  --cart-submit-button-background-color: #e53935;
}

html body has specificity (0,0,2) — higher than :root's (0,0,1) — so your values always take precedence.

Why not !important?

!important on a custom property declaration works, but it makes future overrides (e.g. per-page overrides) very painful. Use increased specificity instead.

Cart CSS variables reference

html body {
  /* ── Typography ───────────────────────────────────────── */
  --cart-font-family: 'Inter', sans-serif;

  /* ── Colors ───────────────────────────────────────────── */
  --cart-error-color: #dc2626;
  --cart-text-color: #1f2937;
  --cart-background-color: #ffffff;

  /* ── Borders & Radius ─────────────────────────────────── */
  --cart-border-color: #e5e7eb;
  --cart-border-width: 1px;
  --cart-borders: var(--cart-border-width) solid var(--cart-border-color);
  --cart-border-radius: 12px;       /* main container */
  --cart-item-border-radius: 8px;   /* individual items */

  /* ── Remove Button ────────────────────────────────────── */
  --cart-remove-button-background-color: #ef4444;
  --cart-remove-button-text-color: #ffffff;
  --cart-remove-button-hover-background-color: #dc2626;
  --cart-remove-button-border-radius: 6px;

  /* ── Checkout / Submit Button ─────────────────────────── */
  --cart-submit-button-background-color: #3b82f6;
  --cart-submit-button-text-color: #ffffff;
  --cart-submit-button-hover-background-color: #2563eb;
  --cart-submit-button-disabled-background-color: #d1d5db;
  --cart-submit-button-disabled-text-color: #9ca3af;
  --cart-submit-button-height: 56px;
  --cart-submit-button-font-size: 16px;

  /* ── Continue Shopping Button ─────────────────────────── */
  --cart-shopping-button-text-color: #ffffff;
  --cart-shopping-button-background-color: #6b7280;
  --cart-shopping-button-hover-background-color: #4b5563;

  /* ── Coupon Section ───────────────────────────────────── */
  --cart-coupon-button-background-color: #8b5cf6;
  --cart-coupon-button-text-color: #ffffff;
  --cart-coupon-button-hover-background-color: #7c3aed;

  /* ── Item Card ────────────────────────────────────────── */
  --cart-item-background-color: #ffffff;
  --cart-item-border-bottom-color: #f3f4f6;

  /* ── Summary / Totals ─────────────────────────────────── */
  --cart-summary-background-color: #f9fafb;
  --cart-totals-border-color: #e5e7eb;

  /* ── Notice / Alert ───────────────────────────────────── */
  --cart-notice-text-color: #1e40af;
  --cart-notice-background-color: #dbeafe;
  --cart-notice-border-color: #93c5fd;
}

Checkout CSS variables reference

html body {
  /* ── Layout ───────────────────────────────────────────── */
  --layout-sidebar-width: 480px;

  /* ── Typography ───────────────────────────────────────── */
  --checkout-font-family: 'Inter', sans-serif;
  --checkout-heading-font-size: 28px;
  --checkout-heading-font-weight: 700;

  /* ── Colors ───────────────────────────────────────────── */
  --checkout-error-color: #ef4444;
  --checkout-text-color: #1f2937;
  --checkout-background-color: #ffffff;

  /* ── Method Selection (radio options) ─────────────────── */
  --checkout-method-selection-background-color: #dbeafe;
  --checkout-method-selection-border-color: #93c5fd;
  --checkout-method-default-background-color: #f9fafb;

  /* ── Borders & Radius ─────────────────────────────────── */
  --checkout-border-color: #e5e7eb;
  --checkout-border-width: 1px;
  --checkout-borders: var(--checkout-border-width) solid var(--checkout-border-color);
  --checkout-border-radius: 16px;
  --checkout-input-border-radius: 8px;

  /* ── Place Order Button ───────────────────────────────── */
  --checkout-submit-button-background-color: #3b82f6;
  --checkout-submit-button-text-color: #ffffff;
  --checkout-submit-button-hover-background-color: #2563eb;
  --checkout-submit-button-disabled-background-color: #d1d5db;
  --checkout-submit-button-disabled-text-color: #9ca3af;
  --checkout-submit-button-height: 56px;
  --checkout-submit-button-font-size: 16px;

  /* ── Form Inputs ──────────────────────────────────────── */
  --checkout-input-background-color: #ffffff;
  --checkout-input-border-color: #d1d5db;
  --checkout-input-text-color: #1f2937;
  --checkout-input-height: 44px;
  --checkout-input-padding: 12px 16px;
  --checkout-input-font-size: 15px;

  /* ── Card / Section ───────────────────────────────────── */
  --checkout-card-background-color: #ffffff;
  --checkout-card-shadow: 0 10px 30px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.05);

  /* ── Notice / Alert ───────────────────────────────────── */
  --checkout-notice-text-color: #1e40af;
  --checkout-notice-background-color: #dbeafe;
  --checkout-notice-border-color: #93c5fd;

  /* ── Totals Section ───────────────────────────────────── */
  --checkout-totals-border-color: #e5e7eb;
  --checkout-totals-label-font-size: 15px;
  --checkout-totals-value-font-size: 15px;
  --checkout-totals-grand-font-size: 18px;
  --checkout-totals-grand-font-weight: 700;
}

Practical example — match your brand

Suppose your brand is navy + coral. Drop the following block anywhere in your main stylesheet:

/* assets/css/theme.css */

html body {
  /* Brand palette applied to cart & checkout */
  --cart-submit-button-background-color: #ff6b6b;
  --cart-submit-button-hover-background-color: #e05555;
  --cart-coupon-button-background-color: #1a3a5c;
  --cart-coupon-button-text-color: #fff;
  --cart-border-radius: 6px;
  --cart-item-border-radius: 6px;
  --cart-border-color: #c8d6e5;
  --cart-summary-background-color: #f0f4f8;

  --checkout-submit-button-background-color: #ff6b6b;
  --checkout-submit-button-hover-background-color: #e05555;
  --checkout-border-radius: 6px;
  --checkout-input-border-radius: 4px;
  --checkout-input-border-color: #c8d6e5;
  --checkout-card-background-color: #f8fafc;
  --checkout-card-shadow: 0 4px 12px rgba(26,58,92,.08);
}

No specificity fights, no asset bundle ordering issues — just variables.

Scoping overrides to a specific page

Need different colors on the cart page versus the checkout page? Scope the variable block to a body class:

/* Cart page only */
body.yui-cart-page {
  --cart-submit-button-background-color: #ff6b6b;
}

/* Checkout page only */
body.yui-checkout-page {
  --checkout-submit-button-background-color: #22c55e;
}

Check your layout template to see which body class the plugin adds, or add your own via Twig:

{# templates/_layout.twig #}
<body class="{{ craft.app.request.pathInfo | replace('/', '-') | trim('-') }}">

When CSS variables are not enough

Variables control visual appearance only. They cannot:

• Change which HTML elements are rendered
• Reorder sections (e.g. move the totals above the item list)
• Add new DOM elements (e.g. a trust badge next to the checkout button)

For structural changes, see Override Twig Templates. For rules that cannot be expressed as a variable (e.g. overriding a specific hover animation), use Theme Override via Event to inject CSS that loads after the plugin.