cuprice- prefixed class name. Use the CSS section in the Design tab to write custom styles.
Available class names
/* Plan cards */
.cuprice-pricing-card /* Each plan card container */
.cuprice-pricing-button /* "Choose Plan" button */
.cuprice-pricing-badge /* "Most Popular" badge */
/* Billing toggle */
.cuprice-billing-toggle /* Monthly/Annual toggle container */
/* Header */
.cuprice-pricing-header /* Page title and description area */
/* Custom plan card */
.cuprice-custom-plan-card /* The "Customize your way" card */
.cuprice-custom-plan-button /* "Create Now" button */
.cuprice-custom-plan-badge /* "Custom" badge */
.cuprice-custom-plan-title /* Card title text */
.cuprice-custom-plan-feature-text /* Feature bullet text */
Example: Brutalist theme
.cuprice-pricing-card {
border: 3px solid #000 !important;
border-radius: 0 !important;
box-shadow: 6px 6px 0 #000 !important;
}
.cuprice-pricing-card:hover {
transform: translate(-3px, -3px) !important;
box-shadow: 9px 9px 0 #000 !important;
}
.cuprice-pricing-button {
border-radius: 0 !important;
border: 3px solid #000 !important;
text-transform: uppercase !important;
letter-spacing: 0.1em !important;
}
Example: Rounded soft theme
.cuprice-pricing-card {
border-radius: 20px !important;
border: none !important;
box-shadow: 0 4px 24px rgba(0,0,0,0.06) !important;
}
.cuprice-pricing-button {
border-radius: 12px !important;
}
Use
!important on all properties. The widget uses scoped CSS with high specificity, so your overrides need !important to take effect.