Freemius Checkout Buttons for WordPress: No-Code Anchor Link Triggers for Elementor & Gutenberg

The Freemius checkout popup is one of the most conversion-optimized payment flows available for WordPress plugins and themes. It handles VAT, payment method selection, plan upgrades, license count selection, and coupon application in a single modal — without redirecting the user away from your marketing page. But triggering it from a custom Elementor button or Gutenberg block has historically required custom JavaScript knowledge that most site editors don’t have.

The Freemius Checkout for WooCommerce plugin solves this with an elegant no-code system: the Global Anchor Link Trigger. Configure your checkout parameters once in the plugin’s admin interface, and any button or link on your site — in Elementor, Gutenberg, or plain HTML — can trigger the correctly configured Freemius popup simply by linking to a unique slug like #fcfw-checkout-personal-annual.

Key insight: The anchor link trigger system means your marketing team, Elementor designer, or content editor can add working Freemius checkout buttons to any page without developer involvement. The checkout configuration lives in the WordPress admin — not in the page builder or in custom JavaScript files.

The Problem: Triggering Freemius Checkout Without Code

Freemius’ native checkout is initialized and opened via JavaScript. The standard implementation looks something like this:

var handler = FS.Checkout.configure({

plugin_id:  '1234',

plan_id:    '5678',

public_key: 'pk_xxxxxxxx',

image:      'https://yoursite.com/icon.png',

});

document.querySelector(‘#buy-btn’).addEventListener(‘click’, function(e) {
handler.open({ name: ‘Personal Plan’, licenses: 1, billing_cycle: ‘annual’ });
e.preventDefault();
});

For a developer, this is straightforward. But for the typical workflow of building a Freemius plugin marketing site in WordPress, this creates several practical problems:

You need to know your Freemius Plan IDs and Pricing Variation IDs — these are numeric IDs that aren’t easily visible in the Freemius dashboard and require API calls to retrieve
Every button change requires code changes — if you want to add a coupon to the checkout, change the billing cycle, or modify which plan a button triggers, you’re editing JavaScript
Elementor and Gutenberg can’t execute custom JavaScript on button click without installing additional code execution plugins or child theme functions
Non-developer team members cannot add or modify checkout buttons without developer assistance, creating a bottleneck for marketing campaigns

How the Global Anchor Link Trigger System Works

The Global Anchor Link Trigger system works in three steps:

Configuration: In the plugin’s Checkout Buttons admin panel, you create a Checkout Button configuration that defines: which Freemius product, which plan, which billing period (yearly or lifetime), how many licenses, and a human-readable slug (e.g., personal-annual).
Registration: The plugin registers a global click event listener on the frontend that intercepts any click on links with href values matching the pattern #fcfw-checkout-{slug}.
Popup Trigger: When a matching link is clicked, the JavaScript handler reads the stored configuration for that slug and calls the Freemius checkout popup with the correct Product ID, Plan ID, Public Key, license count, and billing period parameters.

The result: any link on your site with href="#fcfw-checkout-personal-annual" opens the fully configured Freemius checkout popup — without any additional JavaScript, without any Elementor custom code widget, and without touching a single PHP file.

Creating a Checkout Button Configuration

Navigate to Freemius → Checkout Buttons in the WordPress admin sidebar.
Click Add New Checkout Button.
Enter a Button Name (internal label, e.g., “Personal Plan Annual”).
Enter a unique Slug (e.g., personal-annual). This will generate the anchor link #fcfw-checkout-personal-annual.
Select your Freemius Product from the dropdown (populated automatically from your API credentials).
Select the Plan (fetched dynamically from Freemius API).
Select the Billing Period (yearly or lifetime).
Select the License count (1 site, 5 sites, unlimited, etc. — fetched from plan pricing variations).
Optionally assign to a Group for organizational purposes.
Save. The anchor link is now active on your site.

The plugin stores the Freemius Plan ID, Pricing Variation ID, and Public Key in a local WordPress database table (wp_fcfw_checkout_links), so the frontend JavaScript can load this configuration without an API call on every page load — ensuring fast popup initialization.

Dynamic Plan & Variation Fetching from the Freemius API

One of the most practical time-saving features of the Checkout Buttons module is dynamic API data fetching during configuration. When you create a new checkout button, the plugin automatically calls the Freemius API to retrieve:

/plugins.json — All products under your developer account (for the product dropdown)
/plugins/{id}/plans.json — All pricing plans for the selected product (for the plan dropdown)
/plugins/{id}/plans/{plan_id}/pricing.json — All pricing variations (billing cycles, license tiers) for the selected plan (for the variation dropdown)

This means you never need to look up numeric Freemius Plan IDs or Pricing Variation IDs manually. Everything is presented in a friendly dropdown interface using the human-readable plan names from your Freemius account.

Group Management for Large Marketing Sites

If your marketing site has multiple pricing pages — a homepage pricing section, a features page with upgrade buttons, a comparison table, sidebar CTAs, and footer plans — you can quickly accumulate dozens of checkout button configurations. The Group Management feature organizes these into logical named groups:

🏠 Home Page Pricing

Personal Annual, Professional Annual, Agency Annual — the primary CTA buttons on the main pricing section.

🌐 Footer Plans

Condensed footer pricing CTA buttons — typically fewer options than the main pricing page.

📋 Blog Sidebar

Single-plan upgrade CTA in blog post sidebars or inline within tutorial content.

💰 Lifetime Deal

Lifetime plan checkout buttons used during promotional campaigns — can be enabled/disabled as a group.

Using Checkout Links in Elementor

Elementor is the most popular page builder for WordPress plugin marketing sites — and the anchor link trigger system integrates with it natively:

