Pricing Table Shortcode

Updated on January 11, 2018

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.

Ken Pricing Tables Demo 6-pricing table shortcode

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.

pricing table shortcode

1Click on “Add New Pricing Item” and you will be redirected to The Pricing Table Add page.

pricing table shortcode

2Add a new title for your pricing table.
3Set Ken Pricing Table Options
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.
4Click on the Publish button to save your pricing table. You need to repeat the steps above to add other plans to the pricing table.

Displaying the Pricing Table Shortcode

To add the shortcode:

1Add a new page or edit an existing page.

2From the Visual Composer screen, click on the +  button.

pricing table shortcode
3In the Add Element pop-up screen, search for Pricing Table and click on it to be added to the page.

pricing table shortcode
4When the shortcode is added, a new pop-up screen called Pricing Table Settings will open that allows you to configure the shortcode settings.

pricing table shortcode
5Configure the settings as required. More settings are explained in the next sections.

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.

6Click on Save Changes and publish or update the page to check the result.

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.

Did this answer your question?