Pricing Plan

Pricing Plan custom WPBakery Page Builder element, added by Loyde, renders a versatile, customizable pricing plan box.

Note: For a pricing table, it's necessary to add multiple (two or more) Pricing Plan instances to the page. They are usually added side-by-side.

Pricing plan fields

One or more fragments can be added to the pricing plan:

  • Title
  • Subtitle
  • Price
  • Features (one or more)
  • Call-to-action button

All mentioned fragments are optional. Of course, it's beneficial to add as much information as possible.

How to rearrange pricing plan fields

Steps:

  1. Add a Pricing Plan instance to the edited page or post
  2. Open the Settings for the added element
  3. Open the "Layout" tab
  4. Under "Left Column" reorder the fields as desired
  5. Save changes.

Display pricing plan as a two columns layout

By default, the pricing plan fields are displayed in a single column. However, it's possible to split fragments into two columns. Steps:

  1. Add a Pricing Plan instance to the edited page or post
  2. Open the Settings for the added element
  3. Open the "Layout" tab
  4. Under "Left Column" select the fields which should appear in the left column, and unselect fields which should appear in the right column
  5. Under "Right Column" select the fields which should appear in the right column
  6. Save changes.

It's possible to display the same field in both columns. But each field will usually appear only in one of the columns.

How to add currency name/symbol to the price

Steps:

  1. Add a Pricing Plan instance to the edited page or post
  2. Open the Settings for the added element
  3. Open the "Price" tab
  4. Enter the currency name/symbol to either to field "Price Prefix" or "Price Suffix". The order depends on the currency (for example, $ appears before the price and € after the price)
  5. Save changes.

How to add a feature, but mark it as disabled

Sometimes it's necessary to display a service or business feature, but mark it disabled/missing in the current pricing plan. As a result, the feature will be crossed out (strikethrough).

Steps:

  1. Add a Pricing Plan instance to the edited page or post
  2. Open the Settings for the added element
  3. Open the "Features" tab
  4. Add a feature, and enter a label
  5. Under "Feature Excluded?" select "Yes"
  6. Save changes.

How to add a call-to-action button

It's possible to add a call-to-action button to the pricing plan. The button can be customized:

Steps:

  1. Add a Pricing Plan instance to the edited page or post
  2. Open the Settings for the added element
  3. Open the "Button" tab
  4. Select desired settings
  5. Save changes.

How to mark the pricing plan as "featured"

Usually, one of the offered pricing plans is marked as featured, or most popular. As a result, the plan gets slightly different appearance.

How to apply primary & secondary accent color to the element

See description here.

How to apply a basic styling, which applies to the element as a whole

See description here.