HostGator Web Hosting

Adding Pricing Tables to the Nimble Theme Homepage

In the first installment of our Nimble Theme tutorials, Nimble Theme Tutorial: Part One – The Basics, we showed you how to customize and build content for the home page of your WordPress site.  Specifically, we demonstrated how to upload a custom logo and favicon, setup the featured image slider, control the “Blurb” section and configure the “News and Updates” section.  In this tutorial we’ll show you how to round out your Nimble theme home page design with attractive pricing tables via the use of short codes.

What are “Short Codes”?

Short codes are simple bits of code that provide a larger function from within the themes files, allowing for advanced design and customization options without having to write out advanced code.

Professional Looking Pricing Tables are Important

It is difficult to drum up interest in your products and/or services if people don’t know how much you’re charging.  Therefore, setting up your products and/or services listing using the Nimble Theme is a great option.  As we discussed in part one of our Nimble theme tutorial series, the design is in line with what customers expect from modern product pages.  Adding a pricing table is a perfect, easy to read solution if you offer multiple products or tiers of service at varying prices.

The Nimble theme makes it easy to display the price of your products and/or services by placing a “Plans and Pricing” section at the bottom of the home page by default.  The folks at Elegant Themes take it one step further by providing highly-customizable, professional pricing tables that you can insert into your pages using short codes.  Follow the steps below to setup the Nimble theme “Plans and Pricing” section…

Capture

Setting Up a Nimble theme Pricing Table

Step One: First, crate a page to host your pricing information.

In your WordPress Dashboard go to Pages > Add New and for this tutorial lets name the page “Prices.”

Step Two: Find the short code.

Elegant Themes offers a wealth of short codes for their themes and we encourage you to toy around with them, but here is the short code for pricing tables.  Copy the code and paste it into the body of your page.

Step Three: You have to tell the Home page where to find the pricing table page.

In your WordPress Dashboard go to Appearance > Nimble Theme Options and click the home page tab > Scroll down to the “Plans and Pricing Page” section and select the page you created from the drop down > Save your changes and return to the home page > Your pricing table will now be live at the bottom of the page.

You will most likely want to fill in your own content and possibly add more fields.  Adding your unique content to the pricing table can be done by changing the information contained in quotes within the short code.  Creating more fields can be done by duplicating the code to create more columns or additional tables.

It’s also important to note that the page width only allows for two columns on your pricing table.  If you need more room, go into your page editor and on the right hand side select “Full-width Page” from the “Template” drop down menu.  This will eliminate the side bar and offer around twice as much space for your pricing table.

Getting everything perfect on the pricing table will take some tweaking so patients is important.  However, with a little time and experimentation you will have an attractive pricing table on your Nimble theme site. The professional pricing table should help convert site visitors into paying customers.

HostGator Web Hosting

13 COMMENTS

  1. Hi,
    You video is very instructive but I was waiting for you to answer my question and you didn’t. Once you get the full page, which gives you more room how can you add a 2nd price table next to it, so that it looks just like the elegant themes example…in their example they have 4 tables across..when you actually put the code in you only get two tables across and if you add more, the 2nd two appear underneath which does not look very elegant..is there any way to fix that?

  2. hi..do you know how to get the pricing tables to look like the shortcodes example? In other words 4 templates side by side. When I put the short codes in (with full page chosen) I get two pricing templates of $99 and if I copy and paste it again, I get two more underneath – I want all four horizontal, just the way it looks in their site demo

    instead of
    XX
    XX

    I want XXXX

    hope you can help

    • Did you get your question Answered? Mine looks like this You just add another [pricing_table] entry –>
      [pricing_table]
      [pricing price=”47″ currency=”$” title=”Basic” desc=”Bronze” moretext=”BUY” url=”http://www.google.com” window=”new”]
      [feature] Checklist [/feature]
      [feature]Set by Step Videos[/feature]
      [feature checkmark=”x”] Updates [/feature]
      [feature checkmark=”x”] Themes[/feature]
      [feature checkmark=”x”] Plugins [/feature]
      [feature checkmark=”x”] 1 on 1 Coaching [/feature]
      [/pricing]
      [pricing price=”87″ title=”Pro” desc=”Silver” moretext=”BUY” type=”big” url=”http://www.google.com” window=”new”]
      [feature] Checklist [/feature]
      [feature]Set by Step Videos[/feature]
      [feature] Updates [/feature]
      [feature] Themes [/feature]
      [feature checkmark=”x”] Plugins [/feature]
      [feature checkmark=”x”] 1 on 1 Coaching [/feature]
      [/pricing]
      [feature] Checklist [/feature]
      [feature] Set by Step Videos [/feature]
      [feature] Updates [/feature]
      [feature] Themes [/feature]
      [feature] Plugins [/feature]
      [feature] 1 on 1 Coaching [/feature]
      [/pricing]
      [/pricing_table]

  3. Hey thanks for posting this, solved my problem. Am just getting into making websites with elegant themes. Will check out your other tutorials, lifesaver, thanks again!

  4. Do you know what you need to incorporate into the Elegant Themes WP installation to make the pricing tables actually functional in a membership set up? For example, they have a directory theme and the explorable theme but neither is set up so that the user has to pay to place a listing. The pricing tables are great but I'm missing the part where it actually integrates into a payment structure. I now I must be overlooking something basic, but I would really appreciate it if you could point out the missing piece to me. Thanks so much.

    • Hi Cynthia,

      I'm not sure what you're asking here. The pricing tables are simply meant to show different tiers of services on your page. It sounds like what your asking for may be outside the scope of the shortcode. Can you be more specific? Maybe we can get to the bottom of it.

      Thanks for reading,

      Adam

  5. Hi Adam,

    Thanks for the helpful tutorials! I was wondering if there is a way to center align the tables – right now, I have a 3 column table on a full width page, so I think the table might look better if it was center aligned.

    Thanks!

LEAVE A REPLY