Pricing columns

Use this layout in WordPress

1. Copy the blocks and paste into an empty location in a draft page. If they appear as plain text, paste using the editor’s Code editor, then return to Visual editor.
2. Replace all sample text and example.com links. Replace demo images through Media Library; remote image URLs do not create local attachments.
3. Use List View to select the outer Group and inner blocks. Review colors, spacing, headings and button links.
4. Preview on desktop and mobile before publishing. For a header or footer, paste into the appropriate template part.

Why the arrangement works

• Package names precede price and scope.
• Each action belongs to its specific package.

Customize the starting point

• Replace every example price and specify tax treatment when relevant.
• Explain exclusions, billing period and cancellation terms for your own offering.
• Use action labels that match the actual next step.

On smaller screens

Cards stack. Keep price and scope together; do not hide conditions in a separate desktop-only column.

Accessibility checks

The layout does not communicate selection through color alone. Use headings and explicit text for package differences.

Theme defaults affect the final appearance. The live preview is rendered from the copied markup with a neutral baseline and does not promise pixel-identical results across themes.

Read the official pattern instructions and RoarWP pattern guide for syncing and customization.