Description
PlexBlocks – Pricing for Block Editor adds clean, flexible, and responsive pricing table blocks natively to the WordPress block editor (Gutenberg). Perfect for SaaS products, digital services, membership sites, freelance packages, and agency tier comparisons.
Easily create high-converting pricing tables complete with an interactive monthly/annual billing toggle, customizable plan cards, featured badges, feature lists, and Call to Action (CTA) buttons—all without writing a single line of code.
Included Blocks
- Pricing Table (
plexblocks/pricing-table): The main container block with multi-column layout controls, responsive grid gap, table alignment, max-width, and the optional billing period switcher. - Pricing Card (
plexblocks/pricing-card): Individual plan cards nested inside the pricing table. Control plan names, monthly and annual prices, currency symbols, featured badges, button links, and feature lists.
Key Features
- Interactive Billing Switcher: Give visitors the ability to toggle smoothly between monthly and annual plans. Instant client-side switching with zero page reload.
- Responsive Multi-Column Grid: Choose 1, 2, 3, or 4 columns for desktop screens with automatic, graceful responsive collapsing on mobile devices.
- Featured Plan Highlighting: Make your highest-value plan stand out with customizable badge text (e.g., “Most Popular”, “Best Value”, “Recommended”), border accents, and elevation shadows.
- Configurable Call to Action (CTA) Buttons: Customize button label, target URL, background color, text color, hover effects, and pill or square border radius. If no URL is provided, the button gracefully renders as an inactive status badge.
- Rich Feature Lists: Enter features line by line. Supports bold text (
<strong>) for highlights and strikethrough (<s>) for excluded or unavailable features. - Ready-to-Use Design Presets: Instantly apply stylish design presets such as Editorial, Split, Spotlight, Dark, Soft, Contrast, and Minimal.
- Deep Per-Card & Table Styling: Fine-tune colors (background, text, plan title, price, period label, border, badge, and button), spacing, padding, min-height, border radius, and typography font sizes and weights.
- Zero Bloat & Peak Performance: Built with pure vanilla JavaScript and native CSS variables. No jQuery, no external frameworks, ensuring top performance and optimal Core Web Vitals.
- Block Theme & Full Site Editing (FSE) Ready: Fully compatible with classic themes, modern block themes, and the WordPress Site Editor.
Developer Credits
This plugin was developed by ConicPlex, specializing in modern WordPress plugins and block editor experiences. For more information, visit ConicPlex.
Blocks
This plugin provides 2 blocks.
- Pricing Table Create pricing table layouts with monthly and annual plans.
- Pricing Card An individual pricing plan inside a pricing table.
Installation
From WordPress Admin
- In your WordPress admin dashboard, navigate to Plugins > Add New.
- Search for
PlexBlocks Pricing for Block Editoror click Upload Plugin to upload the downloaded.zipfile. - Click Install Now and then click Activate.
Manual Installation via FTP
- Unzip the plugin archive.
- Upload the
plexblocks-pricing-for-block-editordirectory to your server’s/wp-content/plugins/directory. - In your WordPress admin dashboard, go to Plugins and click Activate under PlexBlocks – Pricing for Block Editor.
Adding a Pricing Table
- Open any post or page in the block editor (Gutenberg).
- Click the + (Add Block) icon and search for Pricing Table (under the PlexBlocks category).
- Add or edit individual Pricing Card blocks inside the table container.
- Use the sidebar settings panel to customize billing toggle options, columns, colors, typography, and layout.
- Save or publish your page.
FAQ
-
Can I switch between monthly and annual pricing?
-
Yes. The Pricing Table block includes an interactive billing toggle that allows your site visitors to switch between monthly and annual prices instantly. You can customize the toggle labels (for example, “Monthly” and “Annual” or “Pay Monthly” and “Pay Yearly”) or disable the toggle switcher if you only offer one fixed billing frequency.
-
Can I highlight one plan as “Featured” or “Most Popular”?
-
Yes. In any Pricing Card block settings, enable the “Featured plan” option. You can set a custom badge text (such as “Most Popular”, “Recommended”, or “Best Value”), customize the badge colors, and assign distinct shadow and border styles to make that card stand out from the rest.
-
How do I add, remove, or reorder pricing cards?
-
The Pricing Table block acts as a parent block container for Pricing Card blocks. To add a new card, click the “+” inserter inside the table grid. To reorder cards, use the block mover arrows or the Gutenberg List View. To remove a card, select the card and click Options (three dots) > Delete.
-
Can I change the currency symbol?
-
Yes. Each pricing card has an independent currency symbol setting. You can use any symbol or code, such as
$,€,£,₹,¥,CAD, orUSD. -
How do I format the features list?
-
In the card’s “Features” field, type each feature on its own line. You can format items using basic HTML tags: use
<strong>Feature Name</strong>for bold text or<s>Unavailable Feature</s>to display a feature with strikethrough styling for tiers where that feature is excluded. -
If you provide a button label but leave the button URL empty, the button is displayed as an inactive/disabled indicator. Once you enter a valid URL, it automatically turns into an active clickable link.
-
How many columns can I display?
-
You can select 1, 2, 3, or 4 columns for desktop displays. The grid automatically adjusts for tablets and mobile devices to ensure readability and seamless responsive behavior on all screen sizes.
-
Can I customize the colors and fonts?
-
Yes. The block inspector provides comprehensive design controls. You can customize background colors, text colors, borders, border radius, shadows, padding, and font sizes and weights for plan names, prices, feature lists, and buttons.
-
Does this plugin slow down my site?
-
Not at all. PlexBlocks – Pricing for Block Editor is built with clean, modern development practices: lightweight CSS variables, dynamic server-side rendering, and pure vanilla JavaScript with zero external dependencies. There is no jQuery, no large frontend libraries, and minimal asset overhead.
-
Can I add multiple pricing tables on the same page?
-
Yes. You can add as many Pricing Table blocks as you need on a single page or across multiple pages. Each table operates completely independently.
-
Is this plugin compatible with block themes and Full Site Editing (FSE)?
-
Yes. The plugin is built natively for the Gutenberg block editor and works seamlessly with block themes, classic themes, and Full Site Editing templates.
-
Do I need coding skills to use this plugin?
-
No. Everything is configured visually through the WordPress block editor interface.
Reviews
There are no reviews for this plugin.
Contributors & Developers
“PlexBlocks – Pricing for Block Editor” is open source software. The following people have contributed to this plugin.
Contributors
Translate “PlexBlocks – Pricing for Block Editor” into your language.
Interested in development?
Browse the code, check out the SVN repository, or subscribe to the development log by RSS.
Changelog
1.0.0
- Initial release: Responsive Gutenberg pricing table block, pricing card block, monthly/annual billing switcher, featured plan highlighting, design presets, and detailed styling controls.