Pricing table
shortcode

A responsive and elegant way to present your products or services to the visitors. Customize the shortcode to let visitors know about hot offers on your site.
Read documentation
Usage frequency
78%
Preset amount
85%
Customizability
96%

Available options

Default code: [dfd_pricing_block symbol_size="25" amount_size="55" style="style-01"]

Style – Choose between 3 preset styles;

Title – Add the title for your pricing table;

Subtitle – Add the subtitle for your pricing table;

Currency symbol – Insert currency symbol you would like beside your price;

Price – Set the price for your offer;

Recurring Fee – Indicate the recurring payment for your offer (i.e. monthly, annual);

Animation – Select among 14 appear effects;

Custom CSS Class –  Type your own unique class name for the item – this is a useful option for those who want to create a specific style.
For example, you can type custom-style class and then go to Theme options -> General Options -> Custom CSS / JS -> Custom CSS and write your own CSS code with this class to get your own style;

Top icon – Add the icon, text or image at the top of your pricing table. Set the icon size and color;

Content – Add the content text for your pricing table;

Features – Allows you to add the list with the description for your offer. Select among 4 feature types, add the feature text and icon;

Button – Allows you to add button text and link;

Button style – Customize the button text, background and border. Select the border radius and hover colors;

Label – Add the label to the pricing table, set the color, background color and border radius;

Typography – Select letter spacing, font size, line height and text color. You can also choose the custom font family for the title;

General styles – Set the general border width, border radius and color. Choose the background colors for the content and features;

Content delimiter style – Choose the delimiter style and color;

Price styles – Allows you to set the size, letter spacing and color for currency symbol, price and recurring fee;

Features style – Choose the features delimiter style and its color, set the icon size and icon color.

Default styles

Samples of preset styles without custom changes
Classic style
New!
Heading
Subheading
$25 / mo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tristique hendrerit ex ut laoreet.
  • Lorem ipsum dolor sit
  • Quisque ornare urna
  • Praesent ultrices sollicitudin
Heading
Subheading
$35 / mo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tristique hendrerit ex ut laoreet.
  • Lorem ipsum dolor sit
  • Quisque ornare urna
  • Praesent ultrices sollicitudin
  • Cras suscipit tellus
Hot!
Heading
Subheading
$55 / mo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tristique hendrerit ex ut laoreet.
  • Lorem ipsum dolor sit
  • Quisque ornare urna
  • Praesent ultrices sollicitudin
  • Cras suscipit tellus
  • Praesent vitae orci
Simple style
New!
Heading
Subheading
$25 / mo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tristique hendrerit ex ut laoreet.
  • Lorem ipsum dolor sit
  • Quisque ornare urna
  • Praesent ultrices sollicitudin
Heading
Subheading
$35 / mo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tristique hendrerit ex ut laoreet.
  • Lorem ipsum dolor sit
  • Quisque ornare urna
  • Praesent ultrices sollicitudin
  • Cras suscipit tellus
Hot!
Heading
Subheading
$55 / mo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tristique hendrerit ex ut laoreet.
  • Lorem ipsum dolor sit
  • Quisque ornare urna
  • Praesent ultrices sollicitudin
  • Cras suscipit tellus
  • Praesent vitae orci
Advanced style
New!
Heading
Subheading
$25 / mo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tristique hendrerit ex ut laoreet.
  • Lorem ipsum dolor sit
  • Quisque ornare urna
  • Praesent ultrices sollicitudin
Heading
Subheading
$35 / mo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tristique hendrerit ex ut laoreet.
  • Lorem ipsum dolor sit
  • Quisque ornare urna
  • Praesent ultrices sollicitudin
  • Cras suscipit tellus
Hot!
Heading
Subheading
$55 / mo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tristique hendrerit ex ut laoreet.
  • Lorem ipsum dolor sit
  • Quisque ornare urna
  • Praesent ultrices sollicitudin
  • Cras suscipit tellus
  • Praesent vitae orci

Customized styles

Some variations of style customizations of the shortcode
top image
New!
Image
Heading
Subheading
$25 / mo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tristique hendrerit ex ut laoreet.
  • Lorem ipsum dolor sit
  • Quisque ornare urna
  • Praesent ultrices sollicitudin
Image
Heading
Subheading
$35 / mo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tristique hendrerit ex ut laoreet.
  • Lorem ipsum dolor sit
  • Quisque ornare urna
  • Praesent ultrices sollicitudin
  • Cras suscipit tellus
Hot!
Image
Heading
Subheading
$55 / mo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tristique hendrerit ex ut laoreet.
  • Lorem ipsum dolor sit
  • Quisque ornare urna
  • Praesent ultrices sollicitudin
  • Cras suscipit tellus
  • Praesent vitae orci
custom typography
New!
Heading
Subheading
$25 / mo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tristique hendrerit ex ut laoreet.
  • Lorem ipsum dolor sit
  • Quisque ornare urna
  • Praesent ultrices sollicitudin
Heading
Subheading
$35 / mo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tristique hendrerit ex ut laoreet.
  • Lorem ipsum dolor sit
  • Quisque ornare urna
  • Praesent ultrices sollicitudin
  • Cras suscipit tellus
Hot!
Heading
Subheading
$45 / mo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tristique hendrerit ex ut laoreet.
  • Lorem ipsum dolor sit
  • Quisque ornare urna
  • Praesent ultrices sollicitudin
  • Cras suscipit tellus
  • Praesent vitae orci