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]

This shortcode is available with the Extra Shortcodes add-on.

Description

This shortcode allows you to create beautiful pricing tables.

Options

[su_pricing_table] – container

Option namePossible valuesDefault value
class
Extra CSS class
Any text value– none –

[su_plan] – single pricing plan

Option namePossible valuesDefault 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 nono
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 property0px 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 25648
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 –