The Price Table widget allows you to create stylish, advanced price tables that display your products or services.

Content

The options below will allow you to customize the content of your Price Table. These are populated by default to show all the options available. In order to hide unneeded options, simply delete the default text.

Header

1. Title: Enter the title of the specific price plan
2. Subtitle: Enter the subtitle that appears below the main title
3. Heading Tag: Set the Header’s Title tag, choosing from H2 – H6

Pricing

1. Currency Symbol: Switch between the main currencies, or choose a custom symbol
2. Price: Set the exact pricing of your product or service, including cents
3. Currency Format: Choose the thousands separator format
4. Sale: Display the original price with a strikethrough and the new sale price
5. Period: Enter text for the period of time for each payment that appears under the price

Features

List Items

A list of all the features you are offering. You can drag and drop them to change their order. Click on the Add Item button to add another item to the list.

Tip: Quickly duplicate or delete items by clicking an item’s Duplicate or Delete icon 

By clicking on each item you can customize their content and settings, which are:

1. Text: Enter the description of the feature
2. Icon: Choose from a list of Font Awesome icons
3. Icon Color: Choose a color for the icon

Footer

1. Button Text: Write the text that will appear for the button
2. Link: Enter the URL for the item’s link. Click the Link Options cog  to either add rel=nofollow to the link or to open the link in a new window.
3. Additional Info: Include a line of additional info below the button

Ribbon

1. Show: Show or hide a corner ribbon
2. Title: Enter the text to be displayed on the ribbon
3. Horizontal Position: Display the ribbon on the top left or top right of the pricing table

Style

Header

1. Background Color: Choose the background color for the top section of the widget
2. Padding: Choose the padding for the heading

Title

1. Color: Choose any color for the main title
2. Typography: Change the title typography

Sub Title

1. Color: Choose any color for the main title
2. Typography: Change the title typography

Pricing

1. Background Color: Choose a background color for the pricing area
2. Padding: Change the padding of the pricing area
3. Color: Choose the color of the price
4. Typography: Set the typography options for the pricing area

Currency Symbol

1. Size:  Change the size of the currency symbol
2. Position: Display the currency symbol to the left or right of the price
3. Vertical Position: Set the currency symbol to display at the top, middle or bottom of the price

Fractional part

1. Size: Set the size of the fractional part of the price
2. Vertical Position: Set the fractional part to display at the top, middle or bottom of the price

Period

1. Color: Choose the color of the text of the time period
2. Typography: Set the typography options for the text of the time period
3. Position: Set the time period below or beside the price

Features

1. Background Color: Choose the background color of the features list
2. Padding: Customize the padding of the features list
3. Color: Choose the color of the features list text
4. Typography: Set the typography options for the features list text
5. Alignment: Align the list to the right, left or center
6. Width: Set the width of the features list

Divider

1. Style: Choose the features list divider style, from solid, dotted, double or dashed
2. Color: Choose the color of the divider
3. Weight: Set the thickness of the divider
4. Width: Set the width of the divider
5. Gap: Set the distance between the divider and the feature item

Footer

1. Background Color: Choose the background color of the footer area
2. Padding: Set the padding of the footer area

Button

1. Size: Choose from 5 button sizes
2. Text Color: Choose the color of the button’s text
3. Typography: Set the typography options for the button’s text
4. Background Color: Choose the background color of the button
5. Border Type: Select the border type, from none, solid, double, dotted, dashed, or grooved
6. Border Radius: Set the border radius of the button to control corner roundness
7. Text Padding: Set the distance between the button text and the border

Ribbon

1. Background Color: Choose the background color of the ribbon
2. Distance: Control the distance between the ribbon and the corner
3. Text Color: Choose the color of the ribbon’s text
4. Typography: Set the typography options for the ribbon’s text
5. Box Shadow: Add a box shadow effect to the ribbon