The pricing table shortcode is one of the Ken shortcodes that allows you to add a table for different products or services with a detailed description and pricing. A good example of this shortcode is for showing hosting plans.
In this article, we’ll explain how to configure the pricing table shortcode.
To see the pricing table shortcode in action, check out the demo page.
Creating the Pricing Table
Pricing tables can be created using the post type Pricing Table from the side menu of your Dashboard.
| Setting | Description |
|---|---|
| Table Skin Color | Sets the color of the current plan of the pricing table. If it’s left blank, the default skin will be applied. |
| Featured Plan | Enable this option if you want to make this plan a featured one. If enabled, this plan will have a special design to grab attention. |
| Price | Sets the price of the current plan, service, or product. Please include the currency symbol in this option. |
| Features | Adds the feature list for the current plan. Use the WordPress Editor bullet points option to add a list which will show properly on the front end of the website. |
| Button Text | Adds text to a button which will appear on the bottom section of this plan in the pricing table. Keep this option blank if you don’t want to have a button for this plan. |
| Button URL | Adds a link to the button for this plan. You need to add http:// at the beginning of the URL. |
| Set Featured Image | Use this option to upload and add a featured image for your pricing table. |
Displaying the Pricing Table Shortcode
To add the shortcode:
| Setting | Description |
|---|---|
| Offers | Adds additional offers and descriptions for the whole table shortcode. You will have the standard WordPress editor at hand to further style your description text. This option will place the description text for the whole table and not for each individual table item. |
Configuring the Pricing Table Settings
After you’ve added the pricing table shortcode, a pop-up window will appear where you can set the options. Below is a detailed description of each option for the pricing table shortcode.
Showing Specific Tables
There is one option in the shortcode settings pop-up which allows you to show specific tables based on specific IDs or titles. Type the name of a table, or table ID to add them to the fields.
| Setting | Description |
|---|---|
| Select Specific Tables | Determines specific pricing table posts. The shortcode will show table items in the list. |
Configuring the Pricing Table Post Number
| Setting | Description |
|---|---|
| How Many Tables? | Sets the amount of table items you want to show for the pricing table shortcode. |
Configuring the Pricing Table Styling
To select the style of the pricing table you’ll need to edit the following option.
| Setting | Description |
|---|---|
| Style | Sets the style for the pricing table. Please click here to see a live demo for each style. Available options are: Classic, Modern. |
| Skin | Sets the skin for the pricing table. Available options are: Light, Dark. |
| Pricing Background | This option will be available if Modern Style is selected. Use this option to set a background color for the pricing table. |
Altering the Pricing Table Sorting
There are two settings in the pricing table settings pop-up which allow you to alter the post sorting. By default, the Order and Orderby settings are set to Descending and Date, therefore it sorts the older posts ahead of the newer posts.
| Setting | Description |
|---|---|
| Order | Sets the ascending or descending order of the Orderby parameter. |
| Orderby | Sorts the posts based on the selected parameter (date, menu order, title, …). |
Configuring the Visibility for Devices
To make the Pricing Table shortcode visible only for some devices such as Phones, Tablets, Mega Tablets, Netbooks, Desktops, there is a setting in Pricing Table settings pop-up which is called Visibility For Devices. The usage of this setting is easy and straightforward but if you need a step by step tutorial, read Configuring the visibility for devices article.
Adding an Extra Class Name
The Extra Class Name field in the settings pop-up allows you to add an extra class name to the shortcode. It’s useful when you need to target the shortcode in a stylesheet or JavaScript file.
You can read the Adding a custom CSS class to a shortcode article for further explanation.
If you have any questions regarding Pricing Table shortcode, please contact our support team.
