Buy buttons

A buy button is an ordinary link to your Freemius hosted checkout for the same plan, licence tier and billing cycle a price would render.

Insert the Freemius buy button block, or write [pflp_button]. Every attribute and default is on the Reference page.

What it renders

<span class="wp-block-button pflp-button-wrap">
  <a class="wp-block-button__link wp-element-button pflp-button"
     href="https://checkout.freemius.com/product/38031/plan/63359/licenses/3/?billing_cycle=annual">Buy now</a>
</span>

It renders as a WordPress button, so your theme's button styling applies. That is the whole point of the wrapper: a theme writes its button styling as .wp-block-button .wp-block-button__link, which is how WordPress's own Button block is built, so a buy button gets your theme's colour, corners, padding and type without you setting anything. Tested on ten themes, and on Astra, OceanWP, GeneratePress and Twenty Twenty-One the buy button now matches the theme's own buttons exactly where it used to fall back to WordPress's plain grey.

The plugin's own styling is a fallback with no specificity at all, so anything your theme says wins. Where a width is set, the width classes sit on the wrapper, which is where WordPress puts them too.

The words come from label="..." on one button, or from Button label under Buttons on the Settings tab for all of them, or "Buy now" if both are empty.

Currency and cycle follow the page

The button carries one checkout URL per billing cycle the tier sells. Press the billing cycle toggle and the link is rewritten from that list; press the currency toggle and the visitor's currency is added to whichever link is current. Neither needs a request back to your site.

Naming cycle or currency on the button pins it, exactly as it pins a price: a button on a card that sells one thing keeps selling that thing while the toggles move everything else.

The plugin adds the visitor's currency to any link on the page pointing at checkout.freemius.com, not only the ones it rendered, so a button built by your theme or page builder opens in the currency the visitor was reading. With Checkout set to the overlay, a click on such a link opens the Freemius checkout over your page instead of leaving it, carrying the same product, plan, licences, billing cycle and currency. Anything the overlay cannot be given exactly falls back to the hosted page, so a button always works.

Width

width="25", "50", "75" or "100" is the percentage of the block around the button, the same four choices the core Buttons block offers, and the same four the Shortcode builder offers under Width beside Content. On a pricing card, 100 spans the card. It renders as the same pair of classes core writes for its own button, so one rule set serves the block and the shortcode. Any other value is ignored rather than printed.

Filled or Outlined

A buy button comes in two kinds, the same two the core Buttons block offers and built the same way, so a theme that styles an outlined button styles this one.

• Filled is the solid button, and it is what every buy button looked like before. It is the default, so nothing on a page you have already published changes.
• Outlined draws the button as a 2px border in the current text colour with the page showing through it, exactly as the core Buttons block's outlined style does.

In the block editor, pick it in the Styles panel. In a shortcode, write style="outline". The Shortcode builder on the product's screen has both under Style, with Width beside it, so you can pick the two from dropdowns rather than typing them. Anything else is ignored rather than printed.

Each kind has its own colours on the Appearance tab, under Filled buttons and Outlined buttons. See Colour, border and hover below.

Colours, corners, borders and spacing you set on the block's own panels still win over the kind, so Outlined is a starting point rather than a cage. A button already carrying an is-secondary class is read as outlined as well; that is there so pages built before this setting existed keep the look they had, and it will stop being read in the release after this one, so move those buttons to the Outlined style when you next edit them.

When the plan does not sell that cycle

A button cannot leave a gap the way a price can: a link to a checkout that sells nothing is a broken promise in front of somebody holding a card. So it stops being a link.

You write	What the page does
nothing, or missing="text"	keeps the button's shape and classes on a non-clickable element carrying the reason, Yearly only
missing="hide"	renders nothing visible
missing_text="Yearly plans only"	your words instead of the derived ones

In the block this is the If the plan does not sell this cycle control. The derived wording is the same one a price uses: the cycles the tier does sell, in your own words for them. Showing an unavailable option with the reason beside it, rather than hiding it, is what keeps a pricing card the same shape as the visitor moves the toggle.

