Skip to content
Contact us

Customizable Pricing Cards - How To

 

This module will allow you to customize up to 4 pricing cards to match your website styles while keeping a simple yet effective functionality.

Let’s go through all the fields to understand what they do.

Cards height

By enabling this field, all the pricing cards will have the same height despite having different content. If you disable this option, each card will have its own height. 

Add new Cards

To add a new card to the module, simple click on Add one

This will add a new pricing card and will display all its properties. Let’s go one by one.

Is featured card

Enabling this option will highlight the card and change both the background color and the text color. You can customize those colors on the Styles tab (more below).

Card links color

This color option will change the color of all links inside the card (except the CTA). Since you have a couple of richtext variables, those links will be affected by this variable.

Card title

This variable is for the text that appears at the very top of the card, by default Custom module.

Card price

This variable is for the text displaying the cost/price of your product/service. It’s a text field so you can either add numbers or text, up to you! 

Text under the price

As the label says, this is the text that appears between the price and the CTA. It’s a richtext editor and the link styles are affected by the color variable we have seen above. 

 

Card CTA

This is a group of variables, so I’m going to detail them one by one below:

 

  • CTA Text: The text that appears on the CTA
  • CTA Text Color: The color for the CTA Text
  • CTA Link: Link for the CTA, where the user will be sent after clicking it
  • CTA Background color: Background color for the CTA



Text

This variable is for all the text that appears under the CTA and before the Features list. It’s a richtext, so the link styles are affected by the Card links color variable we saw before.

 

Features list

In this variable you can add a list of features. To add the first feature, click Add one.

The following variables will appear:

 

  • List item icon: This will allow you to select an icon for your feature item
  • List item text: The actual text that describes your feature
  • Disabled icon: Enabling this option will turn the icon gray, making it look like it’s not available or not included in the offer (good for comparing different options)

 

Note that you can add as many feature items as you want. 

 

Styles

The tab Styles has a few options to customize your cards.

Featured cards text color

This option allows you to customize the text color for your featured cards

 

Featured cards background color

This option allows you to customize the background color for featured cards

 

Cards border radius

This option allows you to change the border-radius property of your card, making them more or less rounded (the corners). 

 

Cards icons color

This option allows you to change the color of the icons in your features list

 

Cards icons disabled color

This option allows you to change the color of the disabled icons in your features list