Pricing Table
Present plans clearly so visitors choose and sign up.
Pricing plans as blocks with a monthly / yearly (or three-period) billing switch, a usage slider for per-seat prices, six skins, badges and feature lists with tooltips.
Gutenberg block
Requirements
- The block editor (Gutenberg)
- WordPress 6.5 or newer
- PHP 7.4 or newer
- Licence: Pro ($2 / year) — add it to the cart in Moduly
Add it to a page
- Open the page or post in the block editor.
- Click + (Block Inserter) and search for Pricing Table — it is in the Moduly category.
- Insert it, then fill in its content on the canvas. Ready-made presets appear when you insert it, and later under Transform to in the block toolbar.
- Adjust it in the right sidebar: the Block tab holds the settings below, and the Styles tab its colours, typography and spacing.
- Add or reorder items with the + inside the block; each item (Pricing Plan) has its own settings when selected.
Settings
Billing periods
| Setting | What you can set |
|---|
| Number of periods | Number |
| Show first | Number |
| Switch style | toggle, tabs or pills |
| Switch and slider alignment | flex start, center or flex end |
| Animate price changes | On / off |
Usage slider
| Setting | What you can set |
|---|
| Show a usage slider | On / off |
| Label | Text |
| Minimum | Number |
| Maximum | Number |
| Step | Number |
| Starting value | Number |
| Unit words | Text |
| Note under per-unit prices | Text |
| Setting | What you can set |
|---|
| Currency | Text |
| Custom symbol | Text |
| Currency position | before or after |
| Raised currency | On / off |
| Decimals | auto, always or none |
| Raised decimals | On / off |
| Thousands | Text |
| Decimal | Text |
| Suffix on its own line | On / off |
Layout
| Setting | What you can set |
|---|
| Skin | cards, band, outline, joined, gradient or minimal |
| Columns (desktop) | 1–5 |
| Columns (tablet ≤ 1024 px) | 1–5 |
| Columns (phone ≤ 767 px) | 1–3 |
| Gap (px) | 0–80 |
| On phones | carousel or stack |
| Carousel card width (%) | 50–100 |
| Equal heights | On / off |
| Button position | bottom or top |
| Card hover | none, lift, grow, glow or border |
| Raise the featured plan | On / off |
| Badge style | pill, inline, corner or banner |
| Content alignment | left or center |
| Plan name tag | h2, h3, h4, h5, h6 or div |
Feature list
| Setting | What you can set |
|---|
| Included icon | check, check circle, dot, x, minus, star, bolt or plus |
| Not included icon | check, check circle, dot, x, minus, star, bolt or plus |
| Highlight icon | check, check circle, dot, x, minus, star, bolt or plus |
| Strike through features not included | On / off |
| Icons in circles | On / off |
| Accent | Colour |
| Card text | Colour |
| Secondary text | Text |
| Borders | Colour |
| Card background | Colour |
| Included icon | Colour |
| Not included | Colour |
| Badge | Colour |
| Switch and slider | Colour |
| Switch track | Colour |
| Tooltip | Colour |
Pricing shape
| Setting | What you can set |
|---|
| Card radius (px) | 0–40 |
| Plan image size (px) | 16–120 |
Pricing Plan (item) settings
Feature list
| Setting | What you can set |
|---|
| Badge | Text |
| Accent | Colour |
Plan
| Setting | What you can set |
|---|
| Featured plan | On / off |
| Image or icon | Settings group |
| Featured plan | List |
Prices
| Setting | What you can set |
|---|
| Text instead of a price | Text |
| Price per unit | On / off |
Button
| Setting | What you can set |
|---|
| Open in a new tab | On / off |
| Style | auto, solid, outline or soft |
Styles tab: colours, typography, spacing, borders and shadow, from WordPress's own design tools.
Tips
- Start with the Skin choice — it changes the overall look the most; fine-tune the rest afterwards.
- Visitors who ask their device for reduced motion get a calmer, still version automatically.
- Not sure where to start? Insert one of its presets and edit from there.
Troubleshooting
- In the editor the old price is shown unformatted (e.g. “$348”); the front end formats it.
- Per-line shipping and taxes are out of scope; prices are display values.
- No Moduly loader change was needed.
- A change not showing on the live site is almost always a page cache — clear your caching plugin or host cache.
- Also available for Elementor (Pricing Table).
- Works well with: Call to Action, Comparison Table, Countdown.