The element is marked aria-disabled while it cannot sell, so a screen reader announces it as unavailable rather than as a link. Move the toggle back and it becomes a link again.

missing="hide" still leaves the element in the page, hidden from both eyes and screen readers, because it is what the toggle needs in order to bring the button back.

When there is no row at all

A plan that does not exist, or a licence tier the plan does not sell, renders no button at all, and the reason goes to the log. That is different from the case above: there is nothing to sell at any cycle, so there is nothing to keep the shape of.

A plan with no price at all, such as a free tier, is the same story. Use an ordinary button, the core Buttons block or your theme's, linking to the plugin's download page. That link is a fixed fact rather than a live price, so there is nothing for this plugin to keep current.

Colour, border and hover

The block editor's panels cannot set what a button does under the pointer, and a look you want on every buy button is one setting rather than one setting per button, so the Appearance tab of the Settings screen has three groups for them. The words on a button are the one button setting left on the Settings tab: Button label.

Filled buttons and Outlined buttons are a group each, one for each kind of button, with the same two rows:

• Border width - 0 to 20 pixels. A filled button has no border unless you set a width; empty keeps your theme's, which for an outlined button is its outline. 0 takes the border away.
• Colours - the text, the border and the background that kind takes Normal and On hover. A button takes the grid for the kind it is, and only that one. Leave a colour empty and your theme's own stays.

An outlined button with no width set takes your theme's own outline wherever your theme's rule reaches it, as WordPress's own outlined Button block does, and WordPress's 2px border and padding where it does not. A theme that keeps its outline style for buttons inside a core Buttons block, such as Astra or Blocksy, cannot reach this button, so there it keeps WordPress's look.

A button shows a border only when it has a width - one you set here, one set in the block's own Border panel, or one your theme gives it. A Border colour never creates a width: on a button with no border it changes nothing you can see, and on a button that has one - Twenty Twenty-One gives its buttons 3px, for example - it colours that border. Most themes give a filled button no border at all, so on those a Border colour needs a Border width to show.

There is no width On hover. A border is two pixels of box, so one that grew or appeared under the pointer would make the button bigger and move the page; the On hover Border colour paints the border the button already has.

An outlined button's border follows its Text colour until you give it one of its own, which is how the core Buttons block's outlined style behaves and what most themes expect. Its Background is empty to start with, which is what makes it outlined: the page shows through. Set one and it is a real background - a tint at rest, or a fill under the pointer.

The Normal column is where a button that says nothing starts, so a colour or a width set on the button itself, in its block panel or in its shortcode, wins over it. Unlike the lift and the shadow, a colour applies on touch screens too: a tapped button that keeps a colour looks pressed, where one that keeps a lift looks broken.

The buy button inside a featured card has its own Border width and its own colours at rest and under the pointer, on the Featured plan tab. They are not limited to wide screens, and they win over both groups here. See The pricing card.

Buttons, the group above them, holds what both kinds share, including what a button does as you point at it:

• Hover lift is how far every button rises, in pixels, 0 to 6. 0 is none, and 1 is the house look.
• Hover shadow is the shadow it takes with it: None, Soft or Strong, the same two shadows a featured pricing card offers.
• Shadow colour - the colour that shadow is drawn in. The preset keeps its depth and its softness and only the colour changes, so a brand tint reads as light falling on the page rather than as a second border. Empty is the neutral black it has always been, and with the shadow on None there is nothing to colour.

The lift and the shadow apply on screens 1025px and wider only, so a touch screen never leaves a tapped button lifted. Both are off unless you turn them on.

Styling

The buy button block carries the colour, typography, spacing, border and shadow panels, and the Styles panel with Filled and Outlined. A border drawn from the colour and border panels works: the plugin adds the border style WordPress leaves out, the way the core Buttons block does for itself, so a hand-drawn outline is a width and a colour and nothing else. See Styling for the full list and the classes.