LaMarie Checkout Cart UI/UX Refinements

Overview

During the LaMarie checkout flow review, the team identified several visual and structural improvements needed for the WooCommerce cart and checkout pages. The cart currently mixes Bookly service line items and WooCommerce product line items without clear visual separation, creating confusion for customers. These refinements are part of the broader ^[1] project to implement a ^[2].

Problem

The cart displays services and products in a flat, undifferentiated list. Because the split-payment logic charges only for products at checkout while deferring service payment, customers need clear visual cues distinguishing what they are paying for now versus what is being saved for later.

Agreed Refinements

1. Section Headers

Add explicit headers to separate the two item types within the cart:

• "Services" — displayed above Bookly appointment line items
• "Products" — displayed above WooCommerce product line items

This mirrors familiar e-commerce patterns (e.g., Amazon's grouped cart) and reinforces the split-payment logic to the customer.

2. Item Sort Order

Items should be sorted so that Services appear first, Products second. This prioritises the appointment context — the primary reason a customer is on the site — and groups the deferred-payment items at the top where they are most visible.

3. Implementation Location

Isahaque confirmed the changes are achievable via the theme's functions.php file, consistent with the approach used for the split-payment logic itself. No additional plugins are required.

Related UI Work

These cart refinements were discussed alongside broader booking widget improvements. See ^[3] for:

• Staff filter scoped to the selected service
• "All Services" link returning the tile grid view
• Standardised staff tile styling (centred names, no background images)

Product Subscription Option (Pending)

A separate idea surfaced during the same session: adding a "One-time vs. Subscribe" toggle on product pages, similar to Amazon's subscribe-and-save pattern. This would appear on the product detail page rather than in the cart itself.

Status: Melissa will confirm this requirement with the client (Kimberly/Roxanna) before any implementation begins.

Action Items

Source

Discussed in the LaMarie touch-base meeting on 2025-11-06. See also ^[4].