Pricing Table

Overview

The Pricing Table Widget allows to embed a pricing chart in your web page which helps to easily list your product pricing in the web page with full customization.

Screenshot

The following is a GIF video to show you how to use the pricing table widget and the various options available :

pricing table1

Pricing Table Widget

The following is a pricing table widget :

Popular

Standard

For beginners

$100

$ 49

Per Month

  • List Item
  • List Item
  • List Item
Buy This Plan

Some Additional Information

Options

Pricing Table

  • Plan Name : Set name of your plan like Pro, Standard etc.
  • Color : Set plan text Color.
  • Typography : Set the font and text style of plan text.

Subtitle

  • Subtitle : Set text of subtitle like For beginner etc.
  • Color : Set subtitle text Color.
  • Typography : Set the font and text style of subtitle text.

Header

  • Background Color : Set color of header section.
  • Padding : Set padding in header section.
  • Border Type : Set the border type. CLICK HERE to see the types of border.
  • Border Color : Set the border color.
  • Border Width : Set the border width.
  • Border Radius : Set the border radius.

Currency

  • Currency : Set the currency type.
  • Color : Set color of currency text.
  • Typography : Set the font and text style of currency text.
  • Position : Set the vertical position of currency.

Price

  • Value : Set the value of price.
  • Sale : Toggle display of old dissected price with currency value.
  • If toggle is on then,
  • Old Value : Set the value of old price.
  • Old Price Typography : Set the font and text style of old price text.
  • Price Typography : Set the font and text style of price text.
  • Line Height : Set the line height of currency.
  • State : Choose the state in which you have to display effect viz. Normal or Hover.
  • Color : Set color of price value.
  • Old Price Color : Set color of old price value.
  • Line Through Color : Set color of old price value dissection line.
  • Background Color : Set background color of whole box.
  • Border Type : Set the border type
  • Border Color : Set the border color.
  • Border Width : Set the border width.
  • Border Radius : Set the border radius.
  • Margin : Set margin of price section.
  • Padding : Set padding of price section.

Period

pricing table2
  • Inline : Toggle to display of period text inline otherwise at bottom side.
  • Period : Set text of period.
  • Color : Set period text Color.
  • Typography : Set the font and text style of period text.

Features

  • Features : List features of the any product, CLICK HERE to see about features.

Button Style

  • Show Button : Toggle display of button.
  • Type : Select the type of buttons to begin your design. CLICK HERE to see the types of button.
  • Size : Select the Size of button, default is selected to mini. CLICK HERE to see the types of button.
  • Button Text : Enter the Button text.
  • Typography : Choose the typography for button text.
  • Spacing : Set spacing between button and above features.

Additional Information

  • Additional Info : Set text of additional information.
  • Color : Set additional text Color.
  • Typography : Set the font and text style of additional text.

Ribbion

  • Display : Toggle display of ribbon.
  • Text : Set text of ribbon.
  • Typography : Set the font and text style of ribbon text.
  • Color : Set ribbon text Color.
  • Background Color : Set background color of ribbon.
Was this helpful to you?