Advance Pricing Table

Content #

The Advance Pricing Table widget offers a sophisticated, matrix-style layout for comparing multiple plans against a unified list of features. It is ideal for detailed, side-by-side comparisons where feature inclusion is the primary focus.

Pricing Tables (Plans): #

Add and configure each column representing a pricing plan.

• Add Items: Click ‘Add Item’ to create a new plan column. For each plan, configure:
  • Title: The name of the plan (e.g., BASIC, PREMIUM, STANDARD).
  • Price: The cost of the plan (e.g., $500, $2499).
  • Currency Symbol: The currency symbol (e.g., $). This might be set globally or per plan.
  • Button Text: The text for the call-to-action button (e.g., Choose plan).
  • Link: The URL where the button should link to.
  • Recommended: A toggle to mark a specific plan as the recommended option. This activates special styling for that entire column.
  • Recommended Title: Customize the text of the recommendation label (e.g., Recommended, Best Value).

Features List: #

This is the core of the matrix. You define a central list of features that each plan will be evaluated against.

• Features Title: A title for the features list (e.g., What's Included, Accessible pricing that’s flexible for your needs).
• Features List: Add each feature as a separate item. This creates the rows of the matrix.
  • Feature Name: The name of the feature (e.g., One-Time Enrollment Fee, Monthly Payment, Minimum Annual Savings).
• Select Features: For each plan column, you will then select which features from this master list are included (e.g., marked with a checkmark ✔) or not included (e.g., marked with a cross ✖).

Style Tab #

The Style tab provides extensive control to style this complex comparison matrix.

You can style the following parts:

• Title: Style the name of each pricing plan at the top of each column.
  • Color: Set the text color.
  • Typography: Control the font properties.
• Price: Style the price figure in each column.
  • Color: Set the color of the price.
  • Typography: Control the font properties.
• Feature Title: Style the title of the features list on the left.
  • Color & Typography
• Check Mark / Cross Mark: Style the icons used to indicate if a feature is included or not.
  • Color: Set the color for the checkmark and crossmark individually.
• Recommended Badge: Style the label for the recommended plan column.
  • Text Color & Background Color: Set the colors for the badge.
  • Typography: Style the text of the badge.
  • Border Type, Radius & Width: Add and style a border around the badge.
  • Position: Adjust the placement of the badge relative to the plan column.
• Column: Style the entire plan column, especially useful for highlighting the recommended one.
  • Background Type: Set a background color or gradient for the column to make it stand out.
  • Border Type & Color: Add a border around the entire column.
  • Box Shadow: Apply a shadow to the column for a “lifted” effect.
• Button: Style the call-to-action button at the bottom of each plan column.
  • Text Color & Background Color: Set colors for Normal and Hover states.
  • Typography: Style the button text.
  • Border Radius: Round the corners of the button.

Common Use Cases #

• Detailed Service Comparison: Perfect for IT services, SaaS platforms, or complex service packages where users need to easily compare many features across plans.
• Telecom or Subscription Plans: Ideal for showing different tiers of phone plans, internet packages, or streaming services.
• Highlighting a Recommended Plan: The column-based styling allows for a clear visual hierarchy, making the recommended plan the focal point.