Price Table Widget

 

Our price table widget gives a simple, yet powerful interface for building a price table. It’s just a standard widget, which means you can use it in any of your widgetized areas or in Page Builder. Please note though, this is just a simple widget. It doesn’t handle any ecommerce. For that, you’ll need to use something like WooCommerce.

price-table

At the moment, there’s only one style. We’ve tried to keep it simple so that it goes well with most themes. Over time we’ll be adding different price table styles with more unique designs.

Creating a Price Table

I’m going to teach you how to create a price table inside Page builder, but the concept is almost the same when adding a price table to a widgetized area.

When you add a Price Table widget to your page, you’ll have a form that looks something like this.

price-table-interface

The title field displays a standard widget title above your price table. In most cases you’ll probably leave this blank. Next you have columns, followed by all the widget design options. Lets start by looking at the columns.

You can think of columns as variations of your product or service. To add a column, click the add button below the column block.

add-column

Lets say you want to create 3 variations of your service; Basic, Advanced and Professional. So we’ll add 3 columns. To expand and edit a column, click on the small down arrow (and click on the x to delete the column).

expand-column

You should now see the form for entering the column values:

  • Featured Means you want to place emphasis on the column. This might be
    your most popular or most profitable variation. You should only select one
    column.
  • Title and Subtitle These go in the header of the column.
  • Image Each style will be different, but this image will usually be
    displayed below the column header. To make sure everything lines up, ensure
    all the images that you add are the same size, or at least the same aspect
    ratio.
  • Price This is how much you’ll charge the buyer.
  • Per This is how often you’ll charge the buyer. Maybe “per week”, “per
    month” or even “once off.”
  • Button Text You can set this to what ever you like. Maybe something
    like “Sign Up”
  • Button URL This is where the buyer will go when they click the button.
    You could send them to a separate landing page, a contact form, email, an
    add to cart URL or a PayPal URL that’ll start their subscription.

So that’s all you need for a column. Next you’ll want to tell buyers what makes this variation of your product or service unique. You can do this using features. Features are displayed in the column of your price table. To add a feature, use the same steps you used for adding a column. Click add, then the down arrow to expand the feature.

features-add-expand

Each feature has the following fields:

  • Text The main text for the feature.
  • Hover Text Text that displays if the style you’re using supports it.
    The default atom style does not support hover text, but
    other styles in the future will.
  • Icon One of many icons from Font Awesome
  • Icon Color The color of the icon.

Just repeat the process until you’ve added all your content to the price table. Every column and feature is draggable. So if you ever want to change the order, just pick up the column and drag it into its new place.

deagging-a-column

Customising The Design

By default, the price table has a very simple design with fairly generic colours. If you want to change the price table to match your brand or personal preferences, you can do so right within the widget.

customise

You can change the colours for the headers and buttons. If you want something completely different then you can change the theme of the price table. Right now, we only have one theme called Atom, but more will be coming in the future.