Pricing Table block

With the Pro version of the PublishPress Blocks plugin, you can create an Pricing Table block when you need to show people the purchase or subscription options on your site. This image below is a preview of how the block will appear inside the WordPress editing screen.

Gutenberg Pricing Table block

dffd

Pricing Table
Pricing Table

How to create the Pricing Table block

You can create a Pricing Table block by clicking the Pricing Table button in the PublishPress Blocks category.

Gutenberg Pricing Table block

Settings for the Pricing Table block

Once created, you can customize the display, spacing and colors. This from the sidebar.

Gutenberg Pricing Table block
  • Heading
    • Display Heading: enabled/disable the heading.
    • Heading Tag: choose the html tag for the heading.
    • Border Bottom: enabled/disable the border bottom (if enabled through Border panel).
    • Padding top
    • Padding right
    • Padding bottom
    • Padding left
  • Price
    • Display Price: enabled/disable the price.
    • Price Tag: choose the html tag for the price.
    • Border Bottom: enabled/disable the border bottom (if enabled through Border panel).
    • Padding top
    • Padding right
    • Padding bottom
    • Padding left
  • Features
    • Padding top
    • Padding right
    • Padding bottom
    • Padding left
  • Border
    • Border radius
    • Border style: choose between solid, dotted, dashed, double, groove, ridge, inset and outset.
  • Colors
    • Heading Background
    • Price Background
    • Features Background

Edit content for the Pricing Table block

You can change the “Plan Heading” like you do with regular text, including formatting options for color and style.

Gutenberg Pricing Table block

You can change the price and periodicity like you do with regular text, including formatting options for color and style.

Gutenberg Pricing Table block

Customize the Features List block by typing, adding, removing and reordering. More details about the Feature List block here.

Gutenberg Pricing Table block

Also you can add other block types: Heading, Paragraph, Button, Advanced Button, Spacer, Separator and Advanced Icon.

Gutenberg Pricing Table block

Alignment

You can align the heading and the price through the toolbar.

Gutenberg Pricing Table block

The other sample elements such as buttons and features have its own alignment settings.

Creating a set of Pricing Tables with Columns Manager

In order to create the traditional pricing tables layout, you can combine Pricing Table blocks with a Columns Manager block.

Gutenberg Columns Manager and Pricing Table block

Create a Columns Manager block. Choose the number of columns depending the number of pricing tables you need. In our example we choose 3.

Gutenberg Columns Manager and Pricing Table block

Choose the space between columns.

Gutenberg Columns Manager and Pricing Table block

Insert a Pricing Table block for each Adv. Column.

Gutenberg Columns Manager and Pricing Table block

At this point this is how it looks.

Gutenberg Columns Manager and Pricing Table block

As last step customize the content, colors and settings.

Professional publishing plugins for WordPress! Get PublishPress

  • SUBSCRIBE TO OUR NEWSLETTER
  • SEARCH THIS SITE