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 e-commerce. 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.

Requirements

To make use of this widget, go to PluginsSiteOrigin Widgets to activate the SiteOrigin Price Table Widget.

The Price Table Widget is ready to be used anywhere:

Page Builder: Insert widgets in Page Builder by SiteOrigin in either the Classic Editor or Page Builder Layout Block in the Block Editor.
Block Editor: 100% Block Editor compatible. Insert widgets using the SiteOrigin Widgets Block featuring a live widget search form.
Theme and Plugin Widget Areas: Insert widgets into any theme or plugin widget area.

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. Let’s 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

Let’s 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 whatever 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 colors. 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 colors 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.