Thank you for purchasing this item, supporting our work. Please do not forget to rate our product.
We would be happy to see your comments and stars.

Twitter: http://twitter.com/granthweb
Facebook: http://facebook.com/granthweb

If you like traditional Pricing Tables, but you would like get much more out of it, then this rodded product is a useful tool for you.
Beside the usual pricing table style Videos (Youtube, Vimeo, Screenr) and Images are also supported with optional responsivity.
It's very easy and fast to create stunning tables and integrate them into your WordPress site using Admin Panel.
You will surely find the one most appropriate for you, which can be customized in a few seconds.

1. Features

  • 90+ demo table template are included.
  • Unique CSS class name to prevent class conflicts.
  • Video (Youtube, Vimeo, Screenr and HTML5 video) support.
  • HTML5 audio support.
  • Responsive Image support.
  • PayPal button support.
  • s2Member plugin generated PayPal shortcode support.
  • Google map - 8 pins are included and uploading custom pins are supported.
  • Huge Admin Panel with tons of options.
  • Visual shortcode editor.
  • Optional and customizable responsivity(!) to fit to your theme.
  • Any number of columns up to 5.
  • Unlimited number of colum descriptions.
  • Unlimited color combination of columns.
  • Unlimited color of tooltip text and background color.
  • Sortable columns and table descriptions via 'Drag and Drop'.
  • 5 shadow types.
  • 32 ribbons are included and uploading custom ribbons are supported.
  • 36 custom icons (4 color set) for column descriptions - uploading custom icons are supported.
  • 3 size of buttons 3 icons for buttons - uploading custom icons are supported.
  • System and Google Web Font (400+ fonts) support.
  • Translation ready with .mo .po files.
  • Compatible with the latest WordPress version (currently 3.51).
  • Layered PSDs for ribbons.
  • Only the point.

Version information

v2.2

  • [FIX] Uninstall hook error fix.
  • [FIX] Skin loading errors fix.
  • [FIX] Submit button wrapper bug fix.
  • [FIX] Description row text alignment reset bug fix.
  • [FIX] CSS generating errors fix with disabled responsivity.
  • [IMPROVEMENT] Added the option the equalize row height.
  • [IMPROVEMENT] Tiny improvements in layout CSS file.

v2.1

  • [FIX] Team icons (email, skype, twitter, facebook) classname bug fix in shortcode selector.
  • [FIX] Tooltip custom color bug fix.
  • [FIX] Column body text alignment bug fix.
  • [IMPROVEMENT] Improved CSS reset to reduce CSS conflicts.
  • [IMPROVEMENT] Improved documentation, add FAQ part.
  • [IMPROVEMENT] Changed CSS loading method, huge page load time improvement. (important note about this)
  • [IMPROVEMENT] Added the option to add custom CSS via admin panel without editing stylesheet file. (More info - FAQ 7)
  • [IMPROVEMENT] Added the option to add custom buttons. (More info - FAQ 3)

v2.0

  • Added Google map, HTML5 video & audio support (shortcodes).
  • PayPal button support - PayPal forms or shortcode generated forms (e.g. s2Member plugin).
  • Added visual shortcode editor for admin.
  • Added the possibilty to easily add/upload custom icons.
  • Added new demodata and demo page for new fetures.
  • Minor bugfixes and improvements in admin and frontend.

v1.2.1

  • Javascript error fix in admin.

v1.2

  • Minor bugfixes and improvements in admin.

v1.1

  • Minor bugfixes and improvements in admin and frontend.

v1.0

  • Initial release.

Browser support

  • Chrome
  • Firefox 3+
  • Internet Explorer 8+
  • Opera
  • Safari

2. Sources and credits

Following sources has been used.

  • FONTS
    • - Arial (standard)
    • - Verdana (standard)
    • - 400+ Google Web Font (optional)
  • IMAGES & ICONS
    • - See in 'licences' folder
  • JAVASCRIPT
  • OTHER
    • - MediaElement player skin (designed by Orman Clark) More info

Notes

Please read the licenses.txt in 'licences' folder.

3. Install WordPress

First, you should install WordPress on your server if you don't have a working version already installed.

