A. Raw price values (Lite / Pro / Plus – Annual)

These show the raw numbers you can plug into any markup.
Example: Final price, base price, and savings for WP Pro Annual.

WP Pro – Annual

• Final price (after offers):
  $
• Base price (no offers):
  $16.99
• Savings:
  $

You can swap tier="pro" for lite or plus and
term="annual" for monthly, biennial, triennial.

B. Offer badge examples

These badges will only appear when an offer is actually applied.
If no offer applies, the shortcode returns an empty string.

WP Pro – Annual Badge

Badge (auto or custom from Offer CPT):
Main marketing copy.

If the Offer CPT for the winning offer has offer_badge_text, that is used.
Otherwise the shortcode auto-generates e.g. “SAVE 50%” or “SAVE $8.49”.

C. Price comparison blocks (for pricing tables)

This is what you would typically drop inside a pricing grid cell.
It prints final price, optional crossed-out base price, and a badge if applied.

In a real Kadence Element, you would:

– Move these into Kadence row/column blocks

– Replace inline styles with proper classes

D. Full pricing card demo (using Offer CPT content)

This uses the shortcode, which pulls:

• offer_headline
• offer_subheadline
• Final vs base price (via inside)
• offer_badge_text or auto badge
• offer_button_label
• offer_legal_copy

In a real pricing page, you would probably:

– Build a row of 3 Kadence columns

– Drop one in each

– Handle the button href either by:

• Hardcoding a WHMCS URL per card, or

• Later, adding a offer_button_url ACF field.

E. Offer-code aware example (promo URLs)

This shows how you could pass a specific offer code into the engine.
In production, this might be done from a landing page URL like:

?offer=derp or ?promo=wp-summer-60

Static demo (hard-coded offer_code):

• Final price with offer code “derp”:
  $
• Badge with offer code “derp”:
  Main marketing copy.

Later, when you want this dynamic, you can:

– Use Kadence’s dynamic content or a small PHP helper to pull $_GET['offer']
into a shortcode attribute.

– Or build a dedicated landing page for each major offer and hard-code the offer_code.

F. How to use this template when building real Kadence pricing Elements

1. Decide what the Element represents:

   – a single plan card,

   – a full 3-column pricing grid,

   – a simple inline price in a CTA block,

   – or a hero “Sale” ribbon.

2. Use wherever you want
   base + final + badge together.
3. Use when you just need a number:

   – e.g. in a sentence: “Starting at $/month”.

4. Use for little floating ribbons or tags.
5. Use when you want the Offer CPT to drive:

   – headline, subheadline, button text, legal copy.

6. If you later re-add a debug shortcode, you can dump entire arrays
   for troubleshooting but keep that to dev-only pages.