A good pricing table lets visitors compare your offers in seconds. The monthly / yearly toggle has become a standard because it shows the yearly saving without cluttering the page.
The anatomy of a pricing table that converts
- Two to four plans. More than that and people freeze.
- One highlighted plan with a badge like “Most popular”.
- A billing switch with a “save 20%” label on the yearly option.
- Included and excluded features, with check marks and crosses.
- One clear button per plan, linked to checkout, a booking page or a contact form.
Step by step
- Install Pricely and create a new pricing table.
- Add your plans, their monthly and yearly prices, and the features of each.
- Mark one plan as highlighted and write its badge.
- Choose a style (cards, outline or dark) and your accent colour.
- Insert the table with the Gutenberg block or the shortcode.
Click the switch on the live pricing table demo to see the prices change.
Free-text prices
Not every offer has a fixed price. “On quote”, “Free” or “From €49” are perfectly valid and help agencies and freelancers show a custom plan next to fixed ones.
Mobile first
Most visitors will see your table on a phone. Plans should stack cleanly, the highlighted one should appear first or stand out, and the switch must be easy to tap.
Next, read our pricing page best practices to improve the rest of the page, and consider adding testimonials right below the table.
How to price the yearly option
A billing toggle only works if the yearly plan is clearly more attractive. The most common approach is to offer two months free, which represents a discount of about 17%. Some businesses go up to 20 or 25%. Whatever you choose, show the saving explicitly: “Save 20%” or “2 months free” in a small badge next to the toggle. Visitors should not have to calculate anything.
Display the yearly price as a monthly equivalent (“$19/month, billed yearly”) so plans can be compared at a glance, and state the total billed per year somewhere visible. Hiding the total feels like a trick and creates support requests.
How many plans and which one to highlight
Three plans is the classic structure because it makes the choice easy: an entry plan, a recommended plan and a premium plan. Highlight the middle one with a “Most popular” ribbon and a stronger button. The premium plan acts as an anchor that makes the recommended one look reasonable. If you have more than four plans, consider moving niche options to a “contact us” line under the table.
Feature lists people can read
- Start every plan with the same features in the same order so differences are easy to spot.
- Use check and cross icons rather than long sentences.
- Keep the list under eight lines per plan and move details to a comparison table or FAQ below.
- Name features by benefit when possible: “Priority support within 4 hours” rather than “Priority support”.
Test before you publish
Check the toggle on a phone, make sure both prices are correct for every plan, verify that the buttons point to the right checkout or contact pages, and read the table as if you were a new customer. Then read our pricing page best practices for the rest of the page, or try different styles on the Pricely demo.
Frequently asked questions
How many plans should a pricing table have?
Three is the classic choice: a basic plan, a recommended plan and a premium one.
Can a plan have no fixed price?
Yes. Free-text prices like “On quote” or “From €49” work well for custom offers.
Does the table work in page builders?
Yes, through the shortcode, and in the block editor through the Gutenberg block.