Pricing Table

The Pricing Table element puts two to four plans or products side by side and compares them feature by feature. Each column has its own header — badge, image, name, price and button — and each row is one feature with a value per column: a check, a cross, a number or a piece of text.

Adding the element

Add an element in the YOOtheme Pro builder and pick Pricing Table from the Planckie Elements group. The builder starts you with three columns and three feature rows, so the shape is visible immediately.

The element has two parts: the columns, which are settings of the element itself, and the rows, which are items. Set the number of columns first — the column groups appear and disappear with it.

Content

Option	Description
Rows	The feature rows.
Columns	2, 3 or 4. Three by default. Column groups beyond the count are hidden, and their content is kept rather than deleted.

Column 1 to 4

Each column group holds the same fields.

Option	Description
Name	The plan name, for example Pro.
Image	A logo or product shot above the name, with its own alt text.
Image Alt	Alternative text for the image.
Badge	A short label above the name, for example Most Popular.
Price	Written however you want it: a currency, a range or Free all work.
Period	The unit beside the price, for example /mo.
Description	A line under the price.
Button Text	The call to action. Defaults to Get started.
Button Link	Where it leads. The button renders only when both the text and the link are set.
Attributes	Open in a new window.
Featured	Highlight this column gives it the background and the button style of a featured column.

Feature rows

Option	Description
Feature Label	The feature name in the first column.
Category Row	Use as category divider turns the row into a heading spanning the whole table, for grouping features into sections.
Column 1 to 4	The value type for that column: Check, Cross, Text, Text with Check, Text with Cross or None.
Column 1 to 4 Text	The text of the value, for the three types that carry one.

Every row offers all four column values whatever the column count, because an item cannot read a setting of the element. The table renders as many as are configured, so lowering the count hides values rather than losing them.

Settings

Table

Option	Description
Style	Default, Divider or Striped.
Size	The padding between rows: Default, Small or Large.
Cell Padding	The padding left and right of every cell, header and footer included: Small, Default, Medium or Large — 12, 20, 30 or 40 pixels.

Stacked Layout

Option	Description
Stack Below	The width below which the table is replaced by one card per column, each naming its own features. Tablet Landscape by default; Never keeps the table at every width.
Phone Portrait / Phone Landscape / Tablet Landscape	How many cards sit side by side at each size. One card by default, two from phone landscape.
Gap	The gap between cards.

Above the breakpoint the table scrolls sideways when it does not fit; below it the cards take over. The cards are a second structure, and with Never they are not rendered at all.

Badge, Name, Price, Description and Image

Five groups, one per part of the column header, in the order they appear. Each takes a Style from the theme styles, a Color and a Margin Bottom; Price also styles the Period beside it, and Image takes a width, a height and a border.

The defaults work untouched: the name is h4, the badge and period are Text Meta, the price is Heading Small, and the period is muted.

Feature Label and Category Row

Feature Label sets the Width of the first column, from Auto to half the table, and the style and color of the feature names. Category Row styles the headings that divide the table into sections.

Values

Option	Description
Check Color	The color of the check mark. Success by default.
Cross Color	The color of the cross. Muted by default.
Text Style / Text Color	For values entered as text.

Featured Column

Option	Description
Background	Muted, Primary or Secondary, taken from the active theme style, so a dark style keeps the text readable.

On a striped table the stripe is painted over the featured background instead of under it, so the highlighted column keeps its color and only shifts a shade.

Button

Option	Description
Style	The button or link style of the regular columns.
Featured Style	The style of the button in the highlighted column. Primary by default.
Size	Small, Default or Large.
Expand width to table cell	Full-width buttons. On by default.

Accessibility

Option	Description
ARIA Label	Names the table for assistive technology. Left empty, it reads Pricing table.

General and Advanced

The General group and the Advanced tab are the standard YOOtheme Pro element settings, documented under Elements for WordPress and Joomla.

Styling

The element exposes these classes to Custom CSS, alongside .el-element.

The table: .pe-pricing-table-column, .pe-pricing-table-badge, .pe-pricing-table-name, .pe-pricing-table-price, .pe-pricing-table-period, .pe-pricing-table-description, .pe-pricing-table-image, .pe-pricing-table-feature, .pe-pricing-table-feature-text, .pe-pricing-table-category, .pe-pricing-table-category-text, .pe-pricing-table-category-row, .pe-pricing-table-value, .pe-pricing-table-value-text, .pe-pricing-table-check, .pe-pricing-table-cross, .pe-pricing-table-button, .pe-pricing-table-featured

The cards below the breakpoint: .pe-pricing-table-card, .pe-pricing-table-card-header, .pe-pricing-table-card-list, .pe-pricing-table-card-item, .pe-pricing-table-card-label, .pe-pricing-table-card-value, .pe-pricing-table-card-category, .pe-pricing-table-card-footer

.pe-pricing-table-featured marks every cell of the highlighted column, in the table and in the cards alike. The element defines no CSS custom properties you set yourself: the column count, the feature width, the cell padding and the stripe are written into the element from the settings above.

Accessibility and keyboard

The table is a real <table>: column headers are th cells scoped to their column, feature labels are th cells scoped to their row, and every category heading opens a row group it is scoped to. A screen reader therefore reads Pro, Priority support, included rather than a grid of loose cells. The caption carries the ARIA label and is hidden visually.

A check or a cross is an icon, so each carries the words Included or Not included for screen readers, both from the translation catalogue.

The scrolling wrapper around the table is a labelled region with a tab stop. A table of checkmarks holds nothing focusable of its own, so without that tab stop a keyboard user could not pan a table wider than the screen.

Below the stacking breakpoint the element shows the cards and hides the table, and above it the other way round. Exactly one of the two is displayed, so assistive technology never meets the same content twice.

Notes and limits

• The element renders when at least one column has a name, image, badge, price or button text, or at least one row has a label. An element with nothing filled in renders nothing.
• A row renders when it has a label or a value in any column. A category row with no label does not render, since a divider with no heading has nothing to divide.
• A button needs both its text and its link. Text without a link renders nothing rather than a button that goes nowhere.
• Column widths are fixed and equal, so one long value cannot squeeze the others. The table keeps a minimum width of about 8rem per column plus the feature column, and the wrapper scrolls below that instead of crushing the columns.
• Cells that are empty in one column but filled in another keep their place, so prices and buttons stay on the same line across the table.
• The stacked cards repeat the column headers and the feature names, which is what makes them readable on a phone. Keep feature labels short enough for both places.