WooCommerce Booking Flow Review — 2025-11-03
Overview
Internal + client-side review of the Bookly + WooCommerce booking flow on the La Marie Beauty staging site. Melissa (Asymmetric) demoed the integrated checkout experience; Kimberly (client-side PM) and Roxana (La Marie Beauty) provided feedback. The session surfaced UI issues, a critical credit card capture requirement, and a significant scope/budget misalignment that requires a direct conversation with Lisa before work continues.
Attendees:
- Melissa Cusumano — Asymmetric (lead, demo)
- Kimberly Gehrmann — client-side PM / solutions architect
- Roxana Lopez Tinajero — La Marie Beauty (operations)
Key Decisions
- $0 service pricing is the agreed approach for credit card capture: services are priced at $0 in WooCommerce so checkout requires a card on file without charging the service upfront. This mirrors the existing Square practice for variable-cost services (e.g., Botox).
- Roxana will receive direct WordPress access to upload images herself, replacing the current two-step process of organizing files in Google Drive for Melissa to upload.
- Image compare slider (before/after) is confirmed feasible — it is a native WordPress block ("image compare block"), not custom development.
- Staff filter must show only relevant providers for the selected service — the current behavior of showing all staff is a known bug to fix.
- Cart must separate services and products visually, matching the approved Miro board mockups.
Action Items
| Owner | Action |
|---|---|
| Melissa | Share Fathom recording with dev team (Eshock, Chris) to address booking flow issues |
| Melissa | Confirm with Chris whether Google Calendar integration is still needed |
| Melissa | Schedule a meeting with Lisa to review project status |
| Kimberly | Meet with Lisa to align on project scope, budget, and expectations before further work proceeds |
| Roxana | Gain WordPress access and begin uploading images directly |
| Roxana | Continue organizing service content in the shared spreadsheet |
Booking Flow Demo — Issues Identified
Melissa demonstrated the Bookly + WooCommerce integration on the staging site: a user books a service, then adds a retail product to the same WooCommerce cart and proceeds to checkout.
Problems Observed
Cart display — services and products not separated
The cart shows all items under a single "product" label. The Miro board mockup requires a clear visual separation between booked services and purchased products. Needs developer attention.
Staff filter shows all staff, not service-specific providers
When a service is selected, the staff dropdown should filter to only those who perform that service. Currently it shows everyone. For example, selecting "Vampire Facial" should show only Roxana and Samantha — not Chris.
UI/UX is not yet styled to match mockups
The booking modal tiles are misaligned (staff names of different lengths cause inconsistent tile widths). Font, spacing, and centering need work. Eshock needs to apply the Miro board design before this is shown to Lisa.
Loading time
The booking modal loads slowly. Flagged as a concern for production readiness.
What Is Working
- The Bookly → WooCommerce cart integration functions end-to-end.
- Product inventory sync between Square and WooCommerce is confirmed reliable (existing behavior, six months of operation).
- The overall flow — book service, add product, single checkout — is directionally correct.
Critical Requirement: Credit Card Capture Without Upfront Charge
The need: La Marie Beauty must capture a credit card at booking time to hold appointments and charge no-show fees. Services must not be charged upfront — payment happens in-person via Square.
The solution: Set all service prices to $0 in WooCommerce. WooCommerce checkout still requires a payment method, capturing the card on file, but processes a $0 transaction for the service line item.
Why this works:
- Mirrors the current Square workflow for variable-cost services (e.g., Botox, where the final price isn't known at booking).
- Avoids building a coupon/discount workaround, which was considered and rejected as fragile.
- No-show fees can then be charged against the saved card.
Open question: How does the WooCommerce-saved card interact with the Square customer profile? If a customer books via the Square Go app directly (bypassing the website), their card is in Square but not WooCommerce. New customers booking through the website for the first time are the primary use case for this capture requirement.
Related dependency: WooCommerce user accounts (login) are required for customers to manage subscriptions and for the no-show fee workflow to function reliably.
Scope & Budget Misalignment
What Happened
The original Bookly contract covered: booking plugin setup, staff configuration, and basic WooCommerce checkout integration. Since then, the following have been added without a formal scope change:
- Product variants (e.g., travel size vs. full size)
- WooCommerce Subscriptions for recurring product orders
- Full product/service page refresh and sitemap restructure
- Filtering functionality (services and products)
Some of this expansion originated from the initial discovery process, where requirements were not fully captured upfront. Kimberly noted this is a classic "hidden requirements" problem — things that were assumed to be included (variants, credit card capture) were never explicitly scoped.
Melissa acknowledged that Asymmetric has absorbed some of this work ("eating it"), but the scope has grown beyond what the Bookly budget covers.
Resolution Path
Kimberly will meet with Lisa to:
1. Clarify what Lisa believes is covered under the existing contract
2. Align on what the final delivered product looks like
3. Agree on any additional budget for out-of-scope work
This conversation should happen before significant additional development work is queued.
"Miscommunication and expectations and assumptions is where people start to get frustrated." — Kimberly
Content & Image Workflow
Current state: Roxana organizes images into labeled Google Drive folders → Melissa downloads and uploads to WordPress. This is inefficient because Roxana knows what each image is and labeling/organizing for handoff takes more time than direct upload would.
New workflow: Roxana gets WordPress access and uploads images directly. WordPress handles automatic compression, so high-resolution photographer files won't degrade site performance.
Caveat: WordPress auto-compression can occasionally over-compress. Worth spot-checking after bulk uploads.
Pending images: A recent photoshoot (trade arrangement with photographer) has not been fully delivered yet. Roxana is following up. This is blocking some service page image updates.
Product catalog status: Most products are represented on the site. Roxana maintains a color-coded spreadsheet:
- 🟢 Green = done/live
- ⬜ White = needs update
- 🔴 Red = in-store only, will not be listed online
- 🟣 Purple = TBD (awaiting Lisa's decision)
Before & After Photo Feature
Lisa has a long-standing request for an interactive before/after image slider on service pages.
Feasibility: Confirmed. WordPress includes a native "image compare block" — this is plug-and-play, not custom development. Two images are specified and a draggable slider reveals the comparison.
Proposed placement: Within the "Clinical Details" accordion section on each service page. A single comparison image per service is likely sufficient; additional before/afters can live in the top carousel.
Technical Notes
Google Calendar integration: Melissa flagged this as potentially no longer needed given the Bookly + Square setup. Needs confirmation from Chris before the next sprint.
Square as source of truth: Customers can still book directly via the Square Go app, bypassing the website entirely. This is an accepted limitation — the goal is to route new customers through the website. Existing customers with Square profiles and cards on file are handled through Square's existing flow.
Staging vs. production testing: Some integration behavior (e.g., whether a test booking actually appears in Square) is hard to verify on staging. A live QA session with real transactions (immediately refunded) is planned before launch.
Related
- [1]
- [2]
- [3]