Add a Button widget to your Elementor page layout
In the Button widget’s link field, enter #fcfw-checkout-your-slug (replacing “your-slug” with the slug you defined in the plugin)
Style the button however you like using Elementor’s design controls — color, size, border radius, hover effects, animations
Publish the page — clicking the button will immediately open the Freemius checkout popup

This works because Elementor renders the button as a standard <a> element with the specified href — exactly what the plugin’s click event listener intercepts. No Elementor-specific integration is needed.

Advanced Elementor use case: use the anchor trigger in Elementor’s Call to Action widget, Price Table widget (for the buy button link), or any Icon Box widget — anywhere Elementor accepts a link URL.

Using Checkout Links in Gutenberg

In the Gutenberg block editor, using anchor link checkout triggers is equally straightforward:

Add a Buttons block to your page
Click the button to edit its link
In the link popover, type or paste #fcfw-checkout-your-slug
Update the page — the button is now a working Freemius checkout trigger

For pricing tables built in Gutenberg, use the [fcfw_buy_button] shortcode (detailed below) inside a Shortcode block — this renders a custom-styled anchor element with all checkout parameters embedded as data attributes.

The [fcfw_buy_button] Shortcode — Parameters & Usage

The [fcfw_buy_button] shortcode provides more control than anchor links for cases where you need the full checkout configuration embedded directly in the button element rather than in the global JavaScript registry. Parameters:

Parameter	Required	Description	Example
`id`	Yes	ID of the saved Pricing Plan configuration	`id="1"`
`plan`	Yes	Plan key/slug (e.g., personal, professional)	`plan="personal"`
`period`	No	Billing period: yearly or lifetime	`period="yearly"`
`text`	No	Button label text	`text="Buy Now"`
`class`	No	Additional CSS classes for styling	`class="btn btn-primary"`

Example complete shortcode:

[fcfw_buy_button id="1" plan="personal" period="yearly" text="Get Personal Plan" class="my-buy-btn"]

The shortcode generates an <a> element with these data attributes: data-product-id, data-plan-id, data-public-key, data-licenses. The frontend JavaScript reads these to configure and open the Freemius checkout popup on click.

The [freemius_pricing] Full Table Shortcode

Beyond single buttons, the plugin provides a [freemius_pricing id="1"] shortcode that renders a complete React-powered pricing table component. This mounts a full pricing table UI at the shortcode location showing all configured plans with their prices, features, and buy buttons — all generated from your stored Pricing Plan configuration.

The pricing table component loads the plan data from the local WordPress database (no API call required on page load) and renders the checkout buttons using the same trigger mechanism as the anchor link system. The component shows a loading spinner while initializing and is compatible with any WordPress theme.

For developers interested in the technical implementation: the plugin enqueues Freemius’ official checkout.min.js from https://checkout.freemius.com/checkout.min.js on all frontend pages. This is the official Freemius checkout SDK that provides the FS.Checkout.configure() and handler.open() API.

The plugin’s own frontend JavaScript (assets/frontend.js) then:

Fetches all registered checkout button configurations from the WP REST API endpoint (/wp-json/freemius-checkout/v1/checkout-links)
For each configuration, initializes a FS.Checkout.configure() handler with the product ID, plan ID, public key, icon URL, and license count
Attaches a global click event listener that matches the href of clicked links against the pattern #fcfw-checkout-{slug}
When a match is found, calls the corresponding handler’s open() method with the billing period parameter

Best Practices for Freemius Checkout Button Placement

Above the fold CTA: Always place your primary checkout button above the fold on pricing pages. The anchor link trigger works with any button position on the page.
Sticky header CTA: Use the anchor link in an Elementor sticky header button to maintain checkout accessibility as users scroll the pricing page.
Inline blog content: Use [fcfw_buy_button] shortcode inside tutorial articles to link directly to the relevant plan when readers are at peak engagement with your content.
Comparison table buttons: Create separate checkout button configurations for each plan tier and assign the corresponding anchor link to each tier’s “Buy” button in your comparison table.
Seasonal promotions: Use different slug configurations for promotional checkout flows — the Freemius checkout popup supports coupon pre-fill, so you can configure a promotional button that pre-applies a discount code.
Multiple billing periods: Create separate configurations for annual and monthly/lifetime checkout flows for the same plan, allowing users to toggle between billing options with different buttons.

Frequently Asked Questions

Does the anchor link trigger system require any JavaScript in my Elementor page?

No. The plugin’s frontend JavaScript is enqueued automatically on all frontend pages. All you need to do in Elementor is set a button’s link to #fcfw-checkout-your-slug. The plugin handles all JavaScript configuration and popup initialization automatically.

Can I have multiple checkout buttons for the same product but different plans?

Yes. Create a separate Checkout Button configuration for each plan/billing period combination, each with a unique slug. For example: personal-annual, professional-annual, agency-annual, personal-lifetime — each generating its own distinct anchor link that opens the specific plan’s checkout.

What is the difference between the anchor link method and the [fcfw_buy_button] shortcode?

Anchor links let you use any existing button/link element (e.g., your Elementor Button widget) as the checkout trigger — you just set its href to the anchor. The [fcfw_buy_button] shortcode generates the button element itself, with checkout parameters embedded as data attributes. Anchor links are better for page builders; the shortcode is better for inserting checkout buttons directly into post content.

Can I pre-fill a coupon code in the Freemius checkout popup?

The Freemius checkout JS SDK supports a coupon parameter in the handler.open() call. This can be configured per checkout button slug in the plugin’s admin interface, enabling promotion-specific checkout configurations that pre-apply discount codes.

Add Freemius Checkout Buttons to Elementor Without Writing Code

Create your checkout configuration once. Use the anchor link anywhere. No JavaScript. No developer required.

Get the Plugin →