The Better Subscription Switcher plugin doesn’t have the ability yet to customize the look and feel of the modal (popup). This is coming in an upcoming release. In the meantime you can use these styles to customize the styles to match your theme.
The Better Subscription Switcher uses a comprehensive CSS variable system that makes customization easy and maintainable. Instead of overriding specific CSS rules, you can simply redefine the variables to match your brand colors, spacing, and typography.
/* ========================================
COLORS
======================================== */
/* Brand Colors */
--bss-color-primary: #2271b1;
--bss-color-link: #2271b1;
--bss-color-link-hover: #135e96;
/* Text Colors */
--bss-color-text-primary: #333;
--bss-color-text-secondary: #666;
--bss-color-text-dark: #000;
/* Background Colors */
--bss-color-modal-bg: #fff;
--bss-color-modal-header-bg: #fff;
--bss-color-modal-footer-bg: #fff;
--bss-color-current-plan-bg: #f8f9fa;
--bss-color-current-plan-button-bg: #fff;
--bss-color-selected-plan-bg: #f0f7ff;
--bss-color-hover-bg: #e9ecef;
--bss-color-overlay: rgba(0, 0, 0, 0.5);
/* Button Colors */
--bss-color-button-bg: #464646;
--bss-color-button-text: #fff;
--bss-color-button-bg-hover: #333;
--bss-color-button-primary-bg: #2271b1;
--bss-color-button-primary-bg-hover: #135e96;
/* Border Colors */
--bss-color-border: #ddd;
--bss-color-border-light: #e2e4e7;
--bss-color-muted: #ccc;
/* Star Rating Colors */
--bss-star-rating-color: #fcc30b;
--bss-star-rating-color-empty: #ccc;
/* Legacy Modal Colors (for backward compatibility) */
--bss-color-modal-text: #333;
--bss-color-modal-header-text: #333;
--bss-color-modal-footer-text: #333;
/* ========================================
SPACING & SIZING
======================================== */
/* Spacing Scale */
--bss-spacing-xs: 5px;
--bss-spacing-sm: 8px;
--bss-spacing-md: 10px;
--bss-spacing-lg: 15px;
--bss-spacing-xl: 20px;
--bss-spacing-xxl: 30px;
/* Image Sizes */
--bss-image-size-sm: 60px;
--bss-image-size-md: 80px;
/* Modal Dimensions */
--bss-modal-width: 675px;
/* Button Sizes */
--bss-button-min-width: 140px;
/* ========================================
TYPOGRAPHY
======================================== */
/* Font Sizes */
--bss-font-size-sm: 0.8em;
--bss-font-size-md: 0.9em;
--bss-font-size-lg: 1.2em;
/* ========================================
EFFECTS & ANIMATIONS
======================================== */
/* Border Radius */
--bss-border-radius: 6px;
--bss-button-border-radius: 6px;
/* Transitions */
--bss-transition-fast: 0.2s;
--bss-transition-normal: 0.3s ease-in-out;
/* Opacity */
--bss-opacity-hover: 0.8;
/* Shadows */
--bss-shadow-modal: 0 4px 20px rgba(0, 0, 0, 0.15);
/* Z-Index */
--bss-z-index-modal: 99999;How to Overwrite These Styles
- Open the WordPress Customizer: WordPress Admin → Appearance → Customize → Additional CSS
- Add your custom CSS like:
:root {
--bss-color-modal-bg: #fff; /* Modal background */
--bss-color-modal-header-bg: #fff; /* Modal header background */
--bss-color-modal-footer-bg: #fff; /* Modal footer background */
--bss-color-current-plan-bg: #f8f9fa; /* Current plan highlight */
--bss-color-current-plan-button-bg: #fff; /* Current plan button */
--bss-color-selected-plan-bg: #f0f7ff; /* Selected plan highlight */
--bss-color-hover-bg: #e9ecef; /* Hover state background */
--bss-color-overlay: rgba(0, 0, 0, 0.5); /* Modal overlay */
}