WooCommerce adds an entire layer of color needs on top of your base WordPress palette. Product badges, pricing displays, cart interactions, stock indicators, and checkout flows each require specific color decisions that should flow from your PaletteRx palette.
Sale and Promotion Badges
WooCommerce's sale badge defaults to a simple "Sale!" overlay. Most themes style this as a bright red or warm accent badge. Use your warm accent or a dedicated promotional color from your extended palette. The badge must be visible without being garish: positioned consistently, sized modestly, and colored distinctly.
Add to Cart Button
The single most important button in WooCommerce. Use your primary CTA color (your PaletteRx primary or a warm accent). This button appears on category pages (smaller, on each product card) and product pages (larger, prominent). Both instances should use the same color for consistency.
Stock and Availability
"In Stock" (green), "Low Stock" (amber), "Out of Stock" (red/gray). These status indicators follow the same semantic color conventions used throughout your design system. WooCommerce displays these near the Add to Cart button, so ensure they do not visually compete with the CTA.
Cart and Checkout
The cart page and checkout flow should progressively reduce visual noise. The checkout page, especially, should feel clean and trustworthy: your light base background, minimal color, and a clear "Place Order" button in your primary CTA color. Reduce cognitive load at the moment of payment.
CSS Variable Integration
Add PaletteRx's CSS Variables to your theme. Override WooCommerce's default colors in your child theme or custom CSS: .woocommerce .button { background-color: var(--color-primary); } This ensures every WooCommerce element uses your validated palette instead of theme defaults.