ReCurr Plus Tutorial Series — Part 1: Billing Cycle Toggle

ReCurr Plus feature — Requires an active ReCurr Plus licence (RECPLUS-XXXX-XXXX-XXXX-XXXX).

The Billing Cycle Toggle lets customers choose between monthly and annual billing directly on the product page — without needing two separate products. When enabled, a toggle switch appears on the product page and customers see the price update in real time as they switch between cycles.

---

Before You Begin

• ReCurr Plus is installed and your Plus licence key is active
• You have at least one subscription product created (see Tutorial 2: Creating Subscription Products)

---

Step 1: Open the Product for Editing

1. Go to Products > All Products
2. Click Edit on the subscription product you want to add the cycle toggle to

---

Step 2: Enable the Cycle Toggle

In the General tab of the Product data section, scroll to the Billing Cycle Toggle section:

1. Tick Enable Billing Cycle Toggle — “Allow customers to switch between billing cycles on the product page”
2. Additional fields will appear for configuring the available cycles

Screenshot 1: The Billing Cycle Toggle section with the enable checkbox.

---

Step 3: Select Available Cycles

Choose which billing cycles customers can toggle between. You can enable any combination of:

Cycle	Description
Monthly	Billed every month at the base price
Quarterly	Billed every 3 months (optional discount applies)
Annual	Billed every 12 months (optional discount applies)

At least two cycles must be selected for the toggle to appear.

Screenshot 2: Available cycles checkboxes with Monthly and Annual both ticked.

---

Step 4: Configure Cycle Discounts (Optional)

For each enabled cycle (other than Monthly), you can offer a discount:

Quarterly Discount

1. Tick Enable Quarterly Discount
2. Select Discount Type: Percentage (%) or Fixed Amount (R)
3. Enter the Discount Value

Annual Discount

1. Tick Enable Annual Discount
2. Select Discount Type: Percentage (%) or Fixed Amount (R)
3. Enter the Discount Value

Screenshot 3: Quarterly and Annual discount fields configured with example values.

Screenshot 4: The live discount preview box showing the pricing breakdown for each enabled cycle.

---

Step 5: Publish the Product

Click Update to save your changes.

---

Step 6: Verify on the Frontend

Visit the product page on your store frontend:

• A toggle switch should appear between the product title and the Add to Cart button
• Clicking the toggle should switch between cycles and update the displayed price
• Any configured discount savings should be shown (e.g., “Save R538.20/year”)

Screenshot 5: Product page showing the cycle toggle in Monthly position.

Screenshot 6: Product page after switching to Annual — updated price and savings displayed.

---

How It Works for Customers

1. Customer visits the product page — toggle defaults to Monthly
2. Customer clicks the toggle to switch to Annual
3. Price updates in real time — no page reload
4. Customer clicks Add to Cart — the selected cycle is recorded
5. At checkout the correct billing amount and period is applied
6. After purchase, the subscription is created with the chosen cycle

---

Important Notes

• One product, multiple cycles — No need to create separate monthly and annual products. The cycle toggle handles both from a single product.
• Shop loop price — The product listing in the shop always shows the monthly base price, regardless of toggle state. The toggle only appears on the individual product page.
• Pro-rata applies to monthly — If a customer selects Monthly and signs up mid-month, pro-rata billing applies when your store’s Pro-rata billing (monthly) setting is On (the default). With it Off (anniversary billing), the full monthly price is charged on signup instead. See Tutorial 8 → General Tab (v2.4.30).
• Annual and Quarterly are full upfront payments — The customer pays the full annual or quarterly amount in one transaction.
• Simple products only (v2.8.0) — The toggle is not available on a variable product: a variable product offers its billing cycles as variations, each with its own billing period. If the toggle is on when a product becomes variable, saving turns it off and says why. See Plus Tutorial 7: Variable Subscription Products, Example 2.

---

What’s Next?

Up next: Plus Tutorial 2: Flexible Trials — Offering 7, 14, 21, or 28-day free trial periods.

---

Quick Checklist

• [ ] Billing Cycle Toggle enabled on the product
• [ ] At least two cycles selected
• [ ] Discounts configured (if applicable)
• [ ] Discount preview reviewed
• [ ] Product updated
• [ ] Frontend toggle verified — price updates correctly on switch

---

This is Part 1 of the ReCurr Plus Tutorial Series.

Tutorial	Topic
Plus 1. Billing Cycle Toggle	Monthly/annual toggle on one product (you are here)
Plus 2. Flexible Trials	7/14/21/28-day trial options
Plus 3. Quarterly Discounts	Configuring quarterly pricing and discounts
Plus 4. Plan Switching	Plan groups, customer upgrades and downgrades
Plus 5. Cancellation, Refund & Retention	Pro-rata refunds on cancel + retention save flow
Plus 6. Pause & Resume	Freeze a subscription and resume later
Plus 7. Variable Subscription Products	Sizes, plans and buy-once-or-subscribe as subscription options
Plus 8. Troubleshooting Variable Subscriptions	Every message, what causes it, where to look