jekkilekki

<p>I’ve wanted to add SIMPLE Pricing Tables to my website for a while but many of the<br />
plugins I tried out were either Freemium (requiring me to purchase the full version<br />
in order to unlock the full functionality) or more complicated than I actually wanted.</p>
<p>THIS plugin is exceptionally simple.</p>
<ol>
<li>Step 1: Type the shortcode tags <code>[jkl-pricing-table] ... [/jkl-pricing-table]</code></li>
<li>Step 2: Add an <code><ol></code> ordered list for your Pricing Table</li>
<li>Step 3: Tweak until it looks right</li>
</ol>
<p>Requires WordPress 3.5 and PHP 5.</p>
<h4>Special Features</h4>
<ul>
<li>Styled like <a href="http://foundation.zurb.com/docs/components/pricing_tables.html" rel="nofollow ugc">Zurb Foundation 5 Pricing Tables</a></li>
<li>Utilizes CSS3 for interesting transition effects (like scaling)</li>
</ul>
<h4>How the Plugin works</h4>
<ol>
<li>The shortcode expects an ordered list of ordered lists</li>
<li>The primary ordered list is the names of your Pricing Options (Basic, Business, etc)</li>
<li>The secondary ordered lists are the content within your Pricing Options</li>
<li>Using jQuery, the plugin finds each element within the ordered lists and adds<br />
specific CSS classes to them based on their order (see below)</li>
<li>The SECOND Pricing Option is always set to be “popped out” by default and when<br />
another table is not hovered over</li>
</ol>
<h4>Translations</h4>
<ul>
<li>English (EN) – default</li>
<li>Korean (KO) – upcoming</li>
</ul>
<p>If you want to help translate the plugin into your language, please have a look<br />
at the <code>.pot</code> file which contains all definitions and may be used with a [gettext]<br />
editor.</p>
<p>If you have created your own language pack, or have an update of an existing one,<br />
you can send your [gettext .po or .mo file] to me so that I can bundle it in the<br />
plugin.</p>
<h4>Contact Me</h4>
<p>If you have questions about, problems with, or suggestions for improving this<br />
plugin, please let me know at the <a href="https://wordpress.org/support/plugin/jkl-pricing-tables" rel="ugc">WordPress.org support forums</a></p>
<p>Want updates about my other WordPress plugins, themes, or tutorials? Follow me <a href="http://twitter.com/jekkilekki" rel="nofollow ugc">@jekkilekki</a></p>
<h4>Acknowledgements</h4>
<p>This plugin uses:</p>
<ul>
<li><a href="http://jquery.com/" rel="nofollow ugc">jQuery</a> licensed under MIT License or GNU General Public License (GPL) Version 2</li>
</ul>
<h4>License</h4>
<p>This program is free software; you can redistribute it and/or modify it under the terms<br />
of the GNU General Public License as published by the Free Software Foundation; either<br />
version 2 of the License, or (at your option) any later version.</p>
<p>This program is distributed in the hope that it will be useful, but WITHOUT ANY<br />
WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A<br />
PARTICULAR PURPOSE. See the GNU General Public License for more details.</p>
<p>You should have received a copy of the GNU General Public License along with this<br />
program; if not, write to the Free Software Foundation, Inc., 51 Franklin St, Fifth<br />
Floor, Boston, MA 02110-1301 USA</p>
<h3>How To</h3>
<h4>How To Use the Plugin</h4>
<ol>
<li>Type the shortcode tags</li>
<li>Create an ordered list <code><ol></code> within the tags</li>
<li>Type the heading for your first table in the first <code><ol></code> item and hit return</li>
<li>TAB the <code><ol></code> in to add the remainder of your content for the first table</li>
<li>Un-indent the <code><ol></code> to write the heading of your second table</li>
<li>TAB in for the remainder of the content in your second table</li>
<li>Rinse, repeat for multiple tables (supports up to 5 in a row)</li>
</ol>
<h4>Example of Usage</h4>
<pre><code>[jkl-pricing-table]
<ol>
  <li>Basic
    <ol>
      <li>$150</li>
      <li>Logo only</li>
      <li>Content 1</li>
      <li>Content 2</li>
      <li>Deliverables</li>
      <li><a href='#'>Select Now</a></li>
    </ol>
  </li>
  <li>Business
    <ol>
      <li>$250</li>
      <li>Logo + Business Cards</li>
      <li>Content 1</li>
      <li>Content 2</li>
      <li>Deliverables</li>
      <li><a href='#'>Select Now</a></li>
    </ol>
  </li>
