Pricing Table

This shortcode is available in Shortcodes Ultimate Pro

Starter
Free
30-day trial
  • Option 1
  • Option 2
  • Option 3
Sign Up
Business
$10
per month
  • Option 1
  • Option 2
  • Option 3
Sign Up
Professional
$29
per month
  • Option 1
  • Option 2
  • Option 3
Sign Up
Get the code 
[su_pricing_table]
[su_plan name="Starter" price="Free" period="30-day trial" btn_url="#plan-1" btn_text="Sign Up"]
<ul>
 	<li>Option 1</li>
 	<li>Option 2</li>
 	<li>Option 3</li>
</ul>
[/su_plan]
[su_plan name="Business" price="10" before="$" period="per month" featured="yes" btn_url="#plan-2" btn_text="Sign Up"]
<ul>
 	<li>Option 1</li>
 	<li>Option 2</li>
 	<li>Option 3</li>
</ul>
[/su_plan]
[su_plan name="Professional" price="29" before="$" period="per month" btn_url="#plan-3" btn_text="Sign Up"]
<ul>
 	<li>Option 1</li>
 	<li>Option 2</li>
 	<li>Option 3</li>
</ul>
[/su_plan]
[/su_pricing_table]
Starter
Free
30-day trial
  • Option 1
  • Option 2
  • Option 3
Sign Up
Business
$10
per month
  • Option 1
  • Option 2
  • Option 3
Sign Up
Professional
$29
per month
  • Option 1
  • Option 2
  • Option 3
Sign Up
Ultimate
$99
lifetime
  • Option 1
  • Option 2
  • Option 3
Sign Up
Get the code 
[su_pricing_table]
[su_plan name="Starter" price="Free" period="30-day trial" btn_url="#plan-1" btn_text="Sign Up"]
<ul>
 	<li>Option 1</li>
 	<li>Option 2</li>
 	<li>Option 3</li>
</ul>
[/su_plan]
[su_plan name="Business" price="10" before="$" period="per month" featured="yes" btn_url="#plan-2" btn_text="Sign Up" background="#ccf098" btn_background="#608f1d"]
<ul>
 	<li>Option 1</li>
 	<li>Option 2</li>
 	<li>Option 3</li>
</ul>
[/su_plan]
[su_plan name="Professional" price="29" before="$" period="per month" btn_url="#plan-3" btn_text="Sign Up"]
<ul>
 	<li>Option 1</li>
 	<li>Option 2</li>
 	<li>Option 3</li>
</ul>
[/su_plan]
[su_plan name="Ultimate" price="99" before="$" period="lifetime" btn_url="#plan-4" btn_text="Sign Up"]
<ul>
 	<li>Option 1</li>
 	<li>Option 2</li>
 	<li>Option 3</li>
</ul>
[/su_plan]
[/su_pricing_table]

Description

This shortcode allows you to create beautiful pricing tables.

Options

[su_pricing_table] – container

max_widthThe maximum width of the table. CSS units are allowed.
Examples: none, 300px, 40em, 90%, 90vw

Default value: none
classExtra CSS class

[su_plan] – single pricing plan

nameType here the name of this pricing plan
Example values: Starter, Business, Professional
priceSpecify the price for this plan (without currency).
Example values: Free, 10, 29
beforeThis text will be shown right before plan price.
It is a good place to add currency.
Example values: $, €, ¥, euro, dollars
afterThis text will be shown right after plan price.
It is a good place to add currency.
Example values: $, €, ¥, euro, dollars
periodSpecify plan period. Leave this field empty to hide this text.
Example values: weekly, per month, 1 year
featuredShow this plan as featured

Possible values: yes or no

Default value: no
backgroundThis color will be applied to the pricing plan head (plan name, price and period area)

Possible values: #HEX color

Default value: #f9f9f9
colorThis color will be applied to the pricing plan head (plan name, price and period area)

Possible values: #HEX color

Default value: #333333
borderPick an border color for this plan

Possible values: #HEX color

Default value: #eeeeee
shadowAdjust box shadow value. Shadow will be only applied to the featured plans

Possible values: CSS box/text-shadow shorthand property

Default value: 0px 0px 25px #eeeeee
iconYou can add an icon to each pricing plan. Leave this field empty to hide icon

Possible values: Fork Awesome icon name (with “icon:” prefix) or image URL. Examples: icon: star, http://example.com/icon.png. See available Fork Awesome icons.
icon_colorPick an icon color. This color will only be applied to the built-in icons

Possible values: #HEX color

Default value: #333333
icon_sizeSpecify icon size (px)

Possible values: Number from 8 to 256

Default value: 48
btn_urlEnter here the URL for button
btn_targetChoose button link target

Default value: self
btn_textEnter here the text for button.
Example value: Sign Up
btn_backgroundChoose button background color

Possible values: #HEX color

Default value: #999999
btn_colorChoose button text color

Possible values: #HEX color

Default value: #ffffff
classAdditional CSS class name(s) separated by space(s)
Helpful?
🤝 Thank you!