The pricing table (simple) shortcode is one of the Jupiter 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.
There are some settings that allow you to configure Pricing Table content. We’ll describe them below:
| Setting | Description |
|---|---|
| Pricing Table Style | Sets the style of Pricing Table. Available options are: Builder and Simple. |
| Price | Sets the price for the item. |
| Period | Sets the price period, e.g. monthly, yearly, daily. |
| Featured Plan | Enabled featured plan option. |
| Featured Plan Text | Sets the text for the featured Plan column. |
| Sale Price/Rate Text | Sets the sale price. |
| Plan Name? | Sets the plan name. |
| Currency Symbol | Sets the currency symbol for the price. |
| Specifications Text | Sets the text of specifications. |
| Title Background Color | Sets the background color of the pricing table title. |
| Price Background Color | Sets the background color of the price section. |
| Title/Price Text Color | Sets the color of price and title text. Available options are Light, Dark. |
| Specifications Background Color | Sets the specifications background color. |
| Specifications Text Color | Sets the specifications text color. Available options are Light, Dark. |
| Featured Badge Background Color | Sets the background color of the featured badge. |
| Featured Badge Text Color | Set the text color of the featured badge. Available options are Light, Dark. |
| Column Border Color | Sets the column border color. |
| Button Background Color | Sets the button background color. |
| Button Text Color | Sets the button text color. Available options are Light, Dark. |
| Drop Shadow | Enable this option to add a custom shadow feature. |
| Make This Column Bigger | Enable the option if you want to make the column bigger than the others. |
| Button Text | Sets the button text. |
| Button URL | Sets the button link. URL should start with http:// |
Displaying the Pricing Table (Simple) Shortcode
To add the shortcode:
| Setting | Description |
|---|---|
| Offers | Adds additional offers and descriptions for the whole table shortcode in simple mode. 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 (Simple) Settings
After you’ve added the pricing table (simple) 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 (simple) 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 table, or table ID to add them to the fields.
| Setting | Description |
|---|---|
| Select Specific Tables | Determines specific pricing table posts. The simple shortcode will show table items in the list that is set as simple for the style option. |
Configuring the Pricing Table Post Number
| Setting | Description |
|---|---|
| How Many Tables? | Sets the amount of table items you want to show for the simple pricing table shortcode. |
Configuring the Pricing Table (Simple) Styling
To select the style of the pricing table you’ll need to edit the following option.
| Setting | Description |
|---|---|
| Table Style | Sets the simple pricing table style. Available options are: Multi Color and Mono Color. |
Altering the Image Sorting
There are two settings in the pricing table (simple) settings pop-up which allow you to alter the post sorting. By default, the Order and Orderby settings are set to Ascending 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, …). |
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.
Configuring the visibility for devices
Visibility For Devices field in the setting pop-up allows you to configure the visibility of the shortcode in different devices.
You can read Configuring the visibility for devices article for further explanation.
If you have any questions regarding the Pricing Table settings, please create a ticket via your Artbees Dashboard.
