Technical patterns and known issues when integrating the Bookly booking plugin with WooCommerce for businesses that sell both services and physical products. Derived from hands-on implementation work for [1].
Bookly can be connected to WooCommerce so that service bookings and product purchases share a single cart and checkout flow. This is attractive for businesses like medical spas where a client might book a facial and order a cleanser in the same session. The integration is functional but requires deliberate workarounds for several common requirements.
When Bookly is connected to WooCommerce, a completed booking is added to the WooCommerce cart as a line item. The customer can then add physical products before proceeding to a single checkout.
Out of the box, the WooCommerce cart labels all line items as "Product." There is no automatic separation of services vs. physical products in the cart UI.
Workaround options:
- Custom CSS/JS to relabel Bookly-generated cart items as "Service"
- A developer hook to inject a custom item type label on Bookly cart entries
- Accept the limitation if the client can tolerate a generic "Item" label
Reference: This was a flagged requirement during the La Marie Beauty booking flow review — the Miro board mockups showed a visually separated cart. Needs developer attention (Eshock/Chris).
Many service businesses (especially medical spas) need to:
1. Capture a credit card at booking time to hold the appointment
2. Charge a no-show or cancellation fee if the client doesn't show
3. Not charge the full service price at booking — payment happens in-person
This is standard practice in Square-based workflows (e.g., variable-cost services like Botox where the final price depends on units used).
Price all Bookly services at $0 within WooCommerce. This means:
- The booking flows through WooCommerce checkout normally
- WooCommerce still collects payment method details (required for a $0 order with a card-on-file plugin or gateway that supports authorization holds)
- No charge is processed for the service at checkout
- The card can be used later to charge a no-show fee
Why this works: It mirrors the existing Square workflow where services are booked without upfront payment. It also avoids the fragility of a coupon-based approach (e.g., auto-applying a 100% discount coupon), which introduces failure modes.
Caveat: Requires a WooCommerce payment gateway that supports saving a card for future use on a $0 transaction. Confirm gateway support before implementing.
If a client books via the Square Go app directly (bypassing the website entirely), their card may already be on file in Square. The $0 WooCommerce approach only captures cards for clients who book through the website. A process gap exists for clients who never touch WooCommerce — staff must verify card-on-file status in Square manually.
The Bookly booking modal includes a staff selector. By default, the dropdown or tile grid shows all staff members, regardless of whether they are configured to perform the selected service.
When a customer selects a service (e.g., "Vampire Facial"), the staff selector should filter to show only providers who perform that service.
Status: This was identified as a bug/misconfiguration during the La Marie Beauty demo. The fix requires verifying Bookly's staff-to-service assignment configuration and potentially a UI-level filter.
For physical product purchases, WooCommerce and Square maintain a bidirectional inventory sync. When a product is purchased through the WooCommerce storefront, Square inventory is decremented, and vice versa.
Confirmed working for the La Marie Beauty implementation over ~6 months of production use.
Clients can still book appointments directly through the Square Go app, bypassing the WooCommerce/Bookly flow entirely. These bookings appear in Square but do not create WooCommerce orders. This is an accepted limitation — the two systems are not fully unified for appointment data.
If the business offers recurring product subscriptions (e.g., monthly skincare refills via WooCommerce Subscriptions), customers need a WooCommerce account to:
- View and manage their subscription
- Update payment method
- Cancel or change frequency
This is a hard requirement for subscriptions — anonymous checkout is not viable.
A WooCommerce account also provides a persistent payment method that could be used for no-show fee charges, complementing the $0 service pricing pattern above.
WordPress automatically compresses uploaded images, preventing high-resolution photography from degrading page load times. This is safe to rely on for bulk image uploads from professional photo shoots.
Note: WordPress compression is not always lossless — review compressed output for quality on hero/feature images where fidelity matters.
Rather than having a non-developer organize images into labeled folders for a developer to upload, grant the content owner direct WordPress Media Library access. This is faster when the content owner knows which image belongs to which service/product and does not need to communicate that context to an intermediary.
WordPress includes a native Image Compare block (also called an "image compare slider") that renders an interactive before/after slider between two images. This is a plug-and-play block — no custom development required.
Use case: Service detail pages where the business wants to show treatment results.
Implementation: Add the Image Compare block to the service page template, specify the before and after images. No plugin required if using a block-based theme.
When implementing Bookly + WooCommerce for a service business, the following requirements are frequently undiscovered until mid-project and should be surfaced during initial scoping:
| Requirement | Why It's Missed |
|---|---|
| Credit card capture without upfront charge | Assumed Square handles it; WooCommerce implications not considered |
| Product variants (size, quantity tiers) | Seems simple; Bookly/WooCommerce variant handling is non-trivial |
| Staff filtering by service | Assumed default behavior; requires explicit configuration |
| Cart separation of services vs. products | Visual design assumes it; WooCommerce doesn't do it natively |
| WooCommerce login requirement for subscriptions | Subscriptions added late; account requirement not anticipated |
See also: [2] for the broader pattern of scope expansion on these projects.