Pricing Table block

With the Pro version of the PublishPress Blocks plugin, you can create an PublishPress 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
Pricing Table
Pricing Table

How to create the PublishPress Pricing Table block #

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

Screen Shot 2022 10 05 At 18.17.34
Screen Shot 2022 10 05 At 18.17.34

Settings for the PublishPress 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 PublishPress 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, PublishPress Button, Spacer, Separator and PublishPress 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 PublishPress Columns block #

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

Gutenberg Columns Manager and Pricing Table block

Create a PublishPress Columns 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 PublishPress Pricing Table block for each Column.

At this point this is how it looks.

Gutenberg Columns Manager and Pricing Table block

As last step customize the content, colors and settings.