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 Standard' 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-standard-v1.5.7.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 Templates link to create a pricing table from 25 ready-made templates.

activate plugin

2. Install by FTP

  • Upload the wrc-pricing-tables-standard 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 Templates link to create a pricing table from 25 ready-made templates.

Quick Start

From WordPress admin panel, navigate to Pricing Tables > Templates. Select your table from 20+ 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 five parts are as follows:

add pricing table
  • Feature Name: Enter feature name here.
  • 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 3 types available:
    • Text: Select this to show only text.
    • Checkbox: Select this to show tick/cross icon.
    • Text & Checkbox: Select this to show both text & 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 options here are as below:

general settings
  • Enable Table Background: Enable this option to show column border.
  • 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.
  • 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.
  • Column Features: Enable or disable feature icons (font awesome) and tooltips.
  • Column Border: Enable feature border and caption column border here.
  • Show/Hide: 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.
  • Display Price at the Bottom: Mark this checkbox to set price at bottom instead of top of the pricing column.
  • 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:
    • 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.

structural settings

Here you can set the structural options of the pricing table.

structural settings
  • 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.
  • Table Padding: This option will work if Table Background is enable in General Settings. It will work as column border width.
  • Height: Set height of differnt parts of the pricing column here.
  • Width: Set button, tooltip and pricing toggle width here.
  • Pricing Toggle Position: If pricing toggle is enable, you can set the postion of the toggle button here.
  • 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.
  • 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 Font Direction: Set caption column feature contents direction here.
  • Comparison Table: 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.
  • Enlarge Column on Hover: Mark this checkbox to enlarge column on mouse over.
  • Hide which you don't like to display: 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.

font settings
  • 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.
  • 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: These 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 the common items of the pricing table. 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 Background: If caption column is enable, set caption column border color here.
  • Pricing Table Name BG Color: If caption column is enable, set caption title background 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 Background Color: Set tooltip background color here.
  • 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 Table Name Font Color: If caption column is enable, set caption title font color 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.
  • ToolTips Font Color: Set tooltip font 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.
  • 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.

export table

Export Table:

export table

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:

import table

Select a json file to upload that you exported before from Export Table, 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.