Pricing Table (Builder) Shortcode

Updated on December 18, 2017

The pricing table (builder) 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.

Pricing table (builder) shortcode - demo


Creating the Pricing Table

Pricing tables can be created using the post type Pricing Table from the side menu of your WordPress dashboard.

There are some settings that allow you to configure Pricing Table content. We’ll describe them below:

Setting Description

Pricing Table StyleSets the style of Pricing Table. Available options are: Builder and Simple.
PriceSets the price for the item.
PeriodSets the price period, e.g. monthly, yearly, daily.
Featured PlanEnabled featured plan option.
Featured Plan TextSets the text for the featured Plan column.
Sale Price/Rate TextSets the sale price.
Plan Name?Sets the plan name.
Currency SymbolSets the currency symbol for the price.
Specifications TextSets the text of specifications.
Title Background ColorSets the background color of the pricing table title.
Price Background ColorSets the background color of the price section.
Title/Price Text ColorSets the color of price and title text. Available options are Light, Dark.
Specifications Background ColorSets the specifications background color.
Specifications Text ColorSets the specifications text color. Available options are Light, Dark.
Featured Badge Background ColorSets the background color of the featured badge.
Featured Badge Text ColorSet the text color of the featured badge. Available options are Light, Dark.
Column Border ColorSets the column border color.
Button Background ColorSets the button background color.
Button Text ColorSets the button text color. Available options are Light, Dark.
Drop ShadowEnable this option to add a custom shadow feature.
Make This Column BiggerEnable the option if you want to make the column bigger than the others.
Button TextSets the button text.
Button URLSets the button link. URL should start with http://

Displaying the Pricing Table (Builder) 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 (builder) shortcode - visual composer screen

3In the Add Element pop-up screen, search for Pricing Table (Builder) and click on it to be added to the page.

Pricing table (builder) shortcode - add element

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

Pricing table (builder) shortcode - Pricing table (builder) settings

5Configure the settings as required. More settings are explained in the next sections.
SettingDescription

Offers Sets a description text for the whole pricing table in builder mode.
6Click on Save Changes and publish or update the page to check the result.

Configuring the Pricing Table (Builder) Settings

After you’ve added the pricing table (builder) 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 (builder) 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.

SettingDescription

Select Specific TablesDetermines specific pricing table posts. The builder shortcode will show table items in the list that are set as builder 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 this builder pricing table shortcode.

 Altering the Images Sorting

There are two settings in the pricing table (builder) settings pop-up that 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.

SettingDescription

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 there are any questions regarding the Pricing Table settings, please create a ticket via your Artbees Dashboard.

Did this answer your question?