# Block Pattern: Three-Plan Pricing Table

> Adds a "Pricing: three plans" pattern to the block inserter with a heading, three plan columns, feature lists and buttons that follow your theme's styles.

- Type: PHP
- Runs: Run everywhere
- Category: [Block Editor](https://wpide.com/library/category/gutenberg/)
- Tags: patterns, pricing, block-editor
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/pattern-pricing-three-plans/

## Code

```php
add_action( 'init', function () {
    if ( ! function_exists( 'register_block_pattern' ) ) {
        return;
    }

    if ( ! WP_Block_Pattern_Categories_Registry::get_instance()->is_registered( 'wpide-sections' ) ) {
        register_block_pattern_category( 'wpide-sections', array( 'label' => 'Site Sections' ) );
    }

    $plan = function ( $name, $price, $features, $button ) {
        $items = '';
        foreach ( $features as $feature ) {
            $items .= '<!-- wp:list-item --><li>' . esc_html( $feature ) . '</li><!-- /wp:list-item -->';
        }

        return '<!-- wp:column --><div class="wp-block-column"><!-- wp:heading {"level":3} --><h3 class="wp-block-heading">' . esc_html( $name ) . '</h3><!-- /wp:heading -->'
            . '<!-- wp:paragraph --><p><strong>' . esc_html( $price ) . '</strong> / month</p><!-- /wp:paragraph -->'
            . '<!-- wp:list --><ul class="wp-block-list">' . $items . '</ul><!-- /wp:list -->'
            . '<!-- wp:buttons --><div class="wp-block-buttons"><!-- wp:button --><div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="#">' . esc_html( $button ) . '</a></div><!-- /wp:button --></div><!-- /wp:buttons --></div><!-- /wp:column -->';
    };

    $content = '<!-- wp:group {"layout":{"type":"constrained"}} --><div class="wp-block-group">'
        . '<!-- wp:heading {"textAlign":"center"} --><h2 class="wp-block-heading has-text-align-center">Simple, honest pricing</h2><!-- /wp:heading -->'
        . '<!-- wp:paragraph {"align":"center"} --><p class="has-text-align-center">Pick the plan that fits. Upgrade or cancel at any time.</p><!-- /wp:paragraph -->'
        . '<!-- wp:columns --><div class="wp-block-columns">'
        . $plan( 'Starter', '$19', array( '1 website', 'Email support', 'Basic reports' ), 'Choose Starter' )
        . $plan( 'Growth', '$49', array( '5 websites', 'Priority support', 'Advanced reports' ), 'Choose Growth' )
        . $plan( 'Agency', '$99', array( 'Unlimited websites', 'Phone support', 'White-label reports' ), 'Choose Agency' )
        . '</div><!-- /wp:columns --></div><!-- /wp:group -->';

    register_block_pattern( 'wpide/pricing-three-plans', array(
        'title'         => 'Pricing: three plans',
        'description'   => 'Three pricing columns with features and buttons.',
        'categories'    => array( 'wpide-sections' ),
        'keywords'      => array( 'pricing', 'plans', 'table' ),
        'viewportWidth' => 1200,
        'content'       => $content,
    ) );
} );
```

## Notes

Find it in the inserter under Patterns > Site Sections. Edit the plans and prices after inserting.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Block Pattern: Three-Plan Pricing Table" in its snippet library and add it in one click; or create a new PHP snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/