Every Freemius plugin developer needs to present their pricing plans on their marketing site. The typical implementation involves a static HTML or CSS pricing table with hardcoded plan names, prices, and checkout links — which breaks every time you change a price or add a new license tier in your Freemius account. The Pricing Plans & Shortcode system in Freemius Checkout for WooCommerce solves this by creating a persistent configuration layer between your Freemius plan data and your WordPress frontend, enabling dynamic, database-driven pricing tables and checkout buttons that stay in sync with your Freemius configuration.

The Products Pricing Module: How It Works

The “Products Pricing” admin menu (accessed via Freemius → Products Pricing) is where you create Pricing Plan configurations — saved records in WordPress’ database that map your Freemius product plans to structured data the shortcodes can use.

Each Pricing Plan configuration includes:

• Product ID: The Freemius product this configuration applies to
• Pricing Plans: A repeater structure grouping plans by billing period (yearly, lifetime) with each entry containing the plan key, plan name, Freemius Plan ID, Pricing Variation ID, license count, price, and button text
• Display Configuration: Feature lists, highlighted plan, custom styling parameters

The dynamic data fetching during configuration works the same way as the Checkout Buttons module — the plugin calls /plugins/{id}/plans.json and /plugins/{id}/plans/{plan_id}/pricing.json to populate dropdown selectors with your actual Freemius plan names and pricing variation IDs. No manual ID lookup required.

Configurations are stored in a custom WordPress database table (wp_fcfw_pricing_groups) and retrieved via the Freemius_Pricing_DB class. This local storage is critical for performance: the frontend shortcodes load plan data from the local database rather than making live Freemius API calls on every page load, keeping frontend response times fast regardless of Freemius API latency.

The [freemius_pricing] Shortcode: Full React Pricing Table

The [freemius_pricing] shortcode renders a complete React-powered pricing table at the shortcode insertion point. Usage:

Where id is the database ID of a saved Pricing Plan configuration. The shortcode renders a placeholder div with the encoded plan data as a data attribute. The plugin’s frontend JavaScript (assets/frontend.js) mounts a React component onto this div, rendering the full pricing table with all plan tiers, prices, feature lists, and buy buttons.

The React pricing table frontend requires two scripts enqueued on the page: wp-element (WordPress’ bundled React) and freemius-checkout-js (the official Freemius checkout popup SDK from checkout.freemius.com). Both are enqueued automatically whenever a [freemius_pricing] or [fcfw_buy_button] shortcode is present on the page.

The [fcfw_buy_button] Shortcode: Individual Plan Buttons

For cases where you need individual buy buttons rather than a full pricing table — inline within a blog post, in a sidebar widget, or as a single CTA button on a landing page — the [fcfw_buy_button] shortcode generates a single anchor element configured to trigger the freemius checkout popup for a specific plan:

The shortcode resolves the plan configuration from the local database using the id and plan parameters, extracts the Freemius Plan ID, Pricing Variation ID, and license count, and renders a complete anchor element with all these values as data attributes. The rendered HTML looks like:

The fs-checkout-trigger class is detected by the frontend JavaScript, which reads the data attributes to configure and open the correct Freemius checkout popup on click. The button text falls back to the saved btnText from the plan configuration if no text attribute is provided in the shortcode.

Database Architecture: wp_fcfw_pricing_groups & wp_fcfw_checkout_links

The plugin creates two custom database tables on activation:

Both tables use WordPress’ standard $wpdb interface and are created using dbDelta() during plugin activation via Freemius_Checkout_DB::init(). The tables store data as serialized JSON in a data column alongside a product_id column for efficient product-based filtering.

REST API Endpoints

The plugin registers a complete REST API under the freemius-checkout/v1 namespace, enabling the React admin dashboard and frontend components to communicate with WordPress server-side logic:

All endpoints require manage_options capability and authenticate using WordPress REST API nonces — passed as the X-WP-Nonce header in all React dashboard requests.

Setup Guard: Intelligent Configuration Validation

The plugin’s Setup Guard is one of its most developer-friendly features. On every page load of the admin dashboard, the React app calls the /settings REST endpoint to verify that all three required credentials are present: developer_id, public_key, and secret_key.

If any credential is missing or the API returns an error, the dashboard displays a friendly “NoContent” state with clear guidance to navigate to Settings and configure credentials. This prevents confusing empty states, cryptic API error messages, or partially loaded dashboards that typically plague poorly-designed WordPress plugins that don’t validate configuration state before rendering data-dependent UI.

The Settings page itself is always accessible regardless of configuration state — only data-dependent pages (Dashboard, Subscriptions, Discounts, etc.) redirect to the NoContent state when unconfigured. This ensures new users can always reach the Settings page to complete their setup.

React + Chakra UI: The Premium Dashboard Experience

The entire admin dashboard is built as a React single-page application styled with Chakra UI — the same component library used by many SaaS products. This architectural choice produces several concrete benefits for the user experience:

• Instant navigation: Switching between Dashboard, Subscriptions, Discounts, and other sections doesn’t reload the page — HashRouter navigation is instant
• Professional loading states: Chakra Spinner components display while API data is loading — no blank screens or jarring layout shifts
• Consistent design system: Chakra’s design tokens ensure visual consistency across all modules without ad-hoc CSS overrides
• Clean admin isolation: WordPress admin notices, footer text, and page padding are hidden during the plugin’s pages for a distraction-free experience