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.

WP Asia

<p>A beautiful and easy customizable set of Gutenberg blocks to create pricing table section for the new editor. Easily adjust the following parameters:</p>
<p>Set background color<br />
Change featured table layout style<br />
Adjust images, fonts, texts, price and currencies<br />
Wide and narrow layout support<br />
Supports 5 different design layouts</p>


Kenzap Pricing

A beautiful and easy customizable set of Gutenberg blocks to create pricing table section for the new editor. Easily adjust the following parameters:

JKL Pricing Tables vs Kenzap Pricing