Pricing Table

Pricing Table is a card which shows the price and features of the service or product.

It plays an important role for each company that offers a product or a services, they are challenge for both usability and design standpoint perspective. Design must be simple but at the same time there should be clarity between features and prices of different products and services.

Pro tip
Put a buy now button right below the pricing and don’t give a time to user to even think about the purchase.

Configuration for Pricing Table

Wherever money is involved, definitely you have to adapt and shape the design in order to achieve the primary goal of purchase. Go with “Less is More” approach.

Table Of Contents

Setting up

Gutenberg gives multiple ways to add Pricing Table into the content building area or we say playground. Check for the “+” icon in the top toolbar or click the “+” icon in the content area or start typing Pricing Table after “/” sign, eg.“/Pricing Table”, in the content area. Gutenberg also provides drag & drop after opening the list of widgets panel.

After placing the widget you’ll see three tabs on the right editing panel containing “Layout”, “Style” and “Advanced”. Go and start with the Layout tab.

1. Layout

Style

Layout

Select your preferred layout for Pricing Table here.

Title Area

Title Layout

Select title layout style from this drop down.

Title

Drop a suitable title for pricing table in here.

Sub Title

Drop a suitable sub title for pricing table in here.

Icon Type

Icon type is a selection whether you want an icon or not.

Icon/ Image

Selection of icon type whether you want icon as a symbol icon or any image.

Icon Library

On selection of Icon in previous drop down, you’ll be displayed whole list of icons provided by the FontAwesome icon library. If you have purchased licence for pro plan and activation has been done then you’ll able to use pro icons too.

Custom Image

On selection of Image in previous drop down, you’ll be asked to choose and upload image, and after uploading image basic styling option for image would be displayed there.

Price Area

Prefix Text

Add a prefix text for the price. Mostly it’s a currency symbol.

Price Amount

Drop a price for the product / service in here.

Postfix Text

Add a prefix text for the price. Mostly it’s a unit counts.

Previous Price

Display Previous Price

Want to have a sale ? Pricing can be managed here.

Prefix Text

Add a prefix text for the price. Mostly it’s a currency symbol.

Price Amount

Drop a price for the product / service in here.

Postfix Text

Add a prefix text for the price. Mostly it’s a unit counts.

Content Area

Content Type

A brief description about the product / service and it’s features.

Layout

Select a layout for content.

Content

Brief content, in wysiwyg.

Features

A repeater field to add a list of features using Stylish list.

Button

Style

Select your preferred layout for button here.

Button Text

An input to add the title text for the button.

Button Link

A destination page URL for button when clicked.

Call To Action

Content

A call to action content, to display terms & conditions or any extra text related to pricing.

Ribbon

Display Ribbon

Ribbon is a decorative binding in a both physical and digital worlds. Show the best plan out there for the customers using ribbon.

Layout

Choose a style for ribbon element.

Ribbon Text

Paste an interactive text for the ribbon.

2. Style

The Style tab is used for customising the appearance of all the Pricing Table widget components. All these styling options include customising the fonts, colors, background, margins and padding which are common across all the widgets. So, we have created a single detailed article explaining these Styling Options.

View The Style Tab Article

Common Breadcrumbs

Typography

Assign size, weight, spacing and much more to fonts.

Text Color

A color picker to assign suitable color to the text.

Border

Draw a border around the element and give width and color to it.

Home Icon/ Image

Padding

Put-in some inner space to an element.

Size

Set icon size from here.

Normal Color

A color picker to assign suitable color to the icon.

Hover Color

A color picker to assign suitable color to the icon on hover.

Separator

Padding

Put-in some inner space to an element.

Size

Set icon size from here.

Normal Color

A color picker to assign suitable color to the icon.

Hover Color

A color picker to assign suitable color to the icon on hover.

Separator Background

Padding

Put-in some inner space to an element.

Margin

Put-in some outer space to an element.

Border Radius

Set the radius curve of the element’s corner.

Color (All/ Home/ Active)

A color picker to assign suitable color to the background of navigation link titles.

Content Background

Padding

Put-in some inner space to an element.

Background

Apply suitable background like color/ gradient to an element.

Border

Draw a border around the element and give width and color to it.

Border Radius

Set the radius curve of the element’s corner.

Box Shadow

Give Box/Text/Drop shadow effect and color to an element.

3. Advanced

Advanced Tab Options are common across all the widgets. So, we have written a detailed tutorial explaining how to use these options.

View The Advanced Tab Tutorial

Was this article helpful?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?