Bookly-WooCommerce Integration Pattern

Overview

When using Bookly for appointment booking on a WordPress/WooCommerce site, routing bookings through WooCommerce (rather than directly through a third-party payment processor like Square) can unlock a unified cart experience that combines products and services in a single checkout. This pattern emerged from work on the ^[1] website project, where a direct Bookly-to-Square integration proved fundamentally limited.

The Problem It Solves

Direct Bookly-to-Square Limitations

Connecting Bookly directly to Square via Zapier creates several hard blockers:

1. Card-on-file is impossible. Square requires a "card on file" checkpoint to finalize bookings. Bookly's Square integration only supports two payment modes: full prepayment or no payment at all. There is no mechanism to capture card details without charging the client immediately.

2. Split checkout experience. Square's payment UI opens as a popup or redirects to a separate tab, breaking the on-site booking experience and introducing brand-inconsistent UI that cannot be meaningfully customized.

3. Zapier fragility. Mapping Bookly service names to Square service IDs via Zapier is brittle. Services that are not marked as bookable online in Square will return no results, causing Zap failures. ID mismatches between what Zapier finds and what Square accepts are common.

4. No unified cart. Products (managed in WooCommerce) and services (booked through Bookly → Square) exist as entirely separate transactions. Clients cannot check out with both in a single cart.

Core Requirements This Pattern Addresses

• Single checkout cart containing both products and appointment bookings
• On-site booking experience — no redirects or popups to third-party domains
• Card capture without full prepayment — hold a card on file for a no-show policy without charging upfront

The Pattern

How It Works

Bookly has a native WooCommerce integration that, when enabled, routes appointment bookings into the WooCommerce cart rather than directly to a payment processor. This means:

1. A client selects a service in the Bookly widget and clicks "Book Now."
2. Instead of opening a Square payment popup, the booking is added to the WooCommerce cart as a line item.
3. The client can continue shopping, add physical products to the same cart, and check out once through WooCommerce's standard checkout flow.
4. WooCommerce handles payment processing (which can itself sync to Square via the WooCommerce Square plugin, preserving inventory and order management in Square).

Client → Bookly Widget → WooCommerce Cart ← Product Pages
                                ↓
                    WooCommerce Checkout
                                ↓
                    Square (via WooCommerce Square plugin)

Key Advantages

Known Constraints and Workarounds

Bookly Does Not Support Product Variations Natively

Bookly treats each service as a flat item. If a service has variations (e.g., "Vampire Facial — Face Only" vs. "Vampire Facial — Face & Neck"), Bookly cannot natively present these as selectable options within its widget.

Workaround: Build a custom service detail page per variant (or use URL parameters to pre-filter the Bookly widget to a specific service). When a client clicks "Book Now" on a specific variant page, the widget launches pre-scoped to that variant. This requires a page-per-variant architecture or custom JavaScript to pass the service selection into the Bookly widget on load.

This was prototyped on the La Marie Beauty Vampire Facial page, where variant tabs (Face, Face & Neck, etc.) each correspond to a distinct Bookly service, and clicking "Book Now" routes to the correct one.

WooCommerce Cart Display for Bookings

The default WooCommerce cart display for Bookly line items may not be visually polished out of the box. CSS customization of the cart and checkout pages is required to present appointment bookings in a brand-appropriate way alongside physical products.

Calendar Sync Still Required

Even with WooCommerce handling payment, Bookly still needs accurate staff availability data. Staff schedules must be configured in Bookly (and optionally synced via Google Calendar) to ensure the widget only offers genuinely available slots. Availability mismatches between Bookly and Square Appointments can cause booking failures if Square Appointments is still used as the source of truth for staff calendars.

Recommendation: Decide early whether Square Appointments or Bookly is the canonical calendar. Running both in parallel without a clear sync strategy leads to availability conflicts.

Implementation Checklist

• [ ] Enable WooCommerce integration within Bookly settings
• [ ] Confirm WooCommerce Square plugin is active and syncing products/orders to Square
• [ ] Disable direct Square payment within Bookly (prevent double-payment path)
• [ ] Configure WooCommerce checkout to accept card-on-file or deposit logic (via WooCommerce Deposits or similar plugin)
• [ ] Build variant-scoped service pages if services have sub-variations
• [ ] Configure staff schedules in Bookly; verify availability sync with Google Calendar if used
• [ ] Style WooCommerce cart and checkout to display appointment line items clearly
• [ ] Test end-to-end: add product + book service → single checkout → confirm order appears in Square

When to Consider This Pattern

Use this pattern when all three of the following are true:

1. The site already uses WooCommerce for product sales
2. Bookly is the chosen booking plugin
3. The client requires a unified cart (products + services) and/or on-site checkout without third-party redirects

If Bookly's UI customization limits are too restrictive for the client's aesthetic requirements even after CSS work, evaluate whether a more custom booking implementation (direct Square Appointments API + custom WooCommerce integration) is warranted. The Bookly-WooCommerce path is the lower-effort route; custom API work is the escape hatch if plugin constraints become blockers.

Related

• ^[2]
• ^[3]
• ^[4]
• ^[5]