How to Create Multi Column Pricing Table in WordPress (Gutenberg)

Want to display multiple pricing plans side by side on your website? Learn how to create a multi column pricing table in WordPress using the Gutenberg editor.

A pricing table is an easy way to present product or service plans clearly. It helps users quickly compare features, prices, and benefits before making a choice. However, on WordPress, creating a pricing table with multiple columns can be a task as it often involves complex layouts or external page builders. 

The easier method to create a multi column pricing table in WordPress Gutenberg is to use a specialized pricing table block from a reliable plugin.

In this article, we explore how to create a multi column pricing table in WordPress using the Pricing Table block from Nexter Blocks.

What is a Pricing Table in WordPress?

A pricing table in WordPress displays different product or service plans in a clean, side-by-side layout. Each column typically shows the plan name, price, list of features, and a call-to-action button that prompts users to sign up or purchase.

You can add pricing tables using the default block editor or with the help of a WordPress pricing table plugin. These tables help you present options clearly, compare offers, and guide visitors toward the plan that fits them best.

Why Use Multi Column Pricing Tables?

A multi column pricing table in WordPress lets you show multiple plans side by side, which makes comparison faster and more visual. It’s a great way to display options like Free, Premium, or Enterprise tiers in one clean view. This format also supports attractive pricing table designs that highlight prices in a simple way. 

Here’s why multi column layouts work well:

1. Improves Decision-Making: When users can view all available plans next to each other, they immediately notice the differences in features, pricing, and value. This comparison helps them pick a plan confidently, without needing to dig through individual pages.
2. Highlights Best Value Plans: You can visually highlight the most popular or recommended plan using ribbons, contrasting colors, or a subtle zoom effect. This draws attention to the option you want users to select, making upselling much easier.
3. Fits Multiple Offers in One Section: A multi column pricing table displays three or four plans in a single block, saving space and reducing clutter. You don’t need to create separate sections or use complex page structures. You’ll often find multi-column pricing tables used on SaaS websites, membership platforms, online stores powered by WordPress ecommerce plugins, and service-based business sites.
4. Fully Compatible with Most Themes and Plugins: Most modern WordPress pricing table plugins like Nexter Blocks support multi-column layouts and blend seamlessly with your existing WordPress theme, without affecting site speed or mobile responsiveness.
5. Delivers a Clean, Professional Look: A uniform column structure brings balance to your layout. Combined with icons, buttons, and structured lists, it creates a polished pricing table design that builds trust with your visitors.

Want to ensure your website ranks well? Find the best SEO-friendly themes you can use.

How to Create a Multi Column Pricing Table in WordPress Gutenberg

The Nexter Blocks’ Pricing Table Block is one of the most flexible ways to build a multi column pricing table in WordPress, especially if you’re using the default Gutenberg editor. You don’t need any coding or external page builder. 

Once the plugin is active, you can design fully customizable and responsive pricing tables using:

• Pre-designed layouts for different pricing styles
• Previous price and discount indicators
• Feature lists with icons and tooltips
• Call-to-action buttons with custom links
• Optional ribbons to highlight featured plans
• Show More toggles to control long lists
• Scale effects to bring attention to a specific plan

Step 1. Installing and Activating Nexter Blocks Plugin

Start by heading to your WordPress dashboard. Go to Plugins > Add New, and search for Nexter Blocks. Install and activate the plugin.

Once it’s active, go to Nexter Blocks > Blocks from the admin menu. Find the Pricing Table, toggle it on, and click Save Settings. This ensures the block becomes available in your editor.

Step 2. Adding and Configuring Pricing Table Blocks

Create a new page or open an existing one in the editor. Click the “+” icon to add a new block. Search for Pricing Table and select the Nexter Pricing Table block.

Once inserted, you’ll see the block settings divided into three tabs: Layout, Style, and Advanced. Start with the Layout tab, where you’ll configure:

Video: https://drive.google.com/file/d/11C4Uh5Vbe8ATuUiP38KvF2oahLZopf8I/view?usp=drive_link

