Skip to main content

Pricing Page

The Pricing Page displays your subscription plans in an attractive, conversion-optimized layout. It includes billing cycle toggles, feature comparisons, and direct checkout integration.

Overview​

The pricing page features:

  • Plan Cards — Visual display of each plan
  • Billing Toggle — Switch between monthly and yearly
  • Feature Lists — Compare plan benefits
  • Subscribe Buttons — Direct to checkout
  • Responsive Design — Works on all devices

Setup​

Automatic Page Creation​

During the plugin's Setup Wizard, a Pricing page is automatically created.

Manual Setup​

You have two options for creating the pricing page:

Option 1: Page Template

  1. Create a new WordPress page (e.g., "Pricing")
  2. In Page Attributes → Template, select Paywall Pricing
  3. Publish the page
  4. Assign as the Pricing page in PaywallWP → Settings → Pages

Option 2: Shortcode (More Flexible)

  1. Create a new WordPress page
  2. Add the shortcode: [paywp_pricing]
  3. Publish the page
  4. Assign as the Pricing page
When to Use Each

Use the page template for a dedicated pricing page. Use the shortcode when you want to embed pricing within other content, custom landing pages, or need more control over the surrounding content.

Shortcode Options​

Customize the pricing display:

[paywp_pricing]
AttributeDefaultDescription
titleFrom settingsSection heading
subtitleFrom settingsDescription text
show_toggletrueShow billing cycle toggle
show_headertrueShow title and subtitle
default_cyclemonthlyDefault billing cycle

Examples​

Custom title:

[paywp_pricing title="Choose Your Plan" subtitle="Start your journey today"]

Default to yearly billing:

[paywp_pricing default_cycle="yearly"]

Minimal display (no header):

[paywp_pricing show_header="false"]

No billing toggle:

[paywp_pricing show_toggle="false"]

Plan Display​

Plan Cards​

Each plan shows:

ElementDescription
NamePlan name (e.g., "Premium")
BadgeOptional label (e.g., "Most Popular")
PriceMonthly or yearly price
Period/month or /year
FeaturesList of benefits
ButtonSubscribe CTA

Mark a plan as featured to highlight it:

  1. Edit the plan
  2. Enable Featured option
  3. Optionally add a Badge (e.g., "Best Value")
  4. Save

Featured plans:

  • Stand out visually (different color/border)
  • Show badge if set
  • May be positioned prominently

Plan Order​

Control display order:

  1. Edit each plan
  2. Set Sort Order (lower = first)
  3. Save

Or drag-and-drop in the Plans list.

Billing Toggle​

The billing toggle lets visitors compare monthly and yearly pricing:

How It Works​

  • Shows both monthly and yearly options
  • Switches prices without page reload
  • Highlights savings for yearly plans

Yearly Savings​

Display savings automatically:

Monthly: $9.99/month
Yearly: $99/year (Save 17%)

Savings calculated from:

Yearly Savings = (Monthly × 12 - Yearly) / (Monthly × 12) × 100

Feature Lists​

Adding Features​

Edit each plan and add features:

Access to all premium articles
Weekly exclusive newsletter
Ad-free reading experience
Members-only community
Priority support

Each line becomes a feature with a checkmark.

Feature Comparison​

Features are shown per plan, allowing visual comparison. For best results:

  • Keep feature counts similar
  • Lead with most valuable features
  • Use consistent language
  • Show what's NOT included in lower tiers

Checkout Flow​

Subscribe Button​

When clicked:

  1. Guest Users — Modal opens with login/register + checkout
  2. Logged-in Users — Checkout modal opens directly
  3. Existing Subscribers — Shown upgrade options

Checkout Modal​

The checkout modal includes:

  • Plan summary
  • Payment form (Stripe Elements or PayPal)
  • Login option for existing users
  • Terms acceptance

Styling​

Default Design​

The pricing page uses a clean, modern design:

  • Responsive grid layout
  • Hover effects on cards
  • Clear visual hierarchy
  • Accessible color contrast

Customization​

Via Settings​

Go to PaywallWP → Settings → Styles:

  • Primary color
  • Card style
  • Button style
  • Typography

Via CSS​

Add custom CSS:

/* Plan cards */
.paywp-pricing__card {
	border-radius: 12px;
}

/* Featured plan */
.paywp-pricing__card--featured {
	border-color: var(--paywp-primary);
}

/* Price display */
.paywp-pricing__price {
	font-size: 2.5rem;
}

/* Subscribe button */
.paywp-pricing__cta {
	background: var(--paywp-btn-primary-bg);
}

Key CSS Classes​

ClassElement
.paywp-pricingMain container
.paywp-pricing__headerTitle section
.paywp-pricing__toggleBilling toggle
.paywp-pricing__cardsPlan grid
.paywp-pricing__cardIndividual plan
.paywp-pricing__card--featuredFeatured plan
.paywp-pricing__plan-namePlan title
.paywp-pricing__pricePrice display
.paywp-pricing__featuresFeature list
.paywp-pricing__ctaSubscribe button

Multiple Pricing Sections​

Use the shortcode multiple times:

<!-- On homepage -->
[paywp_pricing show_header="true" default_cycle="yearly"]

<!-- In a modal -->
[paywp_pricing show_header="false" show_toggle="false"]

<!-- Comparison page -->
[paywp_pricing title="Individual Plans"]
[paywp_pricing title="Team Plans" category="team"]

Embedding in Other Pages​

In Posts​

Add the shortcode to any post or page content.

In Widgets​

Use a Shortcode widget or Custom HTML widget.

In Theme Templates​

<?php echo do_shortcode('[paywp_pricing]'); ?>

Best Practices​

Pricing Strategy​

  1. Three Plans — Good, Better, Best
  2. Anchor High — Show premium option first
  3. Highlight Value — Feature the mid-tier
  4. Show Savings — Emphasize yearly discounts

Design Tips​

  1. Above the Fold — Key info visible without scrolling
  2. Mobile First — Test on small screens
  3. Clear CTAs — Obvious subscribe buttons
  4. Trust Signals — Money-back guarantee, testimonials

Conversion Optimization​

  1. Reduce Friction — Minimal form fields
  2. Social Proof — "Join 10,000+ subscribers"
  3. Urgency — Limited-time offers
  4. Value Focus — Benefits over features

Testing​

A/B Testing​

Test different approaches:

  • Price points
  • Feature ordering
  • Button text
  • Default billing cycle
  • Featured plan

Checkout Testing​

  1. Test in incognito mode
  2. Test both monthly and yearly
  3. Test all payment methods
  4. Test on mobile devices

Troubleshooting​

Plans Not Showing​

  • Verify plans are published
  • Check plans have prices set
  • Clear cache if using caching

Toggle Not Working​

  • Check for JavaScript errors
  • Verify jQuery is loaded
  • Test without caching plugins

Checkout Not Opening​

  • Check payment gateway is configured
  • Verify API keys are correct
  • Check browser console for errors

Styling Issues​

  • Check for CSS conflicts
  • Verify theme compatibility
  • Test with default theme

Next Steps​