A pricing section is where visitors decide whether to click “sign up” or quietly leave. It has to look sharp, load fast, and make the choice feel easy. Building one from scratch, with tabs, toggles, and responsive layouts, can eat a whole afternoon.
So we built one for you, and it’s completely free. This free SaaS pricing table template drops a polished, interactive pricing section straight into your site, no design work required. In this guide, I’ll walk you through what it does, why it’s built the way it is, and exactly how to add it to your WordPress theme. Let’s take a look.
What This Free SaaS Pricing Table Template Is
This is a ready-to-use SaaS pricing section, the kind you’d see on a modern software or membership site. It pairs a clean “how it works” column with two pricing plans, wrapped in a bold, high-contrast design that looks professional out of the box, typeset in Montserrat from Google Fonts.
It comes in two forms so it fits however you work:
- A standalone HTML demo you can open in any browser to see it live.
- A WordPress version (a PHP template part plus CSS and JS) you drop into your theme.
Everything is free to use, with no catch, exactly like the rest of the templates at ThemePocket.
The Features That Make It Stand Out
This isn’t just a static price list. It’s genuinely interactive, and thoughtfully built. Here’s what you get.
Switchable product tabs
At the top sit four tabs: Automation, Team Workspace, Analytics, and Integrations. Click any tab and both pricing cards instantly update their name, description, price, and feature list. It’s perfect for a SaaS that offers different product lines, or a membership site with different tiers, all from one tidy section.
Monthly and yearly billing toggle
Each plan has a switch that flips between monthly and yearly pricing. The template automatically calculates the yearly price (set at 10 times the monthly rate, so two months effectively free), and updates the label from “/ month” to “/ year.” It’s the kind of detail that nudges visitors toward the annual plan.
A built-in “how to get started” column
Alongside the plans, a three-step column walks visitors through getting started: create your workspace, connect your tools, scale with clarity. It turns a plain pricing table into a mini landing section that sells the experience, not just the price.
Fully responsive design
The layout adapts cleanly across screens. On desktop it’s a three-column grid, on tablets it reflows to two columns with the steps stacked on top, and on phones everything collapses into a single, comfortable column. More than half your visitors are on mobile, so this matters.
Accessible by default
Accessibility is baked in, not bolted on. The tabs work with arrow-key navigation, everything has proper ARIA labels, focus states are clearly visible for keyboard users, and it respects the reduced-motion setting for people who prefer fewer animations. That’s better for your users and better for your SEO.
A selection event for developers
When someone clicks a “Get Started” button, the template fires a custom browser event called membership-plan:selected, carrying the chosen program, plan, and billing cycle. That means you can wire it straight into a contact form, checkout, or booking flow without rewriting anything.
How to Add It to Your WordPress Site
Here’s the part you came for. Adding the template takes just three steps, and you don’t need to touch the template’s core code.
Step 1: Copy the files into your theme
Drop these three files into your theme (ideally a child theme, a safe way to customize a theme WordPress.org recommends for exactly this reason, so updates don’t overwrite them):
template-parts/membership-plan.phpmembership-plan.cssmembership-plan.js
Step 2: Enqueue the CSS and JS
WordPress needs to load the stylesheet and script properly. Add this to your theme’s functions.php file, which loads the font, styles, and script the right way:
add_action('wp_enqueue_scripts', function () {
wp_enqueue_style('mp-fonts', 'https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap', [], null);
wp_enqueue_style('membership-plan', get_stylesheet_directory_uri() . '/membership-plan.css', ['mp-fonts'], '1.0.0');
wp_enqueue_script('membership-plan', get_stylesheet_directory_uri() . '/membership-plan.js', [], '1.0.0', true);
});If you’re new to enqueueing assets, our guide on adding custom CSS covers the simpler no-code routes too.
Step 3: Display the section
Now render the pricing section wherever you want it to appear, on a page template, your homepage, or a custom section:
<?php get_template_part('template-parts/membership-plan'); ?>That’s it. Refresh your page and the pricing section is live.
Two Handy Customizations
Once it’s running, two small tweaks make it truly yours.
Point the buttons at your contact page. By default the CTA buttons link to #contact. You can change that without editing the template, just add this filter to functions.php:
add_filter('mp_contact_url', fn () => home_url('/contact/'));Connect a selection to your own flow. Listen for the selection event and do whatever you need with it, log it, open a form, or start a checkout:
document.addEventListener('membership-plan:selected', (event) => {
console.log(event.detail.program, event.detail.plan, event.detail.billing);
});Want a contact page to point those buttons at first? Here’s how to add a contact form in WordPress.
Change the Plans and Prices
The plan content lives in the JavaScript file, in a single object at the top called mpPrograms. Each tab has a pro and a starter entry holding the name, description, monthly price, and features. Edit those values to match your own products, and the whole section updates automatically. No digging through HTML required.
The colors are just as easy to change. They’re defined as CSS variables at the top of the stylesheet (things like --mp-forest and --mp-lime), so you can recolor the entire section by editing a handful of values to match your brand. If you need a hand picking a scheme, our WordPress color palette ideas guide has ready-made combos.
A Few Common Questions
1. Is this pricing template really free? Yes, completely free with no catch. Use it on personal or client projects, and customize it however you like. It’s part of our free template library at ThemePocket.
2. Do I need to know how to code to use it? For the basic setup, you only copy three files and paste two short snippets, no real coding needed. Editing the plans and colors is as simple as changing text and values in one spot each.
3. Will it work with my theme? Yes. It’s a self-contained section with its own styles, so it works alongside any theme. Adding it through a child theme keeps your customizations safe when your main theme updates.
4. Can I connect the buttons to a real signup or checkout? Absolutely. The template fires a membership-plan:selected event with the chosen plan details, so a developer can wire it into a form, cart, or booking system.
Grab It and Make It Yours
A great pricing section can be the difference between a visitor who bounces and one who signs up, and now you have one ready to go without the hours of design and coding. Copy the files, enqueue them, drop in the template part, and adjust the plans to match your product.
This free SaaS pricing table template is just one of the many free templates we share at ThemePocket. Browse the rest of our free templates to keep building your site faster, section by section.
