Clean CSS3 WordPress Responsive Pricing Table

Documentation by “Real Web Care” v1.0

Thank you for your interest to this plugin. If you have any questions that are beyond the scope of this help file, please feel free to email us at realwebcare @ gmail dot com. We’d be happy to help you.

Installing 'Clean CSS3 WordPress Responsive Pricing Table' Plugin is as simple as installing any other WordPress Plugin. If you don't know how to install plugins, please review the two options below:

1.1 Install by ZIP File

  1. Log In as an Admin on your WordPress blog.
  2. From your WordPress dashboard, choose Add New under the Plugins category
  3. There, you have the buttons: Upload Plugin. Click it.
  4. From here, browse for the zip file included in your plugin purchase titled as and click the Install Now button
  5. Once installation is complete, activate the plugin to enable its features.
  6. Go to Pricing Tables >> Guide for instructions to create the pricing table.

1.2 Install by FTP

  1. Upload the ccwr-pricing-tables folder with all the files located in it to your WordPress plugin directory (/WORDPRESS-DIRECTORY/wp-content/plugins/) [e.g.]
  2. From your WordPress dashboard, choose Installed Plugins option under the Plugins category
  3. Locate the newly added plugin and click on the Activate link to enable its features.
  4. A new option tab with the name Pricing Tables will be created in the WordPress admin panel, where you can configure and create your pricing tables!

Clean CSS3 WordPress Responsive Pricing Table is a premium plugin developed to display Pricing Tables in a lot more professional way. The plugin is designed with clean CSS3, and no JavaScript is used. Moreover, it is responsive as well, aimed to deliver an optimum viewing experience across a wide range of devices and in all major browsers.

The plugin enables you to present various packages of your business according to your needs. You can create tables as many as you want with unlimited feature rows and unlimited package columns. The columns (packages) and rows (features) can be rearranged via drag and drop sorting. Also, you can choose any color you want for each part of a column separately, using the ColorPicker.

The plugin also includes multiple package ribbons, feature tooltips, link buttons and check / cross icons. The color of the package ribbons and tooltip background is customizable, using the ColorPicker. Additionally, to make the features and buttons of each package more meaningful and attractive, Font Awesome icon support is provided. Google Font support is also provided to match with the font used in your site. Undoubtedly, I believe this plugin will work as a milestone for your business to represent various packages with relevant features.


3.1 Create a Pricing Table

Navigate to Pricing Tables >> All Pricing Tables and click on Add New button to add new pricing table.

add new

Enter the pricing table name as well as corresponding pricing column features. You can give a short description of each feature, which wil appear as a tooltip in the pricing table. To display Check or Cross icon select checkbox from feature type. You can also set Font Awesome Icon for each feature. To set up Font Awesome icon you just need to put the icon class in the textbox that corresponds to the icon you are trying to display; for example if you want to display the camera icon you can add the fa-camera-retro class. Visit here to learn more about Font Awesome. Finally, click on Add Table button.

add pricing table

Later, you can Edit, Delete and Reorder pricing column features at any time by clicking on the Edit Features link in the pricing table lists. After giving the name of the pricing table you will be able to add pricing columns. To add pricing columns click on Add Columns link.

packages features

3.2 Add columns for pricing table

Now, you can add as many pricing table columns as you want. There are three sections for each column:

3.2.1 Pricing Column Details

Here you have to give the details of pricing package like package name, price, features, button text, button link, and ribbon text. To make one of the columns larger than the other columns, mark the Enlarge Column option. Each feature has a tooltip box, where you can give a summary of the features. It will appear as a tooltip in the pricing table when you hover over on the feature. To show the check icon in the package features just mark the checkbox and to show cross icon unmark the checkbox. You can also set Font Awesome Icon for each button by putting the icon class in the Button Icon textbox.

pricing column sections
3.2.2 Pricing Column Colors

Here you can select colors separately for various parts of the pricing table by the help of ColorPicker. It is divided into three parts, which will help you select the color easily for every parts of the pricing table.

3.2.3 Pricing Column Special Options

This is special because this section will help you to give a better visual appeal to boost the attractiveness of your pricing table by including images or videos on your packages. By using the WordPress Media Uploader you can easily add images for each package individually. You can also add videos (YouTube only) for each package by entering the YouTube video URL in the given text field. If Package Image or Video is enabled in General Settings under Pricing Table Settings, it will be displayed along with the package. You can also set the width of the images and it is recommended, because it will help you show the accurate size of the image in the pricing table. Similarly, the height of the video should be set for the video.

3.3 Delete and Hide One Or Many Columns

There is a Trash icon on the top right of each column to delete the column. There is also a Switch On icon next to the each trash icon to disable / hide a column instead of deleting it. You can reactivate the column again by clicking on the Switch Off icon.

hide delete column

3.4 Pricing Table Settings

At the bottom you will get Pricing Table Settings where you can set up the table more attractively. There are four sections here:

3.4.1 General Settings

General Settings is the main settings of the pricing table. Here, you have to ensure the availability of various options of the pricing table by enabling those options. At first, to display the pricing table in your blog posts / pages you have to mark the Enable Pricing Table checkbox. Some other options like tooltips, ribbons, feature icons, package images, and videos are also needed to enable for display in the pricing table. You can also choose various check and cross icon to display in the pricing table.

general settings
3.4.2 Structural Settings

In this section you have to set up the structure of the pricing table, like width, height and margin. You can set the container width that indicates the total width of pricing table. Leaving pricing table container width blank will set the container width at 100% by default. You can also set the number of columns (maximum of twelve columns) in each row. By disabling the auto column width you can set space between each column, and if the caption column is enabled, then you can also set the caption column width.

structural settings
3.4.3 Font Settings

In this section you can choose various fonts from Google Font library. Find a Google Fonts that you'd like to use on your pricing table. When you find the desired font, click on the Quick-use icon.

font settings

'Quick-use' icon will redirect you to the selected font page where you'll be asked to choose the styles and character sets for your selected font. Then you will find a generated code in the Standard tab. You don't need to copy the whole code, just add an URL link without http: or https: (e.g. //,700) Then you will be provided the Font-Family for your selected font. Enter the primary and secondary font family for your pricing table, e.g. 'Roboto Condensed', serif. The primary font-family will affect the Title and Price sections and secondary font-family will affect the rest of the sections.

font settings
3.4.4 Advanced Color Settings

Here, colors can be selected for some more options. For example, if the caption column is enabled, then the column color can be selected. You can also change the background color of tooltip as well as it's font color. Column Shadow Color and Shadow Highlighted Color can also be selected here.

Advanced Color Settings

After completing all the necessary fields for your pricing column click on Add Package button. Then you will get a SHORTCODE of newly created pricing table with an unique ID, which will be generated automatically. Now, paste the shortcode in your posts or pages where you would like to show pricing table and publish. Visit the newly created post/page to see the magic! :) Later, you can Edit, Delete and Reorder pricing columns and features at any time.

table lists

I've used the following fonts, icons or other files as listed.

Real Web Care