How to Build a Pricing Table with a Monthly/Annual Toggle in Webflow

To make a pricing toggle monthly annual in Webflow, you should build your table using the native Webflow tabs component rather than creating custom show and hide interactions with hidden divs. Using the tabs component keeps your pricing plans in one clean, semantic, accessible structure instead of two duplicated layouts. It also provides a native container that handles the transition between billing states without layout jumps, and gives you a single set of cards to maintain.

After building over 450 web projects and working with dozens of SaaS founders, I have seen many companies build pricing pages that look good but are broken under the hood. The common approach is to create two separate layouts and use Webflow interactions to display one and hide the other. This method duplicates your markup, makes the page harder to keep accessible, and makes your site a pain to maintain when pricing details change.

By using a structured tabs component, you can build a pricing table that is fast, accessible, and simple to connect to your Webflow CMS.

Why hidden divs are the wrong way to build pricing toggles

Many Webflow developers use a wrapper with two inner divs, one for monthly plans and one for annual plans, and use a custom click interaction on a switch to swap the display properties from block to none. This approach is highly problematic for several reasons.

First, it doubles your maintenance work. You now have two complete sets of pricing cards. If you change a class, a feature row, or a button on a card in the monthly view, you must remember to make the exact same change in the annual view. Miss one, and your two layouts quietly drift out of sync.

Second, it is harder to get right for accessibility. Custom show and hide interactions do not automatically communicate the change in state to assistive technology. Without extra ARIA work, a screen reader may read all of the monthly plans and then all of the annual plans back to back, which is confusing for the visitor.

Third, duplicating layout elements makes your Webflow project heavier and more error-prone. Two stacked card sets mean more elements to style, more places for alignment bugs to creep in, and a larger DOM than you actually need.

The tabs component approach: clean and accessible

The native Webflow tabs component is built specifically for swapping content views. It uses standard semantic markup with built-in keyboard support, so users can navigate between views with the keyboard and you only maintain one set of cards.

Here is how to set up the basic structure:

1. Drag a Tabs component onto your page from the Add panel.
2. In the Tab Menu, keep two Tab Links. Rename the first tab link to "Monthly" and the second to "Annual".
3. In the Tab Content wrapper, you will have two Tab Panes: Tab Pane 1 and Tab Pane 2.
4. Tab Pane 1 will contain your monthly pricing cards, and Tab Pane 2 will contain your annual pricing cards.

By using this setup, Webflow automatically handles the active state styling and visibility of the panes. When a user clicks the "Annual" tab link, Webflow displays Tab Pane 2 and hides Tab Pane 1. Since Webflow manages this natively, you do not need to build any custom click interactions. It works instantly and scales beautifully.

To style the toggle itself, select a Tab Link, go to the selector panel, and style the active state. In Webflow, when a tab is active, it receives a special class called Current. You can use this state to change the background color of the active tab link, style the text color, and add subtle borders to create a pill-shaped toggle button.

Connecting your pricing table to the Webflow CMS

If your SaaS plans change frequently, or if you run a white-label web development shop and want your client to manage prices without accessing the Webflow Designer, you should connect your pricing table to the Webflow CMS. If you are interested in white-label services, you can read about my approach on my white-label page.

To do this, create a Collection called "Pricing Plans". Your collection should include the following fields:

• Plan Name (e.g., Starter, Growth, Enterprise)
• Monthly Price (number field)
• Annual Price (number field)
• Save Percentage (text field, e.g., "Save 20%")
• Plan Description (text field)
• Button Link (link field)
• Recommended Plan (switch field)

Once your collection is populated, you can build your pricing cards. Instead of static blocks, drag a Collection List inside Tab Pane 1 (Monthly) and another Collection List inside Tab Pane 2 (Annual).

In Tab Pane 1, connect the text blocks of your pricing cards to the Monthly Price field. In Tab Pane 2, connect the text blocks to the Annual Price field. Because both collection lists query the same "Pricing Plans" database, your plan names, features, and links will match perfectly across both views. The only elements that will change are the price numbers and billing descriptors.

This CMS-driven approach means if you need to adjust your prices, you only have to change the numbers in the CMS editor. The update will push live immediately to both the monthly and annual layouts without any layout adjustments. For a wider view on CMS limits, look at my guide on webflow cms limits explained.

Conversion rate optimization for your pricing table

A pricing table is not just a collection of numbers. It is the final step in your conversion funnel. Small changes in layout and copy can have a massive impact on your monthly recurring revenue.

The most effective conversion driver for monthly and annual toggles is the savings badge. Annual billing helps SaaS companies secure cash flow upfront and reduces churn. To encourage visitors to choose annual billing, add a small badge next to your "Annual" toggle button that reads "Save 20%" or "2 Months Free".

Make this badge visually distinct. Use a bright background color, like a soft green or warning yellow, and keep the text short. In Webflow, you can place a text block inside your Annual tab link, set the link display to flex, and position the badge relatively so it sits slightly offset above the text.

Additionally, keep your pricing table high on the page. In many conversion audits I have run, I find pricing tables buried beneath long lists of features. SaaS buyers are busy. They want to know the price of your product quickly. Place your toggle and the main cards above the fold, or at least ensure the pricing section is easily accessible from the main navigation.

Designing a clear visual hierarchy

When a user looks at your pricing cards, their eyes should be guided to your target plan. In most SaaS structures, this is the middle plan, often called the "Growth" or "Pro" tier.

To highlight this recommended plan, use visual contrast:

• Use a card scale effect. Make the recommended card slightly taller than the others, or offset it vertically.
• Add a banner badge. Place a banner at the top of the card that reads "Most Popular" or "Best Value".
• Change the button styling. Use your main brand color for the recommended plan button, and use a outline or neutral button for the other plans.
• Add a border. Use a thin, colorful border around the recommended card to draw attention.

In Webflow, you can implement this dynamically using your CMS switch field. Set a conditional visibility rule on the card wrapper. If the "Recommended Plan" switch is on, apply a custom class or show a highlighted wrapper. If the switch is off, show the standard card design. This keeps your layout flexible while ensuring the target option always stands out.

Styling and testing the pricing toggle

To finish the pricing table, you should add subtle micro-interactions to make the billing toggle feel smooth.

Instead of a harsh cut when switching tabs, you can use Webflow built-in transition settings. Select the Tabs wrapper, go to the settings panel, and choose a fade effect. Set the duration to 150 or 200 milliseconds. This gives the price values a soft transition as they swap, which feels much more polished than a sudden jump.

Finally, test your pricing table on mobile screens. A three-column grid of pricing cards will not fit on a mobile viewport. In Webflow, set your mobile layout to stack the cards vertically. Make sure the pricing toggle remains sticky at the top of the screen or sits directly above the first card so the user always knows which billing cycle they are viewing. For more detailed instructions on building clean, mobile-responsive grids, see my article on figma auto layout to webflow variables.