Block Pattern: Plan Comparison Table
Adds a comparison table pattern with a header row and check marks for comparing plans, products or options side by side.
Opens WPIDE on
Code
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' ) );
}
$rows = array(
array( 'Websites', '1', '5', 'Unlimited' ),
array( 'Daily backups', '✔', '✔', '✔' ),
array( 'Priority support', '—', '✔', '✔' ),
array( 'White-label reports', '—', '—', '✔' ),
);
$body = '';
foreach ( $rows as $row ) {
$body .= '<tr><td>' . implode( '</td><td>', $row ) . '</td></tr>';
}
$content = '<!-- wp:table {"hasFixedLayout":true} --><figure class="wp-block-table"><table class="has-fixed-layout"><thead><tr><th>Feature</th><th>Starter</th><th>Growth</th><th>Agency</th></tr></thead><tbody>' . $body . '</tbody></table></figure><!-- /wp:table -->';
register_block_pattern( 'wpide/comparison-table', array(
'title' => 'Comparison table: three plans',
'description' => 'Feature rows compared across three plans.',
'categories' => array( 'wpide-sections' ),
'keywords' => array( 'comparison', 'table', 'plans', 'features' ),
'content' => $content,
) );
} );
Notes
Edit cells directly in the table after inserting. Pair it with the "Lined" or "Hover rows" table styles.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.