---
title: Bookly Service Variants — Implementation Pattern
type: article
created: '2026-04-05'
updated: '2026-04-05'
source_docs:
- raw/2025-10-15-la-marie-connect-service-page-tabs-94306503.md
tags:
- bookly
- wordpress
- woocommerce
- booking
- service-pages
- variants
- pattern
layer: 2
client_source: null
industry_context: null
transferable: true
---

# Bookly Service Variants — Implementation Pattern

## Overview

Bookly does not natively support service variations (e.g., a single "Neurotoxins" service with selectable sub-types like Lip Fill, First Time Tox, etc.). However, a workable pattern exists: **treat each variant as a separate Bookly service on the backend, while presenting a unified, dynamic interface on the frontend.**

This pattern was identified and validated during work on [[clients/la-marie-connect/index|La Marie Connect]] service pages.

---

## The Problem

Clients often want a single parent service page (e.g., "Vampire Facial") with selectable variants that each have:
- Distinct descriptions, images, and pricing
- Their own booking flow

Bookly's data model has no concept of service variations — each bookable item must be its own service entry.

---

## The Solution

### Backend (Bookly)
- Create a **separate Bookly service** for each variant (e.g., "Vampire Facial — Standard", "Vampire Facial — PRP Add-on").
- Each service has its own booking URL / embedded flow.

### Frontend (WordPress / Elementor)
- Build a **single parent page** for the service category.
- Use tabs, a dropdown, or button selectors to let the user choose a variant.
- On variant selection, **dynamically swap** the visible content block (description, images, pricing, FAQs) to match the chosen variant.
- The **"Book Now" button URL updates** to point to the corresponding Bookly service flow for the selected variant.

The user experience feels like a unified product page with variants; the booking backend remains a flat list of individual services.

---

## Implementation Notes

- The page content swap on variant selection can be handled via:
  - CSS show/hide toggling (simplest, no JS required beyond Elementor interactions)
  - JavaScript/jQuery to update visible sections and button `href`
  - Elementor Pro conditions or custom tabs widget
- There is no need to involve Bookly's API for the variant switch — the "integration" is simply pointing the CTA button at the correct pre-configured Bookly service URL.
- The number of Bookly services will grow proportionally with the number of variants across all parent pages. This is expected and acceptable.

---

## Validation

A test case was assigned to Ishaq using the **Vampire Facial** service page for La Marie Connect. This was chosen as a simpler starting point (fewer variants) before applying the pattern to more complex pages like Neurotoxins / ToxJuvo.

> *"We can do this for a single page... but Bookly doesn't have the variation [natively]."*
> — Ishaq, confirming the workaround is feasible

---

## Related Patterns & Considerations

- **Homepage "Book Now" interim state:** While the full variant system is being built out, the client (La Marie Connect) requested the homepage "Book Now" button redirect to their Square page listing all products. This is a temporary measure. See [[clients/la-marie-connect/index|La Marie Connect]].
- **Booking button filtering:** An existing filtering system on service pages (set up by Ishaq) was reviewed and confirmed to remain in place — no changes needed to the per-service booking button URLs.
- **Zapier integration:** Separate from the variant pattern, Zapier automation issues were ongoing at the time of this meeting. See [[clients/la-marie-connect/index|La Marie Connect]] for status.

---

## Action Items (from originating meeting)

| Owner | Task |
|-------|------|
| Ishaq | Build Vampire Facial test case implementing this pattern |
| Melissa | Update ClickUp task with variant implementation details and attach client's design document |
| Melissa | Confirm with client whether homepage "Book Now" should redirect to Square product listing |

---

## See Also

- [[clients/la-marie-connect/index|La Marie Connect — Client Index]]
- [[knowledge/woocommerce/bookly-overview|Bookly Overview]] *(if exists)*