Skip to main content
Every element in the pricing widget has a 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.