Pattern Paste
Subscribe

12 layout options5 Styled looksNo plugin needed

WordPress comparison table patterns

Compare two or three options with WordPress comparison patterns: cards or pillars side by side, with the recommended one clearly marked.

17 layout options shown

Showing 1–17 of 17

Live preview at its actual size. Scroll to explore the whole section.

Explore pattern

Compact comparison rows rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveCompareNo plugin needed

Compact comparison rows

A mobile-first responsive comparison layout using stacked capability cards: each row pairs a feature title and summary with a side-by-side comparison block, avoiding horizontal table scrolling on small screens.

ComparePreview pattern
Compare cover panels rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveCompareNo plugin needed

Compare cover panels

A two-option comparison placed inside one photographic cover: a large recommended panel and a smaller, offset alternative sit on opaque plates with a broad channel of the photograph left visible between them.

ComparePreview pattern
Compare matrix rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveTablesNo plugin needed

Compare matrix

A capability matrix in a core table: one row per capability, one column for each of the two plans people choose between, and a mark in every cell, with a third plan named in one line under the table instead of a fourth column that would ladder its row headers on a phone.

TablesPreview pattern
Plan comparison table rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveTablesNo plugin needed

Plan comparison table

A three-tier pricing and feature comparison layout: top header cards with plan names, prices, and conversion buttons, followed immediately by an aligned capability table.

TablesPreview pattern
Product spec cards rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveCompareNo plugin needed

Product spec cards

Three product comparison cards in a row: each card carries an image frame with an example photograph cropped to 4:3, print title, paper and size specifications, pricing, and an action button.

ComparePreview pattern
Comparison service fork rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveCompareNo plugin needed

Comparison service fork

One repair question splits into a short workshop route and a longer home-visit route, then rejoins at a shared promise.

ComparePreview pattern
Comparison shared spine rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveCompareNo plugin needed

Comparison shared spine

Repair and commission choices share a narrow central criteria spine, so each row compares the same question before moving on.

ComparePreview pattern
Side by side comparison rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveCompareNo plugin needed

Side by side comparison

Two comparative cards side by side: the conventional method on the left with quiet styling, and your recommended approach on the right with a bold border, a badge pill, checkmark points, and a primary action button.

ComparePreview pattern
Tier comparison cards rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveCompareNo plugin needed

Tier comparison cards

Three membership tier cards side by side: each card features a tier badge, price headline, ruled checklist of privileges, and a dedicated action button.

ComparePreview pattern
Visual comparison pillars rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveCompareNo plugin needed

Visual comparison pillars

Three visual comparison pillars side by side: each column carries a 16:9 media frame, capability highlight, feature checklist, and conversion button, with the centre recommendation elevated with a bold border.

ComparePreview pattern
Stat comparison rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveStatsNo plugin needed

Stat comparison

A side-by-side comparative delta matrix: two balanced 1px currentColor panels contrast industry standard baseline metrics directly against platform outcomes across setup time, availability, and response latency.

StatsPreview pattern
Feature checklist matrix rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveTablesNo plugin needed

Feature checklist matrix

A comprehensive multi-category capability matrix in a fixed core table: features grouped under clear category subheaders across four plan tiers with checkmarks, numerical caps, and plan details.

TablesPreview pattern

Choose a layout for your page

Lead with the recommended option. Use cards for a short set and pillars when each option needs a feature list underneath.

New to patterns? Learn how to copy and paste a pattern. Read how we test patterns.

All Core Patterns