Elementor Pricing Table Switcher: Monthly & Yearly Plans Made Easy

Are you building a SaaS website, membership platform, or online service with Elementor? One of the biggest conversion killers is forcing users to manually calculate annual discounts or navigate between separate “Monthly” and “Yearly” pricing pages.

What you need is a pricing table with a built-in toggle — switch between monthly and yearly plans with a single click, and watch the prices update instantly.

Xpert Pricing Plan Switcher for Elementor solves this problem. It’s a dedicated Elementor widget that lets you create responsive pricing tables with separate configurations for monthly and yearly billing periods — all inside the Elementor editor.

In this guide, I’ll show you how to build professional pricing tables, highlight popular plans, and use check/cross icons for feature comparisons — plus a complete walkthrough of every control.

Why a Monthly/Yearly Pricing Switcher Matters

Consider this: 63% of SaaS companies offer both monthly and annual plans, and annual plans typically have 15-30% lower churn. But presenting both options clearly is difficult.

Most Elementor pricing widgets force you to:

• Create two separate tables (confusing for users)

• Show only one price and mention “billed annually” in small text

• Use a third-party pricing table plugin that doesn’t integrate with Elementor

Xpert Pricing Plan Switcher solves all three problems with a single, elegant toggle widget.

Requirements & Installation

Before we begin, ensure your setup meets these requirements:

• WordPress 6.0 or higher

• PHP 8.0 or higher

• Elementor 3.0 or higher (free version works perfectly)

• No Elementor Pro required — the widget works with free Elementor

How to Install (Once Live on WordPress.org)

1. Go to Plugins → Add New in your WordPress admin.

2. Search for “Xpert Pricing Plan Switcher” — or upload the ZIP file.

3. Click Install Now and then Activate.

4. Make sure Elementor is installed and activated.

That’s it. Now edit any page with Elementor — you’ll see a new category called “Xpert Pricing Plan Switcher” with one widget inside.

Complete Walkthrough: Building Your First Pricing Table

Let me walk you through the widget controls from top to bottom.

Step 1: Layout & General Settings

Step 2: Heading & Description

Add a Heading (e.g., “Simple, Transparent Pricing”) and Description (e.g., “No hidden fees. Cancel anytime.”) — both are optional and won’t render if left empty.

SEO tip: Use your heading to include the keyword “pricing plans” naturally.

Step 3: Configure the Switcher Toggle

• Monthly Switcher Label: “Monthly” (or “Monthly Billing”)

• Yearly Switcher Label: “Yearly” (or “Annual — Save 20%”)

• Default Active Action: Choose “Monthly” or “Yearly” as the default view

Conversion tip: Set “Yearly” as default if your annual plan is significantly cheaper — users see savings immediately.

Step 4: Currency Symbol

Set your currency — defaults to $ but accepts any symbol (€, £, ₹, or even text like “USD”).

Step 5: Add Pricing Plans (The Repeater Field)

This is the heart of the widget. Each plan has separate configurations for monthly and yearly.

For EACH plan, you configure:

Common Fields (appear on both billing modes):

• Plan Name: e.g., “Starter”, “Professional”, “Enterprise”

• Plan Icon: Choose from Elementor’s icon library

• Feature List: One feature per line (supports icheck and icross markers — more on this below)

Monthly-Specific Fields:

• Monthly Price: e.g., “29”

• Monthly Badge (optional): e.g., “Most Popular”

• Monthly Button Text & URL: e.g., “Get Started” → /pricing-starter

Yearly-Specific Fields:

• Yearly Price: e.g., “290” (typically 2 months free)

• Yearly Badge (optional): e.g., “Save 20%”

• Yearly Button Text & URL: You can use the same URL or a different checkout link

Important: If you leave button text OR URL empty, the button will not appear. Both must be filled.

Step 6: Style Everything

The widget includes extensive styling controls:

• Wrapper: Background, border, shadow, padding

• Pricing Item (individual card): Background, border radius, shadow, margin

• Heading & Description: Typography, color, spacing

• Switcher Button: Normal and active states, background, border, text color

• Badge: Background, text color, typography, position

• Pricing Head (plan name + price): Typography, alignment, background

• Feature List: Text color, icon color (check/cross), spacing

• Button: Normal and hover states, background, border, typography, padding

Plus per-plan custom styling — you can make the “Professional” card have a different background or button color without affecting other plans.

Advanced Features: Check & Cross Icons for Feature Lists

One of the most requested features for pricing tables is the ability to show what’s included (checkmark) vs. what’s not (cross mark) in each plan.

The Xpert Pricing Plan Switcher makes this dead simple:

Example feature list for a “Basic” plan:

icheck 5 projects
icheck 10GB storage
icross Priority support
icross Custom branding

Example for “Pro” plan:

icheck Unlimited projects
icheck 100GB storage
icheck Priority support
icross Custom branding

The icheck and icross markers are removed from the frontend — only the icons and text remain.

Pro Tip: Highlight a “Popular” Plan

To make one plan stand out:

1. In the Monthly section of your middle plan, set Monthly Badge Text to “Popular”

2. In the Yearly section of the same plan, set Yearly Badge Text to “Popular — Save 20%”

3. Under Per-Plan Custom Styling, give that specific card a different background color (e.g., #f9f9ff) and a subtle border

The badge will appear on both monthly and yearly views automatically.

Performance & Code Quality

As with all my plugins, Xpert Pricing Plan Switcher is built with performance in mind:

• ✅ Minimal footprint — only loads CSS/JS when the widget is actually used

• ✅ Admin toggle to disable frontend assets completely if you prefer to style everything via your theme

• ✅ Nonce verification on all settings saves

• ✅ Capability checks — only users with manage_options can access settings

• ✅ WPML configuration included — all widget fields are translatable

• ✅ Proper sanitization using wp_kses at basic and advanced levels

What This Plugin Does NOT Do (Important Limitations)

To be completely transparent:

• ❌ No payment processing — this is a frontend UI widget only

• ❌ No WooCommerce integration — it does not create products or checkout flows

• ❌ No automatic discount calculation — you manually enter yearly prices (e.g., $290for$29/month annual)

• ❌ No external API fetching — prices are static, entered in Elementor

• ❌ No Next.js support — this is a WordPress plugin

Why these limitations? This keeps the plugin lightweight, secure, and compatible with every WordPress hosting environment. For payment processing, pair it with WooCommerce, Easy Digital Downloads, or Stripe’s built-in checkout.