Gutenberg Pricing Table Block Tutorial

If you are running an online store, having a Premium Pricing Table Block for Gutenberg becomes extremely vital for selling your products/services online. From web hosting companies selling monthly plans to sales/discounts offered by eCommerce marketplace, a nice visual representation of price charts is imperative to generate sales.

Check Gutenberg Pricing Table Block demo page from here.

Gutenberg Pricing Table Block
Gutenberg Pricing Table Block


Pricing Table Gutenberg Block Layout Settings

Set main settings for Pricing Table Block like display options, price, title, feature list, badge and button.

Gutenberg Pricing Table Block Layout Options
Gutenberg Pricing Table Block Layout Options

Gutenberg Pricing Table Block Display Options

  • Enable/disable pricing table items like Title, Price, Features, button and badge.

Gutenberg Pricing Table Block Title Options

  • Set pricing table title HTML tag from H1 to H6.

Gutenberg Pricing Table Block Price Options

  1. Slashed Price: Set slashed/sale price value.
  2. Currency: Set value currency $, £، € or any symbol or text needed.
  3. Price: Set the price for the plan.
  4. Divider: Set divider between price and duration.
  5. Duration: Set the plan duration weekly, monthly, quarterly or any duration.

Gutenberg Pricing Table Block Features List Options

  • Align pricing table features list for left, center or right.

Gutenberg Pricing Table Block Button Options

  1. Link URL: Assign URL link for the pricing table plan.
  2. Open Link in a new tab: Enable to open link in new tab.

Gutenberg Pricing Table Block Badge Options

  1. Text Width: Set badge text width.
  2. Badge Size: Set badge shape size.
  3. Position: Select badge postion right or left.
  4. Vertical Offset: Set space from the top for badge.
  5. Horizontal Offset: Set space from the left or right for badge.

Style Settings for Pricing Table Gutenberg Block

Customize table, title, price, feature list, description, button and badge for Pricing Table Block.

Gutenberg Pricing Table Block Style Options
Style Gutenberg Pricing Table Block

Related Docs: