wptheme.com

Pricing page examples: a free WordPress block pattern

Three pricing cards or a service menu with check-marked inclusions.

How to use it

  1. Copy the markup below.
  2. In the block editor, open the options menu and switch to the Code editor.
  3. Paste the markup where you want the section, then switch back to the Visual editor.
  4. Swap in your own text and images. Colors come from your theme's palette.

Block markup

<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|70","bottom":"var:preset|spacing|70"}}},"backgroundColor":"base-2","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull has-base-2-background-color has-background" style="padding-top:var(--wp--preset--spacing--70);padding-bottom:var(--wp--preset--spacing--70)"><!-- wp:group {"layout":{"type":"constrained","contentSize":"760px"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"className":"gw-eyebrow","align":"center"} -->
<p class="has-text-align-center gw-eyebrow">Pricing</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"textAlign":"center"} -->
<h2 class="wp-block-heading has-text-align-center">Simple, upfront pricing</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"align":"center","textColor":"contrast-2","fontSize":"large"} -->
<p class="has-text-align-center has-contrast-2-color has-text-color has-large-font-size">Clear packages so you know what to expect before we start.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:spacer {"height":"var:preset|spacing|50"} -->
<div style="height:var(--wp--preset--spacing--50)" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:group {"align":"wide","layout":{"type":"grid","columnCount":3,"minimumColumnWidth":"16rem"}} -->
<div class="wp-block-group alignwide"><!-- wp:group {"className":"gw-card","layout":{"type":"constrained"}} -->
<div class="wp-block-group gw-card"><!-- wp:paragraph {"className":"gw-eyebrow"} -->
<p class="gw-eyebrow">Basic</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"className":"gw-stat-value"} -->
<p class="gw-stat-value">$99</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"textColor":"contrast-2"} -->
<p class="has-contrast-2-color has-text-color">For small, straightforward jobs.</p>
<!-- /wp:paragraph -->

<!-- wp:list {"className":"is-style-checks"} -->
<ul class="wp-block-list is-style-checks"><!-- wp:list-item -->
<li>Assessment and quote</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Standard service</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>30-day guarantee</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button" href="/contact/">Get started</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"gw-card","layout":{"type":"constrained"}} -->
<div class="wp-block-group gw-card"><!-- wp:paragraph {"className":"gw-eyebrow"} -->
<p class="gw-eyebrow">Standard</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"className":"gw-stat-value"} -->
<p class="gw-stat-value">$199</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"textColor":"contrast-2"} -->
<p class="has-contrast-2-color has-text-color">Our most popular option.</p>
<!-- /wp:paragraph -->

<!-- wp:list {"className":"is-style-checks"} -->
<ul class="wp-block-list is-style-checks"><!-- wp:list-item -->
<li>Everything in Basic</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Priority scheduling</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>90-day guarantee</li>
<!-- /wp:list-item --></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="/contact/">Get started</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"gw-card","layout":{"type":"constrained"}} -->
<div class="wp-block-group gw-card"><!-- wp:paragraph {"className":"gw-eyebrow"} -->
<p class="gw-eyebrow">Premium</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"className":"gw-stat-value"} -->
<p class="gw-stat-value">$349</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"textColor":"contrast-2"} -->
<p class="has-contrast-2-color has-text-color">For larger or ongoing work.</p>
<!-- /wp:paragraph -->

<!-- wp:list {"className":"is-style-checks"} -->
<ul class="wp-block-list is-style-checks"><!-- wp:list-item -->
<li>Everything in Standard</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Annual check-up</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>1-year guarantee</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button" href="/contact/">Get started</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:paragraph {"align":"center","textColor":"contrast-2","fontSize":"small"} -->
<p class="has-text-align-center has-contrast-2-color has-text-color has-small-font-size">Prices are examples. Final pricing is confirmed before any work begins.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

Uses preset color and spacing slugs from the Groundwork theme (base, surface, accent, contrast). In another theme, map them to that theme's palette.

See it in a live site