Pricing Table Widget

This widget allows you to easily create pricing tables for your products or services. Create as many plans as you want, and control the title, features and pricing for each. You can also choose to make one or more plans featured. The widget is responsive and highly customizable.

DEMO


Admin Label : The name you add here will appear in the page builder under the widget name. This helps with easy identification of the contents of the widget.


Pricing Plans

This is a repeater field. You can add as many as you like.

Title : Enter the plan title.

Title Tagline : Enter the plan tagline.

Price : Enter the plan price.

Price Prefix : Text that appears before the price. This field is enclosed in span.iw-so-pricing-price-prefix for further styling.

Price Suffix : Text that appears before the price. This field is enclosed in span.iw-so-pricing-price-suffix for further styling.

Pricing Tagline : Enter the price tagline.

Features : Enter one plan feature in each repeater section.

Button Text : Enter the button text.

Destination URL : Enter the URL to which the button should point to.

Open in new window : If checked the link will open in a new tab.

Button ID : Add an id to the button.

Button Title attribute : Add a title to the button.

Button Onclick : Used for executable JavaScript.

Featured Plan : This feature highlights the plan. The plan will also have a class iw-so-pricing-featured that can be used for further styling.


Styling

Text Align : Choose the text alignment.

Background Color : Choose a default color for the plans.

Border Color : Choose a border color.

Use shadow for plans : Give your pricing table a touch of material design.

Title Color : Choose the title color.

Title tagline Color : Choose the title tagline color.

Title Tagline Position : Choose to have the title tagline above or below the title.

Title Section Padding : Give the title section some padding.

Title Section Background : Choose the title sections background.

Pricing Color : Choose the price text color.

Pricing Tagline Color : Choose the price tagline color.

Pricing Tag Position : Choose to have the price tagline above or below the price.

Pricing Section Padding : Give the pricing section some padding.

Pricing Section Background : Choose the pricing sections background.

Features Color : Choose the features text color.

Features Section Padding : Give the features section some padding.

Padding between Features : Have some spacing between the features.

Features Section Background : Choose the features sections background.

Button Section Padding : Give the button section some padding.

Button Section Background : Choose the button sections background.

Button Align : You can have the button on the left, right or center. You can also choose fullwidth to have the button over the entire width of the plan.

Button Theme : You can choose from Classic, Flat, Outline, 3D, Shadow and Modern.

Button Highlight Color : Typically used as button background.

Button Base Color : Typically used as text color.

Use button hover effect : If checked will add an effect on mouse hover. The effect will vary depending on the chosen theme.

Use button click effect : If checked will add an effect on mouse click. The effect will vary depending on the chosen theme.

Button Corners : Choose the shape of the Button. Defaults to Slightly curved.

Columns : Choose the number of plans per row.

Gap between Plans? : Have a little spacing between plans.


Featured Styling

This section applies styling only to featured plans.

Background Color : Choose a background color.

Border Color : Choose a border color.

Title Section Background : Choose the title sections background.

Pricing Section Background : Choose the pricing sections background.

Features Section Background : Choose the features sections background.

Button Section Background : Choose the button sections background.

Title Color : Choose the title color.

Title tagline Color : Choose the title tagline color.

Pricing Color : Choose the price text color.

Pricing Tagline Color : Choose the price tagline color.

Features Color : Choose the features text color.

Button Highlight Color : Typically used as button background.

Button Base Color : Typically used as text color.