Appearance & Styles
In WooCommerce → Discount Rules Box → Appearance you can brand the buy box with one click or fine-tune every color and corner radius.
Style Presets (Quick Themes)
Click any preset to instantly apply a curated palette and corner radius style:
| Preset | Primary | Button text | Best value | Card bg |
|---|---|---|---|---|
| Warm Rose Gold (Default) | #c49186 | #ffffff | #7e4e45 | #fdf8f6 |
| Amazon Orange | #ff9900 | #111111 | #232f3e | #fffdfa |
| Sunny Yellow | #ffd814 | #0f172a | #b45309 | #fefce8 |
| Ocean Royal Blue | #0070ba | #ffffff | #003087 | #f8fafc |
| Modern Blue | #2563eb | #ffffff | #f59e0b | #f8fafc |
| Emerald Fresh | #10b981 | #ffffff | #8b5cf6 | #f0fdf4 |
| Energy Red (Sharp) | #dc2626 | #ffffff | #1e293b | #fff1f2 |
Custom Colors
- Primary color — the CTA button, the selected pack border/background and the savings highlight.
- Button text color — the text (including the WooCommerce price markup) inside the CTA button.
- "Best Value" badge color — the badge on the recommended tier.
- Card background — the background of the selected tier card.
You can type a #HEX value directly or pick it with the visual color swatch — the two stay synchronized. The button hover state is derived automatically from the primary color.
Settings Reference
Each visual control maps to a setting in drbu_settings:
| Option | Default | CSS variable injected |
|---|---|---|
drbu_primary_color | #2563eb | --drbu-primary, --drbu-primary-hover, --drbu-primary-soft, --drbu-primary-rgb |
drbu_cta_text_color | #ffffff | --drbu-cta-text |
drbu_best_value_color | #1d4ed8 | --drbu-best-value |
drbu_card_bg_color | #f8fafc | --drbu-card-bg |
drbu_button_radius | 100px | --drbu-btn-radius |
drbu_card_radius | 16px | --drbu-card-radius |
How Colors Are Applied
Colors are injected through CSS variables (--drbu-primary, --drbu-primary-hover, --drbu-cta-text, --drbu-best-value, --drbu-card-bg and others) generated by the plugin and added via wp_add_inline_style(). They apply to all variants — block and classic themes — and work on the legacy .pg-* selectors too. See Developer Docs for overriding from your theme.
Corner Radius
Separate radius controls for the CTA button and the tier cards:
| Preset | Button radius | Card radius |
|---|---|---|
| Pill / Fully Rounded | 100px | — |
| Rounded Corners | 14px | 12px |
| Subtle Soft | 8px | 6px |
| Sharp Corners | 0px | 0px |
| Soft Modern (default card) | — | 16px |
How Colors Are Applied
Colors are injected through CSS variables (--drbu-primary, --drbu-primary-hover, --drbu-cta-text, --drbu-best-value, --drbu-card-bg and others) generated by the plugin and added via wp_add_inline_style(). They apply to all variants — block and classic themes — and work on the legacy .pg-* selectors too. See Developer Docs for overriding from your theme.