Available with Extra Shortcodes add-on.

This shortcode allows you to create beautiful pricing tables.

Starter
Free
30-day trial
  • Option 1
  • Option 2
  • Option 3
Professional
$29
per month
  • Option 1
  • Option 2
  • Option 3
[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]

[su_pricing_table]

Option name Possible values Default value
class
Extra CSS class
Any text value

none

[su_plan]

Option name Possible values Default value
name
Type here the name of this pricing plan
Example values: Starter, Business, Professional
Any text value

none

price
Specify the price for this plan (without currency).
Example values: Free, 10, 29
Any text value

none

before
This text will be shown right before plan price.
It is a good place to add currency.
Example values: $, €, ¥, euro, dollars
Any text value

none

after
This text will be shown right after plan price.
It is a good place to add currency.
Example values: $, €, ¥, euro, dollars
Any text value

none

period
Specify plan period. Leave this field empty to hide this text.
Example values: weekly, per month, 1 year
Any text value

none

featured
Show this plan as featured
yes or no no
background
This color will be applied to the pricing plan head (plan name, price and period area)
#HEX color #f9f9f9
color
This color will be applied to the pricing plan head (plan name, price and period area)
#HEX color #333333
border
Pick an border color for this plan
#HEX color #eeeeee
shadow
Adjust box shadow value. Shadow will be only applied to the featured plans
CSS box/text-shadow shorthand property 0px 0px 25px #eeeeee
icon
You can add an icon to each pricing plan. Leave this field empty to hide icon
FontAwesome icon name (with “icon:” prefix) or icon image URL. Examples: icon: star, http://example.com/icon.png

none

icon_color
Pick an icon color. This color will only be applied to the built-in icons
#HEX color #333333
icon_size
Specify icon size (px)
Number from 8 to 256 48
btn_url
Enter here the URL for button
Any text value

none

btn_target
Choose button link target
self (Open link in same window/tab)
blank (Open link in new window/tab)
self
btn_text
Enter here the text for button.
Example value: Sign Up
Any text value

none

btn_background
Choose button background color
#HEX color #999999
btn_color
Choose button text color
#HEX color #ffffff
class
Additional CSS class name(s) separated by space(s)
CSS class name(s) separated by space(s)

none