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.
Screeshot
The following is a GIF video to show you how to use the pricing table widget and the various options available :
Pricing Table Widget
The following is a pricing table widget :
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.
- Alingnment: Set the alingment to your pricing table.
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.
- 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.
Normal
- 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.
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
- 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 more.
Button Style
- Show Button : Toggle display of button.
- Type : Select the styles of buttons to begin your design. Choose from Primary, Success, Info, Warning, Danger etc. If you want to design your own button from other than these options then select Custom from the drop down, after selecting the custom you will get the option State in which you can design the button in Normal and Hover State.
- Size : Select the Size of button, default is selected to mini. Choose from Mini, Small, Large, Extra Large, Double Large. If you want to give size to your own button from other than these options then select Custom from the drop down, after selecting the custom you will get the input State in which you can give any size but it should be less then hundered.
- Button URL : Enter the URL for Button link.
- 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.
Ribbon
- 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 color of ribbon.
NOTE - In advance option tab . Do more styling to the Pricing Table Widget. To know more about advance option tab. CLICK HERE