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.

Superb

Suplugins

<p>Responsive & SEO Optimized tables. Get your Google Featured Snippets. Different table designs, table shortcodes & lightweight code.</p>
<p><strong><a href="https://superbthemes.com/demo/superb-tables/" rel="nofollow ugc">Click here to view the demo!</a></strong></p>
<h3>Features</h3>
<ul>
<li>Table Shortcodes</li>
<li>Multiple Color Schemes</li>
<li>Use Themes Own Table Design</li>
<li>Schema Markup (Micro Data)</li>
<li>Create Unlimited Tables</li>
<li>Create Unlimited Rows</li>
<li>Create unlimited Columns</li>
<li>SEO-friendly Tables With Schema markup</li>
<li>Purple Color Scheme</li>
<li>Black/White Color Scheme</li>
<li>Swap around on columns & rows with drag n’ drop</li>
<li>Delete Tables & Remove Them From Your Database</li>
<li>Gives you a better chance to get Google Featured Snippets</li>
<li>Friendly User Support</li>
<li>GDPR Compliant </li>
<li>W3C Valid Code</li>
<li>WYSIWYG Functionality Editor</li>
</ul>
<h3>Configuring the plugin</h3>
<p>Once you’ve installed the plugin, check the left sidebar, and you will notice the Superb Table section. Click on it, and you can now create your first table. Just click on the Add New Table button.</p>
<p>Feel free to add as many columns and rows as you want—inserting rows and columns is extremely easy.</p>
<p>You have a few options to make your table stand apart. First, choose one of the three color schemes: standard, purple, or black. Second, choose your table design: default or custom. Block, left, and inline-block are the floating modes for your table. Finally, enable or disable the full width of the table.</p>
<p>Once you finish your table, name it and save it. All you have to do now is to copy the shortcode and paste wherever you want, you can for example embed it in the Gutenberg Shortcode Block! (It works in the classic WordPress editor too)</p>
<p>Consider purchasing our <a href="https://superbthemes.com/plugins/superb-tables/" rel="nofollow ugc">premium version</a> for $11 to unlock more features!</p>
<h3>Why use a HTML table</h3>
<p>Displaying data within a comparison table is beneficial for not only readers but also content creators. A table does a better job than long paragraphs of text, underlined phrases, and bulleted lists. It shows a lot of information side by side in a concise format. Bloggers and content creators should create tables and insert the data. There’s no need to search for breathtaking expressions, cool descriptions, or digestible lists of items. It’s just pure data, and everyone is happy with this situation. You can read our full guide on <a href="https://superbthemes.com/how-to-add-a-table-to-your-wordpress-website/" rel="nofollow ugc">How to Add a Table to Your WordPress Website</a> with Superb Tables.</p>
<h3>Responsive Tables</h3>
<p>We developed Superb Tables mobile friendly by taking responsiveness into account, and as a result, you can make a WordPress table responsive by using our plugin. The tables are fully responsive regardless of the number of rows and columns. The plugin works on all mobile devices and tablets (iPhone, Android etc.). The plugin works with AMP.</p>
<h3>SEO Friendly WordPress Tables With Schema Markup</h3>
<p>“Schema markup“ and “featured snippets“ are two interconnected terms that are being used by more and more bloggers, SEO practitioners, and developers. Have you noticed that Google now provides complex answers in the form of lists, tables, paragraphs, or videos directly on the results page? Those are featured snippets.</p>
<p>Moz claims that 23% of all search results include a featured snippet—a descriptive box displayed on the search results page providing information for your query. It may include paragraphs, lists, videos, or tables. You have to consider featured snippets when choosing a table plugin—can it help Google generate a featured snippet from the data within your table?</p>
<p>We developed Superb Tables with featured snippets in mind, and you can use the plugin worry-free. We used schema markup, which is the code that helps search engine bots generate snippets from your content, including tables. It’s a great way for affiliate websites and blogs to promote their content.</p>
<p>You must use WordPress tables with schema markup to get featured snippets on search engines, and Superb Tables is a reliable solution in this respect.</p>
<h3>Add Tables everywhere & use them for Any Purpose</h3>
<p>You can insert the SEO optimised tables with microdata everywhere through the shortcode. For example in a popup, widgets, Gutenberg blocks, email newsletter sent from your WordPress website. You can also insert it on any post or page, even category pages, blog feed, search page and your 404 page! The plugin is made for affiliates marketers and affiliate websites, having a good SERP rank in Google and Bing is critical. When you’re looking to improve your ranking then all of your plugins must be SEO optimized, otherwise it’s gonna be hard to create monetization through ads programs such as AdSense and Amazon Associates Program.</p>
<p>We know that business is important for any modern blog or affiliate marketing website that’s looking to make a revenue from it. Remember to use HTTPS (SSL) on your website, a CDN and lightweight stats tracking tools such as Google Analytics to better your SEO as well.</p>
<h3>Guide to creating your Superb Tables</h3>
<ol>
<li>In the wordpress admin panel, go to the sidebar and click ‘Superb Tables’.</li>
<li>Click the green ‘Add new table’ in the top left corner</li>
<li>Fill in your table data, click ‘Save’</li>
<li>Click ‘Superb Tables’ in the left sidebar and copy paste the ‘Table Shortcode’</li>
<li>Insert the Table Shortcode (For example [spbtbl_sc id=1] ) in a post, page, widget or in HTML.</li>
</ol>
<p>You’re done!</p>
<h3>Resources & Inspiration</h3>
<ul>
<li>Auto-Expand: https://codepen.io/vsync/pen/frudD</li>
<li>Data Table: https://codepen.io/alassetter/pen/cyrfB</li>
<li>Table DnD: https://github.com/isocra/TableDnD/</li>
<li>Table icon: https://www.iconfinder.com/icons/1608863/table_icon#size=256</li>
<li>Custom confirm: https://codepen.io/Ana_Champion/pen/JRbZEL</li>
<li>Table design inspiration: https://codepen.io/lukepeters/pen/bfFur</li>
<li>Table design inspiration: https://codepen.io/alassetter/pen/cyrfB</li>
<li>Table design inspiration: https://uicookies.com/wp-content/uploads/2018/05/table-responsive-v2-1000×750.jpg</li>
<li>Table design inspiration: https://uicookies.com/wp-content/uploads/2018/05/table-responsive-v1.jpg</li>
</ul>


Superb Table (SEO Optimized Tables With Schema)

Responsive & SEO Optimized tables. Get your Google Featured Snippets. Different table designs, table shortcodes & lightweight code.

JKL Pricing Tables vs Superb Table (SEO Optimized Tables With Schema)