Settings → Style
Make the booking form match your brand. Choose a layout, a choice-display style, and which elements to show.
Where to find it
Advik Booking → Settings → Style Tab.
Layout
| Option | Effect |
|---|---|
| Multi-step (default) | The customer walks through 7 steps with a progress indicator. Best for long forms with conditional logic. |
| Single page | All steps render on one page with section headings. Best for short forms (1–3 steps). |
Choice display style
| Option | Best for |
|---|---|
| Card grid (default) | Categories, services, add-ons with images. Big tap targets, mobile-friendly. |
| Radio list | Compact forms, services without images. |
Add-on display style
| Option | Best for |
|---|---|
| Card grid | Add-ons with images, retail-like experience. |
| Checklist | Compact add-on lists, professional services. |
Show / hide
| Toggle | Effect when on |
|---|---|
| Show item prices | The customer sees the running price on every field change. |
| Show duration | The estimated duration is shown next to each service and in the price summary. |
| Show staff selector | A "Choose your staff" step appears after the service. Off = always "Any available". |
Styling mode
| Mode | Effect |
|---|---|
| Plugin (default) | Advik Booking renders its own CSS. Buttons, inputs, calendar — all styled consistently regardless of your theme. |
| Theme | Advik Booking defers to your active WordPress theme's CSS. Useful when you've heavily customised your theme and want the booking form to blend in. |
Theme mode can break things
Some themes have aggressive CSS that hides form labels or breaks the calendar layout. If the form looks wrong after switching to Theme mode, switch back and add a few lines of custom CSS in your theme instead.Branding Color
New in v2.6.0 — pick your brand color
You can now set a single Primary Color that instantly recolours the booking form's buttons, active steps, highlights, and call-to- action elements. This is the most important branding setting for any business — the colour customers see most often, and the one that anchors your booking experience to your own brand identity.Set it under Advik Booking → Settings → Style → Branding Color (also reachable from the Style tab).
| Field | What it controls | Where it appears |
|---|---|---|
| Primary Color | The main brand color used for the "Book Now" button, the active step in the progress indicator, selected cards, and other interactive highlights. | Booking form buttons, active step indicator, selected cards, calendar today highlight. |
| Text on Primary | The text colour used on top of the Primary Color (e.g. button labels). Pick a colour with enough contrast so text stays readable. | Button labels, headings on coloured backgrounds. |
Both fields accept a hex code (e.g. #2563eb) and the visual color picker is kept in sync with the hex field — pick from the swatch or type the code, either way the other updates instantly.
Custom CSS
Add a small block of CSS to override any color, font, or spacing. The CSS is scoped to the booking form, so it won't leak into the rest of your site.
Custom JS
For advanced customisations (custom validation, third-party widgets, analytics events), add a small JavaScript snippet. The plugin fires events you can hook into.