Pro/Countdown Badge Styles
Countdown & Badge Styles
Choose from multiple visual styles for the countdown timer and instant win badge on single product pages. All styles are CSS-only — they use the same HTML structure as the default, so they work with any theme and don't affect performance.
Enabling
- Go to WooCommerce → Settings → Raffle → Modules and enable Countdown & Badge Styles.
- Two new dropdowns appear below: Countdown Style and Badge Style.
- Select your preferred style and save.
Countdown Styles (17)
| Style | Description |
|---|---|
| Boxed (default) | Solid accent-colored gradient boxes with white numbers. The original style from the free plugin. |
| Pill | Rounded pill-shaped segments with light accent background and accent text. Hover lifts cards. |
| Minimal | Numbers and labels only — no boxes, no background. Clean, typography-driven, works with any design. |
| Underline | Numbers with an accent-colored bottom border that expands on hover. Professional. |
| Neon Glow | Dark cards with bright pulsing accent glow (animated box-shadow), triple-layer glowing text-shadow, visible glowing top bar. |
| Gradient | Animated multi-color shifting gradient (accent → pink → coral → light accent). Colors flow across each card continuously. |
| Glass | Accent-tinted frosted glass with visible colored tint, backdrop-filter blur, top-half highlight sheen. Visible on white backgrounds. |
| Elegant | Refined white cards with thin borders, small centered accent bar that grows on hover. |
| Dark Contrast | High-contrast dark cards with horizontal center divider line and lighter upper half overlay. |
| Shadow Lift | White cards with 4-layer depth shadows. Gradient accent text. Hover lifts higher with deeper shadows. |
| Stacked | Vertical layout — horizontal bars with accent left-border. Hover slides right. Unique compact format. |
| Outline | Border-only cards with transparent background. Accent-colored numbers. Fills with light tint on hover. |
| Frosted Dark | Dark translucent glass with backdrop-filter blur, top-half highlight, visible edge borders. Dark glass effect. |
| Circular | Round/circle cards with accent border. Hover scales up. Unique shape. |
| Accent Top | Clean white cards with a thick accent-colored top edge. Simple, professional. |
| Neumorphism | Proper soft-UI with strong dual-direction shadows (10px spread), subtle gradient background, embossed text. |
| Border Gradient | White cards with animated spinning rainbow-colored 3px border (accent → pink → coral → gold → teal). Gradient text. Very distinct from Outline. |
Scroll to see all columns →
Badge Styles (9)
| Style | Description |
|---|---|
| Soft Card (default) | Light accent background with accent border. The original style from the free plugin. |
| Gradient Banner | Full-width accent gradient background with white text. Bold, high-visibility. |
| Pill Badge | Compact inline pill shape. Minimal footprint — subtitle is hidden to keep it tight. |
| Animated Glow | Accent border with a subtle pulsing glow animation. Draws attention without being intrusive. Respects prefers-reduced-motion. |
| Minimal | Icon and text only — no background, no border. The lightest visual weight. Subtitle is hidden. |
| Neon | Dark background matching the Neon Glow countdown. Glowing accent icon and text. |
| Glass | Glassmorphism — frosted translucent background with blur and inner highlight. |
| Outlined | Clean border-only design with accent-colored icon on white background. |
| Border Gradient | Animated spinning rainbow 3px border matching the countdown Border Gradient style. Gradient accent text. |
Scroll to see all columns →
Scope
Styles apply to the single product page countdown timer and instant win badge only. The compact countdown on shop/archive pages and shortcodes is not affected.
Theming
All styles use the same CSS custom properties as the free plugin:
--rfwc-accent— Primary accent color--rfwc-accent-dark— Darker accent variant--rfwc-accent-light— Lighter accent variant--rfwc-accent-rgb— RGB values for rgba() usage--rfwc-accent-bg-light/--rfwc-accent-bg-medium— Background tints--rfwc-accent-border-solid— Border color
Accessibility
- Animated Glow badge, Neon Glow shimmer, Gradient shine, Neon badge shimmer, and Border Gradient spin all respect
prefers-reduced-motion: reduce— animations are disabled. - All hover transitions are disabled under reduced motion.
- All styles maintain sufficient color contrast ratios.
- No styles change the semantic HTML structure.
Developer Hooks
Filter: rfwc_countdown_wrapper_class
Modify or override the CSS class applied to the countdown wrapper.
add_filter( 'rfwc_countdown_wrapper_class', function( $class ) {
return 'my-custom-countdown-class';
} );Filter: rfwc_badge_class
Modify or override the CSS class applied to the instant win badge.
add_filter( 'rfwc_badge_class', function( $class ) {
return 'my-custom-badge-class';
} );