Flynn Audio Bookly Booking Flow Fixes
Fixes and improvements to the WooCommerce + Bookly integration for [1], identified and resolved during the [2].
Overview
The booking flow had several compounding issues: a required field had gone missing from product pages, the intake form was appearing in the wrong context, calendar invites looked untrustworthy, and a UI bug made form fields invisible. Each issue was diagnosed live and assigned for resolution.
Issue 1: Missing Installation Method Selector
Problem
Product pages were broken for checkout. The "Installation Method" selector (DIY Install vs. Flynn Audio Install) had been removed from the product page UI, but the underlying WooCommerce requirement for the field remained. Customers clicking "Add to Cart" received a red validation error: "Installation method is a required field."
Root Cause
The selector was removed from the product page display without removing the corresponding field requirement — likely a partial update during a prior site change.
Fix
Re-add the "Installation Method" selector to the checkout page (rather than individual product pages). This keeps the product pages clean while still capturing the required information before payment.
Additional context: A note should appear on product pages clarifying that products are available for in-store pickup only (no shipping). Suggested copy: "Product is available for in-store pickup only."
Assigned To
Karly Oykhman
Issue 2: Intake Form Link in Wrong Location
Problem
The intake form link was placed on the generic WooCommerce "Thank You" page, which displays after any purchase — including customers who only bought parts for self-installation. This caused confusion: parts-only customers were being prompted to fill out an installation intake form irrelevant to their order.
Fix
- Remove the intake form link from the general Thank You page.
- Add the intake form link to the Bookly appointment confirmation email only, making it conditional to installation bookings.
- Format as a clear button/CTA, not a raw URL.
Sam Flynn will send the intake form link to Karly to embed in the confirmation email template.
Assigned To
- Karly Oykhman (implementation)
- Sam Flynn (send intake form link)
Issue 3: Calendar Invite UX
Problem
The Google Calendar invite link in the Bookly confirmation email rendered as a long, raw URL. Customers were hesitant to click it because it looked spammy or untrustworthy. Additionally, the calendar event lacked a store location and had an auto-generated title that didn't clearly identify the appointment.
Fix
- Link text: Replace the raw URL with a clear CTA, e.g., "Click here to add this appointment to your Google Calendar."
- Event title: Set to
Flynn Audio Appointmentfor all bookings. - Location: Add the store's physical address to the calendar event details.
Note on dynamic links: The Google Calendar link is unique per booking (auto-generated), so it cannot be replaced with a static button URL. The fix is to wrap the dynamic link in descriptive anchor text rather than displaying the raw URL.
Assigned To
Karly Oykhman
Issue 4: White-on-White Placeholder Text (UI Bug)
Problem
Placeholder text in the Bookly checkout form fields was rendering white on a white background, making fields appear empty and unlabeled. The text was confirmed present (visible when selected with Ctrl+A) but invisible under normal viewing conditions.
Fix
Change placeholder text color to black (or dark gray) in the checkout form CSS.
Assigned To
Karly Oykhman
Related Changes
Deposit-Inclusive Service Options
Rather than purchasing a $16/year plugin to handle deposits as add-ons, Sam Flynn will duplicate the existing Bookly service options and create parallel versions with deposits built into the price. This keeps the service list simple (currently 3 options) without adding plugin overhead.
Assigned To: Sam Flynn
Extra Checkbox Removal
An extraneous checkbox in the Bookly checkout flow was identified for removal.
Assigned To: Karly Oykhman
Email Flow Summary (Post-Fix)
After fixes are applied, a customer completing an installation booking should receive:
| Sender | Contents | |
|---|---|---|
| WooCommerce order confirmation | WooCommerce | Payment receipt, order details, billing info |
| Bookly appointment confirmation | Bookly | Appointment date/time, Bookly notes, intake form CTA button, Google Calendar link (with CTA text), store location |
The store also receives two internal notifications: one from Bookly (appointment details + notes) and one from WooCommerce (payment confirmation).
Related Articles
- [3]
- [4]
- [5]