• Style: Pick from multiple pre-built table layouts or you can also import from block presets.
• Title Area: Add your plan name, subtitle, and optional icon, image, or SVG. You can also align the title here.
• Price Area: Set a prefix (like currency), enter your main price, and add postfix text like “per month.”
• Previous Price: Toggle this on to show a slashed-out older price, ideal for highlighting discounts or limited-time offers.

This initial setup gives you one complete pricing card. You can include all the content such as features, pricing details, and buttons right from this panel.

Step 3. Creating Columns for Multi Column Layout

So far, you’ve created a single pricing block. To build a multi column pricing table, you need to add multiple pricing blocks side by side.

Click the “+” icon, search for Columns, and choose a layout- 3 columns works well for Basic, Standard, and Premium plans. Inside each column, click the “+” icon again and add a separate Pricing Table block in each one.

Video: https://drive.google.com/file/d/1FcB5uRgSIFCj4nJQW0mwMxfh1Wi5ICoW/view?usp=drive_link

Configure each block individually just like you did in Step 2. Use unique titles, prices, features, and button links for every column. This side-by-side layout helps users compare all plans at a glance and is fully responsive across devices.

Step 4. Customizing Pricing Table Design and Styles

Now that your pricing blocks are in place, let’s customize their appearance using the remaining layout settings. Here are some functions to try out: 

Video: https://drive.google.com/file/d/1weg6dlsrKi0v-wjXhf5schRIcKIg7C9I/view?usp=drive_link

• Button: Toggle this on to add a call-to-action button. You can change the text, add a link, and choose from preset styles. 
• Call to Action: Add supporting content below the button, such as a short note or benefit statement. This is useful for nudging users toward action like buying or signing up. 
• Ribbon: Use this to add a ribbon label like “Recommended” or “Popular” to one of the columns. It helps highlight a specific plan visually.

These options let you give each column its own identity while keeping the overall table consistent and aligned.

Once done, preview your page to check how the multi column pricing table looks across desktop, tablet, and mobile screens. The layout adapts automatically if you’re using a fully responsive WordPress theme, which is the case with most modern themes.

This entire setup works inside Gutenberg, so you don’t need any extra page builder to create a professional-looking pricing table for WordPress.

Want a more detailed breakdown of the different styling options? Read this guide on how to add a WordPress pricing table. 

Want a more detailed breakdown of the different styling options? Read this guide on how to add a WordPress pricing table. 

Best Practices for Multi Column Pricing Tables in WordPress

Once you set up a multi column pricing table in WordPress, spend some time refining the layout for better usability and conversions.

The design should not only look professional but also guide visitors toward the right plan.

Here are some tips: 

1. Make Pricing Tables Responsive and Mobile Friendly

Always check how your pricing tables appear on smaller screens. A multi-column layout should automatically stack or resize for mobile.

The best WordPress pricing table plugins Nexter Blocks offer built-in responsive pricing tables that adjust layout without extra configuration.

Setting up responsive styles as per mobile and tablet devices with Nexter Pricing Table Block.

2. Use Clear Call to Action Buttons

Each pricing column should end with a well-styled button. Use direct text like “Start Free Trial” or “Buy Now.” Customize the button style to match your brand and keep the action obvious. Strong CTAs increase conversions and make your WordPress pricing table more effective.

Customising the Pricing CTA Button from Next Pricing Table Block.

Tip: If you’re selling gated content or subscriptions, pairing your pricing tables with WordPress content protection plugins can help you manage access to premium features effectively.

Wrapping Up: Popular Use Case for Multi Column Pricing Tables in WordPress

A multi column pricing table in WordPress gives your visitors a clear, side-by-side view of different plans. This format works especially well for showcasing tiered services. It helps potential buyers compare features, prices, and benefits in one glance, reducing decision time and improving conversion rates.

You’ll find multi column pricing tables used on SaaS websites, membership platforms, digital product stores, and service-based business sites. They’re ideal for clearly presenting monthly vs annual pricing, feature comparisons, or plan limits. When done right, this layout gives your content structure while keeping your users focused.

The Nexter Blocks plugin makes the setup simple. Beyond pricing tables, it offers over 90 Gutenberg blocks that add powerful features to your site, without slowing it down. All blocks are optimized for the latest WordPress updates and help you refresh your site’s layout, design, and functionality with ease.

FAQ on Creating Multi Column Pricing Tables in WordPress