How Plans Look on the Product Page (v2.5.0 update)

Everything set up in the plan comes together on the product page. WPSubscription shows a plan selector — a card per plan, a button per duration, and a badge showing what subscribing saves against buying once.

The selector comes in seven layouts and your own colours; the screenshots here use the default, stacked cards. See Purchase option layouts and styling to change how it looks.

It needs no theme work and no shortcode. Connect a product to a plan and the selector appears above the Add to cart button.

The product page

The selector, close up

• Each card is one plan. Its heading is the plan's name, exactly as you typed it when you created the plan.

• The line under the heading is the billing note — the price and how often it is charged, with the regular price struck through when there is a discount.

• A tag such as "Most popular", a list of benefits and a learn more link appear on the card when you add them to the plan's On the product page tab.

• Each button is one of the plan's active durations, labelled with the duration's name and what it saves. Each duration carries its own price, regular price, saving and badge, and installment plans read "Pay every".

• One Time Purchase is a card of its own, shown only when you have turned one-time purchase on for the product.

The first card is selected by default, on its first duration — so a customer who reads nothing and clicks Add to cart gets a subscription on your leading plan.

The discount badge

When a duration's offer price is below its regular price, WPSubscription works out the percentage and shows it on the card.

• The selected duration discounts by 20% → Save 20%.

• In the Grid, savings first layout, a duration that saves nothing is replaced by the best saving on offer.

• The selected duration has no offer price → no badge.

Note: The badge is measured against the Regular Price you set for that duration on the plan, not against the product's WooCommerce price. If you want the badge to read "what you save by subscribing", set the duration's regular price to the one-time price and the offer price to the subscriber price. See Plan products and pricing.

Choosing a duration

Clicking a duration button rewrites the card's billing note in place — no page reload, no flicker.

Whatever is highlighted when the customer presses Add to cart is what goes into the cart.

One-time purchase

Where you have allowed it, the last card lets the customer opt out of subscribing entirely.

It is deliberately placed last, under the subscription cards, so the subscription is what the customer reads first and what they get by default.

Variable products

Note: Variable products require WPSubscription Pro.

Plans can differ per variation, so the selector waits until the customer has chosen one.

Choose a variation and its plans appear, priced for that variation.

A variation that is not on a plan simply shows no selector and sells as an ordinary product; the rest of the variations are unaffected.

The catalogue

Shop and category pages show the plan price too, so the price on a listing matches the price on the product page. An instalment price shows its cadence and count, such as "$91.00 / Week x 10".

A listing has no room to ask which duration the shopper wants, so the price is summarised:

• One duration, discounted → the regular price struck through beside the offer price.

• Several durations that all cost the same → that single price.

• Several durations at different prices → the range, cheapest to dearest.

No billing period is shown in the catalogue. The period belongs to a duration, and the listing is not showing one — the product page is where the customer picks.

In the cart

The cart line spells the whole arrangement out: what is being charged, how often, what it saves, and when the next payment falls.

• The line shows the struck-through regular price, the price being charged, and the billing period.

• Save $5.00 restates the discount in money rather than percent.

• Recurring totals gives the amount per cycle and the date of the next payment — the two things a shopper wants confirmed before paying.

Adding a second subscription

Without Pro, a cart holds one subscription at a time. Adding the same subscription again just raises its quantity. Adding a different one asks the shopper whether to switch, and replaces the first only if they say yes. Adding a subscription alongside an ordinary product still shows an error, because swapping would not fix it.

Restyling the selector

Choose a layout and colours in Settings → Product page; see Purchase option layouts and styling. Each layout is a template, so you can also override it the usual way — copy it into your theme at:

your-theme/subscription/product/plan-selector/<layout>.php

For colours and spacing alone, use the settings, or target the selector's classes in your theme's stylesheet instead (with Pro, the Custom CSS setting holds it); you get the markup updates that way.

The badge wording can be changed in code without touching the template, through the subscrpt_plan_card_badge filter — return an empty string to hide it.

If the selector does not appear

What to do next

• Plan products and pricing — where the prices and the badge come from.

• Purchase option layouts and styling — seven layouts, colours, a tag and benefits.

• Direct checkout links — send customers past this page, straight to one price.