Installation steps:

  • Download the latest release of WordPress. http://wordpress.org/download/
  • Unzip the downloaded file to a folder on your hard drive.
  • Upload the the unzipped files to a folder on your server, using ftp. (example: http://yourserver/wordpress)
  • Type this folder path to your browser's address bar.
  • Follow the instructions until the installation is complete.

Further instructions can be found here: http://codex.wordpress.org/Installing_WordPress.

Notes

Before installing WordPress ensure that you and your web host have the minimum requirements to run WordPress. http://wordpress.org/about/requirements/

4. Install & update the plugin

There are two ways to install the plugin. Using Wordpess Plugin Uploader or FTP. Before intstalling the plugin you should unzip the downloaded package to a folder on your hard drive. After extracting the file you can find some folders and a zipped file "go_pricing.zip" in the root of your folder. Go_pricing.zip contains the plugin data.

WordPress Plugin Uploader

If you use "WordPress Plugin Uploader" to install the plugin, then you should NOT unzip go_pricing.zip file.

Installation steps:
  • Log into your WordPress admin panel.
  • Navigate to Plugins » Add New.
  • Click to Upload.
  • Click to Choose File and select thego_pricing.zip file.
  • Click to  Install Now.

FTP


Installation steps:

  • Unzip the go_pricing.zip file to a folder on your hard drive.
  • Upload the go_pricing folder to the WordPress' plugins folder (example: http://yourserver/wordpress/wp-content/plugins/) on your server using FTP.

Notes

After uploading plugin, you should activate it. Navigate to Plugins in WordPress navigation, then find the Go - Responsive Pricing & Compare Tables plugin, then click to Activate.

After activating the plugin you should import demo data to use the demo tables included in the package.

Updating the plugin - new in v 2.1

After updating the plugin you should force the plugin to create or regenerate your static CSS file. You can read about CSS files here.

This can be achieved in two ways:

  • Deactivate (NOT uninstall!) the plugin, then activate the plugin.
  • Navigate to Go Pricing » General settings and save the settings.

5. Setting up and creating tables

The plugin has tons of features to fit your site best. It's very important to set properly before inserting shortcode.

Notes

The plugin has 3 menu items:

5.1 Import & export demo data

You can import & export demo data. This feature helps you importing demo data or moving your tables from your site to another site or create a backup file. Demo data contains all table data, so after importing demo data maybe you may modify general settings to fit your site.

Importing data:

  • Open the file that contains demo data in a text editor and copy its content to the clipboad.
  • Navigate to Go Pricing » Import & export and paste the content of the clipboad into the textarea, then click to import.

Exporting data:

  • Navigate to Go Pricing » Import & export and copy the the content of the textarea to the clipboad.
  • Create a new file on your hard drive using a text editor and paste the content of the clipboad into this file, then save.

Notes

Steps of importing demo data:

  • After extracting the the downloaded zip file you can find a folder "demodata" in the root of your folder. The "demodata" folder contains the demo data files. The demodata_all.txt contains all tables, demodata_blue.txt contains only blue tables.
  • Open this file in a text editor and copy its content to the clipboad.
  • Navigate to Go Pricing » Import & export and paste the content of the clipboad into the textarea, then click to import.

5.2 General settings

You can enable or disable responsivity and CSS transitions and modify minimum and maximum widths for tablet and mobile devices.

You can set primary and secondary font (system or Google).
Primary font is used in header (title, price and buttons), secondary font is used in the body part of the table (descriptions, tooltips).

Notes

You can fine tune the plugin to fit your site or CSS framework best.

5.3 Create pricing table

To create tables navigate to Go Pricing. You can create new or modify and clone existing tables. You should set a Pricing table name and Pricing table id first then you should set other parameters. Cloning and sorting via drag n drop rows and columns helps you to create easily tables.

Watch this video for futher information on creating and inserting tables into you website.

Notes

Pricing tables can be inserted to pages/posts via [go_pricing id="my_table"] shortcode. The table name and the id must be unique.

6. Insert tables to content

Pricing tables can be inserted to pages/posts via [go_pricing id="my_table"] shortcode.

The shortcode supports two parameters:
  • id: the pricing table unique id (required)
  • margin_bottom: space below pricing table (optional) - its default value is "20px".

for example: [go_pricing id="my_table" margin_bottom="50px"].

Notes

You can insert any number of pricing tables on your site or even on one single page using these shortcodes.

7. Customize styles

The plugin uses separate stylesheet files for layout and color styles. The static layout CSS file (go_pricing_styles.css) is generated dinamically by the plugin. This static file is generated using db data and go_pricing_dinamic_styles.php file. The go_pricing_styles.css file is generated first time on plugin activation and every time whenever you save table general settings (Go Pricing » General settings).

To modify the main layout file, you should edit and save go_pricing_dinamic_styles.php, then you should save general settings under General settings plugin submenu in WP admin.

The plugin uses 6 skin files for color styles:

  • go_pricing_skin_blue.css
  • go_pricing_skin_earth.css
  • go_pricing_skin_green.css
  • go_pricing_skin_purple.css
  • go_pricing_skin_red.css
  • go_pricing_skin_yellow.css

Each color style has a minified version and a commented dev version with "_dev" suffix. If you would like to modify a skin file, edit the dev version. After editing, remove "_dev" suffix and minify the CSS file. (e.g. http://refresh-sf.com/yui/).

Notes

All CSS files are located in assets/css folder.

The static layout CSS file (go_pricing_styles.css) is generated dinamically by the plugin.

If you edit the dinamic main layout file, don't forget to regenerate the static CSS file.

8. FAQ

You can modify the price size using inline CSS styles.
Original content of input field.

$100<small>per month</small>

Modified content of input field with smaller font size.
To achieve this you should create a <span> wrapper around the price and set font size CSS property.

<span style="font-size:10px;">$100</span><small>per month</small>

If you remove the "sub" price part (e.g. <small>per month</small>) then your price won't be centered vertically. You can modify line height CSS property for vertical centering the text.

<span style="font-size:10px;line-height:15px">$100</span>

When you use html tags don't forget to close them to prevent layout break.

You can create unique header in each column in each table.
To replace the original header header type you should enable "Replace default header type?" option.

Then you should place your HTML code into the "HTML content" textarea and your CSS code into "CSS extension" field.

You can easily any type of buttons to pricing tables.

The plugin supports three types of buttons

  • 1. Regular link button [Regular Button]
  • 2. Submit type button with the pricing table default design [Form submit button (e.g. PayPal)]
  • 3. Custom button (new in v2.1)

The regular button is a simple link with the plugin default button design. It has a button text and a link source and you can also specify the link target.

The submit type button also uses the plugin default button design. It has been designed for simple PayPal buttons. The PayPal default design is hidden. When you click to the button the PayPal form will be submitted. The s2Member plugin also generates this type of code via shortcode.

The custom button is new in v2.1. Selecting this type of button creates only a button wrapper. You should place the button code (HTML or shorcode e.g. WooCommerce) into button content area. You can also add WooCommerce buttons

Example - Submit type button - Create s2Member / PayPal button (plugin button design)

 

Example - Custom button - Create PayPal button (PayPal design)

 

Example - Custom button - Create PayPal button with input field

The table in the screenshot has custom footer height. Read more info about it.

 

Example - Custom button - Add two buttons

In this example we used the plugin default button style. The best and easiest way to add 2 regular type button next to each other to create a regular button and copy and its generated code (2nd screenshot - to get the generated code in Chrome inspector) into this content area.

 

 

You can easily add one of the default or custom icons to button.
To add an icon just click to "Add shortcode" link in "Button options" section.

Icons are designed for medium and large size buttons.
After clicking the link a shortcode selector popup appears. You can select from the built-in icons or upload custom ones. You should also select alignment. e.g. If you would like to place the icon before the text, please choose "Align left". To place the icon after the text you should select "Align left". If you would like to place only an icon (without any text), then you should choose "Align center".

Icon sizes are also should be set when you use custom icons. The size of custom icons size should be 24x24px or 30x30px. When you use an image with 24x24px dimensions you should choose "Medium" icon size. This is ideal for medium buttons. For large buttons please use an image with 30x30px size and set the icon size to "Large".

 

You can easily change the text alignment in each row in column body.
To set the desired alignment. Click one of icons to change text aligment of text in a row as you can see below.

 

You can easily add one of the default or custom icons to the column body.
To add an icon just click to "Add shortcode" link above a row description field in "Body options" section.

After clicking the link a shortcode selector popup appears. You can select from the built-in icons or upload custom ones. You should also select icon alignment. e.g. If you would like to place the icon before the text, please choose "Align left". To place the icon after the text you should select "Align left". If you would like to place only an icon (without any text), then you should choose "Align center".

 

Sometimes it's necessary to add custom css code to plugin css file (frontend).

Some examples:

  • Tiny modification in layout.
  • Conflicts with other plugins' css code.
  • Conflict with other themes' css code.

We have a huge reset part in our plugin css file, and keep it updating to minimize these css conflicts.

We introduced a new feature in v2.1 of the plugin. Now you can add custom css to the plugin frontend css file without directly editing css files. Navigate to Go Pricing » General Settings submenu. You can find a Custom CSS code textarea. You can put your code here. After clicking to "Save" button this code will be added to the end of the main static css file.

 

This method is fast and maintable. You can easily add custom code to the plugin css without file editing, easily via admin panel. These changes also stored in database, so you won't lost these changes when you update the plugin (e.g. because some important changes happen the main css file and you need to update it). When you click to save the changes always will be on the end of the stylesheet file.

Example - Modify footer height for a certain table.

If you would like to apply css modifications for a certain table you should know the table id.
Every table has an id. This is generated form 2 parts. The first part is a prefix "go-pricing-table-", the second part is your table id in admin, for example "demo-blue_01". Your generated table id then become: "go-pricing-table-demo-blue_01".

 

This is the original code from main css file for setting footer height. The default height is 67px, the hover height is 107px (40px difference), and the button wrapper height is 87px (20px difference). These differences are important to keep if change height.

	...

	/* colum footer */
.gw-go-footer,
.gw-go:hover .gw-go-footer,
.gw-go:hover .gw-go-col-wrap.gw-go-current .gw-go-footer,
.gw-go.gw-go-enlarge-current:hover .gw-go-col-wrap.gw-go-current .gw-go-footer {
height:67px;
-moz-transition:all 0.2s linear;
-ms-transition:all 0.2s linear;
-o-transition:all 0.2s linear;
-webkit-transition:all 0.2s linear;
transition:all 0.2s linear;
}
.gw-go.gw-go-enlarge-current .gw-go-col-wrap.gw-go-current .gw-go-footer,
.gw-go.gw-go-enlarge-current:hover .gw-go-col-wrap:hover .gw-go-footer,
.gw-go.gw-go-enlarge-current:hover .gw-go-col-wrap.gw-go-current:hover .gw-go-footer { height:107px; } ... .gw-go-btn-wrap {
bottom:20px;
display:table;
height:87px;
margin-top:20px;
position:relative;
-moz-transition:bottom 0.2s linear;
-o-transition:bottom 0.2s linear;
-webkit-transition:bottom 0.2s linear;
transition:bottom 0.2s linear;
width:100%;
}

If we would like to add 120px to our footer height, then our default height will be 120px+67px = 187px. Every line starts with the table prefix to change only this table style. Save this code as you can read at the begining this section. If you would like to apply general changes, not table dependent, then don't use the the "#go-pricing-table-demo-blue_01" CSS id selector.

#go-pricing-table-demo-blue_01 .gw-go-footer,
#go-pricing-table-demo-blue_01 .gw-go:hover .gw-go-footer,
#go-pricing-table-demo-blue_01 .gw-go:hover .gw-go-col-wrap.gw-go-current .gw-go-footer,
#go-pricing-table-demo-blue_01 .gw-go.gw-go-enlarge-current:hover .gw-go-col-wrap.gw-go-current .gw-go-footer { height:187px; }

#go-pricing-table-demo-blue_01 .gw-go.gw-go-enlarge-current .gw-go-col-wrap.gw-go-current .gw-go-footer,
#go-pricing-table-demo-blue_01 .gw-go.gw-go-enlarge-current:hover .gw-go-col-wrap:hover .gw-go-footer,
#go-pricing-table-demo-blue_01 .gw-go.gw-go-enlarge-current:hover .gw-go-col-wrap.gw-go-current:hover .gw-go-footer { height:227px; }

#go-pricing-table-demo-blue_01 .gw-go-btn-wrap { height: 207px; }
					

You can easily disable button.
To hide a button leave the "Button content" field empty.

Scroll to top