Genesis Blocks

Create effective content faster.

You are here: Home / Pricing Table Block

Pricing Table Block

The Pricing Table block allows you to build beautiful, dynamic, responsive pricing tables. You can add up to four columns, as well as control the background colors, text colors, paddings, and position of any of the pricing table blocks. Also, each pricing block also comes equipped with Schema markup to ensure your products shine in search engines.

Table of Contents:

General block settings

After adding the Pricing block to your post or page, click on the area outside/above the individual columns to reveal the general settings that are applied to the entire block (not individual columns).

General settings in the Pricing block

Click image to enlarge

  1. Pricing Columns: Choose how many columns you’d like to display in a single row. The maximum number of columns is 4.
  2. Pricing Columns Gap: Choose how much space to display between the columns.
  3. Additional CSS Class(es): You can add one or more CSS class to customize the appearance of this block. After adding the class name(s) here, you can enter your custom CSS code in Appearance > Customize > Additional CSS.

Individual column settings

Click on the area inside an individual column to reveal the general settings for that column. These settings only apply to the column that’s highlighted and must be configured for every individual column.

Individual column settings in the Pricing block

Click image to enlarge

  1. Pricing Column Padding: The padding refers to the amount of space displayed around the inside edges of the individual column. Increasing the amount of the padding will increase the amount of space that appears around the content inside.
  2. Pricing Column Border: Choose whether or not to display a border around the outside edges of the individual column. When set to 0, there will be no border displayed. When set to 1, the border will be very thin. The border will become thicker as the number increases.
  3. Pricing Column Border Radius: If the border is enabled above, choose whether the border has square corners or rounded corners. When set to 0, the corners will be square. When set to 1, the corners will be slightly rounded. The corners will become more rounded as the number increases.
  4. Pricing Column Border Color: If the border is enabled above, choose the border color. Click the colored circles to select a pre-defined background color. Or click Custom Color to select your own.
  5. Pricing Column Background Color: This setting controls the background color of the individual column. Click the colored circles to select a pre-defined background color. Or click Custom Color to select your own.
  6. Additional CSS Class(es): You can add one or more CSS class to customize the appearance of the column. After adding the class name(s) here, you can enter your custom CSS code in Appearance > Customize > Additional CSS.

Product Title

Click directly on the Price Title to edit the text and reveal the settings. These settings only apply to the title that’s highlighted.

Product Title in the Pricing Table block

Click image to enlarge

  1. Text Settings: Choose whether the text is the default text size or is small, normal, large, larger, or a custom size.
  2. Padding Settings: The padding refers to the amount of space displayed around the sides of the title. Increasing the amount of the padding will increase the amount of space that appears around the text.
  3. Color Settings: These settings control the background color and text color of the title. Click the colored circles to select a pre-defined background color. Or click Custom Color to select your own.
  4. Additional CSS Class(es): You can add one or more CSS class to customize the appearance of the title. After adding the class name(s) here, you can enter your custom CSS code in Appearance > Customize > Additional CSS.

Product Subtitle

Click directly on the Price Subtitle Description to edit the text and reveal the settings. These settings only apply to the description that’s highlighted.

Product Subtitle in the Pricing Table block

Click image to enlarge

  1. Text Settings: Choose whether the text is the default size or is small, normal, large, larger, or a custom size.
  2. Padding Settings: The padding refers to the amount of space displayed around the sides of the description. Increasing the amount of the padding will increase the amount of space that appears around the text.
  3. Color Settings: These settings control the background color and text color of the description. Click the colored circles to select a pre-defined background color. Or click Custom Color to select your own.
  4. Additional CSS Class(es): You can add one or more CSS class to customize the appearance of the description. After adding the class name(s) here, you can enter your custom CSS code in Appearance > Customize > Additional CSS.

Product Price

Click directly on the Price to edit the text and reveal the settings. These settings only apply to the price that’s highlighted.

Product Price in the Pricing Table block

