Introduction

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

installation

Installing 'WRC Pricing Tables Ultimate' 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. Install by ZIP File

1 - Go to the WordPress admin panel and then navigate to Plugins > Add New > Upload.

install plugin

2 - Choose the plugin zip file named as wrc-pricing-tables-ultimate-v1.0.zip and click the Install Now button

select file

3 - Wait untill the installation process ends. When you will see the text, Plugin installed successfully click on Activate Plugin button.

install process

4- Congratulations! you are ready to create your pricing table. Click on Create Table link to create a pricing table from 13 ready-made templates.

activate plugin

2. Install by FTP

  • Upload the wrc-pricing-tables-ultimate folder with all the files located in it to your WordPress plugin directory (/WORDPRESS-DIRECTORY/wp-content/plugins/) [e.g. www.yourdomain.com/wp-content/plugins/]
  • From your WordPress dashboard, choose Installed Plugins option under the Plugins category
  • Locate the newly added plugin and click on the Activate link to enable its features.
  • After successfully activating the plugin, you are ready to create your pricing table. Click on Create Table link to create a pricing table from 13 ready-made templates.

Quick Start

From WordPress admin panel, navigate to Pricing Tables > Templates. Select your table from 50+ ready-made templates and click on Create Table button on mouse over. You will get a ready-made pricing table instantly! Navigate to All Pricing Tables and start configuring table content.

templates

Add New Table & Features

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

add new

2. Enter the pricing table name as well as corresponding pricing column features. The column features are divided into six parts are as follows:

add pricing table
  • Feature Name: Enter feature name here.
  • Feature Category: Divide the features hereunder by category. Enter same category name for same type of features.
  • Feature URL: Enter feature URL here.
  • Feature Description: Enter a short description of each feature. It wil appear as a tooltip in the pricing table.
  • Feature Type: Select feature type here. There are 5 types available:
    • Text: Select this to show only text.
    • HTML: Select this to enter HTML code in the feature section.
    • Checkbox: Select this to show tick/cross icon.
    • Text & Checkbox: Select this to show both text & tick/cross icon.
    • Star or Checkbox: Select this to show star or tick/cross icon
  • Feature Icon: Enter Font Awesome Icon here. 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 fas fa-camera-retro class.

Finally, click on Add Table button.

Add Columns

3. Mouse over on your recently created pricing table and click on Add Columns link. You can add as many pricing table columns as you want. There are three sections for each column:

add columns

3.1 Pricing Column Details

There are 6 sections here:

pricing column sections
  • Enlarge Column: Mark the checkbox to make a package special. It will make the column slightly larger than the others columns.
  • Package Name: Enter package name here. You can give a short description also in the textarea field.
  • Package Price: Enter package prices here. Package price is the current price and Cut Price is the previous price. Enable Pricing Toggle if you want to show another price for this package.
  • Package Feature: Enter package features here. Feature input field will be set as you have declared feture type in the Edit Feature section. Each feature has a tooltip box, where you can give a summary of the feature. It will appear as a tooltip in the pricing table.
  • Package Button: Enter button text, URL and font awesome icon class here. You can add PayPal button by enabling PayPal Code. See the below image and fillup necessary fields for PayPal button.paypal usage
  • Package Ribbon: Enter ribbon text here to make the package more attractive.

3.2 Pricing Column Colors

In this section, you can select colors for your pricing table by the help of ColorPicker. It is divided into three categories:

  • Background Colors: Set the background color for each part of the pricing table from here.
  • Font Colors: Set the font color for each part of the pricing table from here.
  • Button Colors: Set the button background and font color of the pricing table from here.

3.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 packages. You can also set image width, height, margin and opacity in General Settings. It will help you to show the accurate size of the image in the pricing table. Similarly, height of the video should be set for the video.


Hide or Delete Columns

4. There is a Trash icon on the top right of each column to delete the column. There is also a Switch On/Off 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

Shortcode

5. 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! :)

table lists

edit features

6. You can Edit, Delete and Reorder pricing column features at any time by clicking on the Edit Features link in the pricing table lists.

edit features

general settings

At first, you have to enable the pricing table to display. You can also change the table name here. There are several categories here:

general settings
  • Shortcode: There are two shortcodes for the pricing table. For desktop view there are no differences, but in tablet and mobile view there are differences. In tablet, Shortcode1 will divide pricing table column into two columns per row, where in mobile, each column of the price table will be displayed below each other. Shortcode2 will just adjust the pricing table column by the screen size.
  • Column Border: Enable table border, feature border and caption column border here.
  • Column Shadow: Enable pricing column and caption column shadow here. You can disable column shadow on highlight by unchecking the checkbox.
  • Column Gradient: Enable/Disable title, price and button section's background gradient here.
  • Column Features: To display feature category, mark Enable Feature Categories checkbox. Other two options will enable or disable feature icons (font awesome) and tooltips.
  • Show/Hide: If caption column is enabled, you can set background for caption column title by enbaling Show Caption Title BG.Hide Empty Features option will hide those features which are empty. Hide Feature Name and Hide Caption Feature Name will hide feature value and feature name.
  • Price Toggle: To display pricing toggle, mark Enable Pricing Toggles checkbox. It will open 3 textbox fields, where you can enter toggle texts, e.g. monthly and yearly. Special Text field is for any kind offer if you have for the second toggle.
  • Package Ribbons: Enable ribbon by marking the checkbox here. The table has 5 different types of ribbons to show.
    ribbons
  • Package Image: To display image in price section of each column, mark the checkbox here. You will get 6 options here:
    • Use Image as Background Image: Mark this checkbox if you want to show image as a background image for pricing columns. Otherwise, image will be shown in price section only.
    • Choose how you like to display Images: Here you have to select how to display image. You can display images with/without price and title.
    • Image Width: Enter width of the image here.
    • Image Height: Enter height of the image here.
    • Image Margin: Enter image margin here. It will help you to place the image in the column properly. If you want to set image at the middle center, just enter auto.
    • Image Opacity: To display price on image more clearly, you can set an opacity of the image.
  • Package Video: To display video (YouTube Only) in price section of each column, mark the checkbox here. You will get 4 options here:
    • Choose how you like to display Video: Here you have to select how to display video. You can display videos with/without price and title same as images.
    • Video Height: Enter height of the video here.
    • Allow Full Screen?: Mark this checkbox to allow full screen on YouTube video.
    • Show YouTube logo?: Mark this checkbox to show YouTube logo on player.
  • Tick/Cross Icons: Select your preferred tick and cross icon from 20 different icons. You can also use font awesome tick and cross icon by enabling Enable Font Awesome Tick/Cross. You just need to enter font awesome icon class for tick and cross icon.
  • Star Icons: If you want to show star icon rather than tick/cross icon, you can mark the checkbox here. To show this icon on pricing column, you have to set feature type as Star or Checkbox from Edit Features section.

structural settings

Structural Settings is divided into 6 categories are as follow:

structural settings
  • Structure: There are six options here:
    • Pricing Table Container Width: Enter 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.
    • Number of Columns per Row: How many columns you want to show per row, you can set from here by entering a value. Maximum six columns is recommended to get the best output.
    • Package Column Border Radius: Enter pricing column border radius here if you want to.
    • Caption Column Border Radius: Enter caption column border radius here if you want to.
    • Enlarge Column on Hover: Mark this checkbox to enlarge column on mouse over.
    • Display Price at the Bottom: Mark this checkbox to set price at bottom instead of top of the pricing column.
    • Display Price in Circle: Mark this checkbox to display prices in circle.
  • Caption Column & Package Column: Set pricing column and caption column width and space between column here. To set column width and space manually, mark Disable Auto Column Width checkbox. It will allow you to set column width and space of your choice. Otherwise, width and space will be adjusted automatically. To show caption column with pricing column, simply mark Enable Caption Column checkbox.
  • Width: Set button, tooltip and pricing toggle width here.
  • Height: Set height of differnt parts of the pricing column here.
  • Position/Direction: There are 7 options here:
    • Pricing Toggle Position: If pricing toggle is enable, you can set the postion of the toggle button here.
    • Feature Label Font Direction: Set pricing column feature contents direction here.
    • Feature Label Padding (Left): Enter a value to set space at left of feature content.
    • Caption Column Title Direction: If caption column is enable, you can set caption column title direction here.
    • Caption Column Font Direction: Set caption column feature contents direction here.
    • Align Price Unit at Right: If your price unit comes at right of the price, you can set price unit at right by marking the checkbox.
    • Float Tick/Cross Icon at Left: By default, tick/cross icon shows at right of the feature content. Mark this checkbox to float it at left.
  • Show/Hide: Here, you can hide different parts of the pricing column by switching off.