</ol>
[/jkl-pricing-table]
</code></pre>
<h4>Special CSS Classes and How to Style the Plugin</h4>
<p>The plugin uses jQuery to dynamically add the following CSS classes to the ordered<br />
list elements. Use these classes in your Custom CSS if you want to change things.</p>
<ol>
<li><code>.pricing-table</code> = Each first level ordered list item (<code><ol><li></code>)</li>
<li><code>.price</code> = The FIRST second level list item (<code><ol><li><ol><li></code>)</li>
<li><code>.description</code> = The SECOND second level list item</li>
<li>List items after this have no special styling until the end</li>
<li><code>.deliverables</code> = The SECOND-TO-LAST second level list item</li>
<li><code>.cta-button</code> (Call To Action button) = The LAST second level list item (it should be an <code><a></code> link)</li>
<li><code>.button</code> = The <code><a></code> link in the <code>.cta-button</code> list item</li>
</ol>
<p>When applying custom CSS to change the design of your plugin, please reference these<br />
classes as <code>.pricing-table .class</code></p>
<h4>Example of CSS Classes after jQuery assigns them</h4>
<pre><code>[jkl-pricing-table]
<ol>
  <li class="pricing-table">Basic
    <ol>
      <li class="price">$150</li>
      <li class="description">Logo only</li>
      <li>Content 1</li>
      <li>Content 2</li>
      <li class="deliverables">Deliverables</li>
      <li class="cta-button"><a class="button" href='#'>Select Now</a></li>
    </ol>
  </li>
  <li class="pricing-table">Business
    <ol>
      <li class="price">$250</li>
      <li class="description">Logo + Business Cards</li>
      <li>Content 1</li>
      <li>Content 2</li>
      <li class="deliverables">Deliverables</li>
      <li class="cta-button"><a class="button" href='#'>Select Now</a></li>
    </ol>
  </li>
</ol>
[/jkl-pricing-table]
</code></pre>


JKL Pricing Tables

This is probably the SIMPLEST Pricing Tables plugin you'll ever use. Just type an ordered list of ordered lists within the shortcode tags.

bradvin

<p>Have you ever wanted to show a lot of data in a table, but hate how badly it scales on smaller mobile devices? FooTable solves this problem by hiding certain columns on smaller devices, but still allowing the user to expand each row to see the columns that were hidden</p>
<p><a href="http://fooplugins.com/plugins/footable-lite/" rel="nofollow ugc">FooTable WordPress Homepage</a> |<br />
<a href="http://fooplugins.com/footable-lite/documentation/" rel="nofollow ugc">FooTable WordPress Documentation</a> |<br />
<a href="http://fooplugins.com/plugins/footable-jquery/" rel="nofollow ugc">FooTable jQuery Homepage</a> |<br />
<a href="https://github.com/bradvin/FooTable" rel="nofollow ugc">FooTable jQuery GitHub Repo</a> |<br />
<a href="http://fooplugins.com/footable-demos/" rel="nofollow ugc">FooTable jQuery Demos & Docs</a></p>
<p><strong>features</strong></p>
<ul>
<li>Make your existing HTML tables responsive</li>
<li>Target only the tables you want using a CSS selector</li>
<li>Add sorting, filtering and paging to your tables</li>
<li>Automatically hide certain number of columns on tablets and phones</li>
<li>Set custom breakpoint sizes</li>
<li>Choose from 3 table themes or use your own CSS</li>
<li>Ability to include custom CSS</li>
<li>Works with TablePress</li>
</ul>


FooTable

FooTable's goal is simple : to make HTML tables look awesome on all devices!

JKL Pricing Tables vs FooTable