Click image to enlarge

  1. Text Size: Choose whether the text is the default size or is small, normal, large, larger, or a custom size.
  2. Show currency symbol: Enable or disable the display of the currency symbol.
  3. Currency Symbol: If the currency symbol is enabled, enter the symbol you’d like to display next to the price.
  4. Show pricing duration: Enable or disable the display of the pricing duration.
  5. Pricing Duration: If the pricing duration is enabled, enter the duration you’d like to display next to the price. Examples include /mo (per month), /year (per year), etc.
  6. Padding Settings: The padding refers to the amount of space displayed around the sides of the price. Increasing the amount of the padding will increase the amount of space that appears around the text.
  7. Color Settings: These settings control the background color and text color of the price. Click the colored circles to select a pre-defined background color. Or click Custom Color to select your own.
  8. Additional CSS Class(es): You can add one or more CSS class to customize the appearance of the price. After adding the class name(s) here, you can enter your custom CSS code in Appearance > Customize > Additional CSS.

Product Features

IMPORTANT NOTE: Genesis Blocks 3.0.0 updates the Product Features block from Genesis Blocks to use the WordPress® core List block.1

Updating your plugin to version 3.0.0 will automatically convert your Genesis Blocks Product Features blocks to core List blocks when opening the block editor. The Product Features should look mainly the same, but there could be some styling changes.

If you were using the border settings for the features list, CSS classes for the features list border style and width will be added under the Advanced section (number 5 below) during the migration. The CSS styles are not removed from Genesis Blocks 3.0.0. Those classes are gb-list-border-width-1, gb-list-border-width-2, gb-list-border-width-3, gb-list-border-width-4, gb-list-border-width-5 for border width and gb-list-border-solid, gb-list-border-dotted, and gb-list-border-dashed for border style.

Breaking Change: The List Border Color setting is removed. If you previously set a List Border Color, that color will no longer appear after opening the block editor for that content. If you don’t open the block editor for that content, your Product Features blocks will stay the same as before.

Click directly on the Product Feature List to edit the text and reveal the settings. These settings only apply to the list that’s highlighted.

Product Features in the Pricing Table block

Click image to enlarge

  1. Text Size: Choose whether the text is the default size or is small, normal, large, larger, or a custom size.
  2. List Border Style: To give each item in the list visual separation, you can enable a bottom border on each item. This border can be a solid, dotted, or dashed line.
  3. Padding Settings: The padding refers to the amount of space displayed around the sides of the entire list. Increasing the amount of the padding will increase the amount of space that appears around the list.
  4. Color Settings: These settings control the background color and text color of the list. Click the colored circles to select a pre-defined background color. Or click Custom Color to select your own.
  5. Additional CSS Class(es): You can add one or more CSS class to customize the appearance of the list. After adding the class name(s) here, you can enter your custom CSS code in Appearance > Customize > Additional CSS.

Product Button

Click directly on the Buy Now button to edit the text and reveal the settings. These settings only apply to the button that’s highlighted.

Product Button in the Pricing Table block

Click image to enlarge

  1. Open link in new window: Enable this option if you’d like a new window (or tab) to open when someone clicks the button.
  2. Button Size: Choose whether the button is small, medium, large, or extra large.
  3. Button Shape: Choose whether the button has square corners, rounded corners, or is “pill shaped” (circular).
  4. Button Color: These settings control the background color and text color of the button. Click the colored circles to select a pre-defined background color. Or click Custom Color to select your own.
  5. Padding Settings: The padding refers to the amount of space displayed around the outside of the button. Increasing the amount of the padding will increase the amount of space that appears around the button.
  6. Color Settings: This setting controls the background color of the entire button section (the area around the button). Click the colored circles to select a pre-defined background color. Or click Custom Color to select your own.
  7. Additional CSS Class(es): You can add one or more CSS class to customize the appearance of the button. After adding the class name(s) here, you can enter your custom CSS code in Appearance > Customize > Additional CSS.