font settings

Here, you can set font family and font size for the pricing table. There are 6 categories here:

font settings
  • Font Family: 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.
  • Title: If caption column is enable, you can set the font size of the caption title from Pricing Table Name Font Size. Other two options will change the font size of column title and title description.
  • Price: Set the font size of pricing table prices here for both big and small fonts.
  • Feature: If feature category is enable, set the font size of Feature Category name here. Other two options are for Feature Name Font Size and Feature Value Font Size.
  • Button & Ribbon: Set the font size of button and ribbon text here.
  • Price Toggle: Set the font size of price toggle button text here.

advanced color settings

Advanced Color Settings is for some of the other items of the pricing table. This section is divided into 6 categories are as follows: 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
  • Caption Column: There are six options here are described below:
    • Caption Border Color: If caption border is enable, set border color here.
    • Caption Title BG Color: If caption column and Show Caption Title BG are enable, set caption title background color here.
    • Caption Title Font Color: If caption column is enable, set caption title font color here.
    • Caption Feature BG Color 1: Set background color for odd rows of caption feature here.
    • Caption Feature BG Color 2: Set background color for even rows of caption feature here.
    • Caption Feature Border: If caption column border is enable, set the border color for caption feature rows here.
  • Tooltips: Set tooltip background and font color here.
  • Price Toggle:
    • Pricing Toggle Active BG: If pricing toggle is enable, set the active button background color here.
    • Pricing Toggle Normal BG: If pricing toggle is enable, set the inactive button background color here.
    • Pricing Toggle Normal Font: If pricing toggle is enable, set the active button font color here.
    • Pricing Toggle Active Font: If pricing toggle is enable, set the inactive button font color here.
    • Pricing Toggle Special Font: If pricing toggle is enable and Special Text filed under General Settings is not empty, set the font color for special text here.
  • Feature Colors:
    • Feature Category BG Color: If feature category is enable, set the background color for category row here.
    • Feature Category Font Color: If feature category is enable, set the font color for category text here.
    • Feature Name Font Color: Set the font color for feature name here.
    • Feature URL Color: If caption column is enable, set the font color for feature name that has a link.
    • Feature URL Hover: If caption column is enable, set the font hover color for feature name that has a link.
  • Font Awesome: If font awesome tick and cross icon is enable, set the font color for tick and cross icon here.
  • Column Shadow Colors: If column shadow is enable, set the shadow color in the first option. Also in the second option, set the highlighted color of the shadow on mouse over.

global settings

GLobal Settings are mainly to control CSS & JS files. There are 6 options here:

global settings

Options

  • Minify Pricing Table CSS & JS: To minify pricing table CSS & JS files, enbale this option.
  • Enable Plugin Default Google Font: Default font of the pricing table is Roboto Condensed. If you want to use this font in the table enable this option.
  • Enter Google Fonts URL link: To use a different font than default one, find a Google font that you'd like to use on your pricing table and add an URL link without http: or https: (e.g. //fonts.googleapis.com/css?family=Roboto+Condensed:400,700) here.
  • Enable Font Awesome in Theme: If font awesome CSS file already enqueued in your theme or any other plugins, no need to enble this option. If no font awesome CSS file is enqueued in your theme, you have to enbale this option to show font awesome icons.
  • Enable Font Awesome in WP Admin: Same conditions as Enable Font Awesome in Theme.
  • Add View Port Meta in the Header: The viewport is the user's visible area of a web page. Browsers on tablets and mobile phones devices, scaled down the entire web page to fit the screen. If your theme doesn't have any viewport meta tag in the <head> section, enable this option to add viewport meta.

export table

Export Table:

global settings

Click on Download Export File button to generate a JSON file for you to save in your computer. This backup file contains all the configuration and setting options of your pricing tables. Note that it do NOT contain posts, pages, or any relevant data, just your all pricing table options. After exporting, you can either use the backup file to restore your settings on this site again or another WordPress site.

import table

Import Table:

global settings

Select a json file to upload that you exported before from Export Table tab, and click on Upload file and import. Wordpress do the rest for you.

Video Demo

Sources & Credits

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