SalonKit — Booking System for WordPress + Elementor

Version: 2.0.0
Requires: WordPress 5.8+, PHP 7.4+, Elementor 3.24+
License: GPL v2 or later
Author: MD Nizam Uddin

---

Table of Contents

1. What is SalonKit?
2. Features
3. Installation
4. Quick Start
5. Creating Services
6. Creating Professionals
7. Assigning Professionals to Services
8. Setting Weekly Schedules
9. Displaying the Booking Form
   • Method 1: Elementor Widget (Recommended)
   • Method 2: Shortcode
10. Customizing Everything via Elementor
    • Text Labels
    • Visibility (Show / Hide)
    • Icons
    • Colors
    • Typography
    • Layout & Spacing
11. Services Grid Widget
12. Managing Bookings
13. Shortcode Reference
14. Developer Docs
    • File Structure
    • CSS Custom Properties
    • JavaScript API
    • Hooks & Filters
    • Data Attributes Reference
15. Frequently Asked Questions
16. Troubleshooting
17. Changelog

---

What is SalonKit?

SalonKit is a complete salon appointment booking system for WordPress. It allows your customers to book services through a beautiful 5-step wizard directly on your site.

The booking flow:

1. Service — Customer picks a service (e.g. Haircut, Massage, Manicure)
2. Professional — Customer picks which staff member they want
3. Date — Customer picks a date from an interactive calendar
4. Time — Customer picks an available time slot
5. Details — Customer enters name, email, phone & notes → Confirms

---

Features

Core Features

• 5-step booking wizard — Clean, modern, mobile-friendly
• Services management — Add services with price, duration, and slot quantity
• Professionals management — Add team members with photos, bios
• Weekly schedules — Set working hours per professional (including lunch breaks)
• Smart time slots — Auto-generated based on service duration & professional schedule
• Overbooking prevention — MySQL transaction locking prevents double-booking
• Email confirmations — Automatic email sent to customer on booking
• Custom database table — Fast queries, no bloat on WordPress posts table

Customization Features (Elementor)

• Edit every text — All labels, buttons, placeholders, messages are editable
• Show/hide anything — Toggle visibility of every element (steps, fields, images, prices)
• Full color control — 30+ color settings mapped to brand colors
• Typography control — 16 typography levels with full Google Fonts support
• Layout control — Spacing, padding, border radius, shadows for every component
• Icon picker — Choose from 22 custom SalonKit icons or any FontAwesome icon
• Per-widget styling — Each form instance can have its own colors & settings
• Brand colors auto-selected — Pulls from Elementor Global Colors if set

Design Features

• Modern indigo palette — Clean, trust-building, unisex design
• Fully responsive — 4 breakpoints (desktop, tablet, phone, tiny phone)
• Skeleton loaders — Animated loading states instead of text
• Micro-interactions — Smooth transitions, hover effects, focus states
• Keyboard accessible — Full keyboard navigation (Tab, Enter, Escape)
• Reduced motion support — Respects prefers-reduced-motion
• 40px+ touch targets — Mobile-friendly tap areas

---

Installation

1. Download the plugin zip file
2. WordPress Admin → Plugins → Add New → Upload Plugin
3. Choose the zip file and click Install Now
4. Click Activate
5. The plugin will automatically:
   • Create 3 Custom Post Types: Services, Professionals, Bookings
   • Create a custom database table for bookings
   • Register 2 Elementor widgets
   • Register the [salon_booking] shortcode

---

Quick Start

1. Go to SalonKit → Services → Add Service → Create "Haircut" ($45, 45 min)
2. Go to SalonKit → Professionals → Add Professional → Create "Jane"
3. Go back to Services → Edit "Haircut" → Check "Jane" under Assign Professionals
4. Go to Professionals → Edit "Jane" → Set her Weekly Schedule
5. Edit a page with Elementor → Search for "Salon Booking Form" widget
6. Publish — you're done!

---

Creating Services

Navigate to SalonKit → Services in the WordPress admin menu.

Service Fields

Field	Description	Example
Title	Service name displayed to customers	"Classic Haircut"
Description	Short description (excerpt)	"Includes wash, cut & style"
Featured Image	Thumbnail shown on service cards	300×300 px recommended
Price ($)	Dollar amount	45.00
Duration (minutes)	How long the service takes	45
Slot Quantity	Max clients per time slot	2 (means 2 people can book the same slot)

Tip: Slot Quantity of 2+ allows parties/couples to book together at the same time.

---

Creating Professionals

Navigate to SalonKit → Professionals (under Services).

Professional Fields

Field	Description
Title	Professional's display name
Description	Full bio shown in admin
Excerpt	Short bio shown on the booking card
Featured Image	Profile photo (square recommended, 300×300 px)

---

Assigning Professionals to Services

Professionals must be assigned to services, otherwise no one will appear for that service.

Method A: From the Service

1. Edit a Service
2. In the "Assign Professionals" meta box (right sidebar), check the professionals who offer this service
3. Update/Save

Method B: From the Professional

1. Edit a Professional
2. In the "Assigned Services" meta box (right sidebar), check the services they offer
3. Update/Save

The assignments are bi-directional — updating from either side syncs automatically.

---

Setting Weekly Schedules

Each professional needs a weekly schedule so the system knows when to generate time slots.

1. Edit a Professional
2. Scroll to the "Weekly Schedule" meta box
3. For each day of the week:
   • Check "Works?" to mark as a working day
   • Set Start and End time (e.g. 09:00 — 17:00)
   • Optionally set Lunch Start and Lunch End for a break (e.g. 12:00 — 13:00)
4. Update/Save

Note: Sundays are disabled by default in the booking calendar (can be changed via customization).

---

Displaying the Booking Form

Method 1: Elementor Widget (Recommended)

1. Edit a page/post with Elementor
2. Search for "Salon Booking Form" in the widget panel
3. Drag it onto your page
4. All settings are available in the Elementor panel under:
   • Content → Text Labels — Edit any text
   • Content → Visibility — Show/hide elements
   • Content → Icons — Choose icons
   • Style → Colors — 30+ color controls
   • Style → Typography — 16 font controls
   • Style → Layout & Spacing — Sizing & padding

Method 2: Shortcode

[salon_booking]

Place this shortcode on any page or post. The form will render with default settings.

Shortcode Tip: You cannot override individual text/color values via shortcode attributes. For customization, use the Elementor widget.

---

Customizing Everything via Elementor

When you select the Salon Booking Form widget in Elementor, you'll find these sections in the panel:

Text Labels

Every single text string is editable:

Section	Controls
Step Titles	Panel headings for all 5 steps
Button Labels	Next, Back, Submit, Book Again
Step Labels	The small labels above step numbers
Summary Defaults	"No service selected" etc.
Form Fields	Labels & placeholders for name, email, phone, notes
Booking Summary Labels	Service, Professional, Date, Time, Price
Messages	Loading, empty, error, submitting, slot status

Visibility (Show / Hide)

Toggle every major element:

• Step Indicator (the numbered circles)
• Summary Bar
• Individual steps (1–5)
• Success screen
• Form fields (name, email, phone, notes)
• Price, duration, description, images on service cards
• Professional photos
• Remaining slot count
• Booking summary box on step 5
• Name/email required toggle

Icons

Choose custom icons for:

• Summary bar items (service, professional, date, time)
• Navigation arrows (back, next)
• Calendar navigation
• Success checkmark

Uses the SalonKit icon set by default. Change to any FontAwesome icon.

Colors

30+ color controls organized by function:

Group	Controls
Primary	Primary, Hover, Light, Accent, Accent Soft
Surface	Form Background, Card Background, Card Border
Text	Body Text, Muted Text, Field Label
Cards	Card Active Background, Card Active Text
Inputs	Input Background, Input Border, Input Focus Border
Buttons	Primary Button (bg, text, hover), Back Button (bg, text, hover)
Calendar	Today Border, Step Done Background
States	Success Icon, Error Text, Slot Full
Effects	Shadow Color, Summary Background

Pro Tip: If you've set Elementor Global Colors, those values auto-populate as defaults. Override per-widget as needed.

Typography

Full typography control for every text level using Elementor's Group_Control_Typography:

Control	Applies To
Panel Title	Step headings
Step Label	Labels above number circles
Step Number	The circled numbers (1–5)
Service Name	Service card titles
Service Price	Price display
Service Description	Description text
Professional Name	Professional card names
Professional Bio	Short biography
Summary Text	Summary bar items
Field Label	Form input labels
Field Input	Input & textarea text
Button Text	All buttons
Success Title	"You're all booked!"
Calendar Month	Month/year label
Time Slot	Time display in grid

Each control includes: Font Family, Size, Weight, Transform, Style, Decoration, Line Height, Letter Spacing.

Fonts are loaded from Google Fonts automatically. You can select any Google Font.

Layout & Spacing

Control	Description
Form Max Width	Overall form container width
Form Padding	Inner spacing of form
Form Border Radius	How rounded the form corners are
Form Border Width	Form outline thickness
Form Shadow	Box shadow preset (none/sm/md/lg/xl)
Card Grid Gap	Spacing between cards
Card Padding	Inner spacing of cards
Card Border Radius	Card corner roundness
Card Border Width	Card outline thickness
Card Hover Shadow	Shadow on hover (none/sm/md/lg)
Button Height	Vertical size of buttons
Button Border Radius	Button corner roundness
Button Padding	Button inner spacing
Input Height	Text field vertical size
Input Border Radius	Input corner roundness
Summary Padding	Summary bar inner spacing
Step Circle Size	Diameter of step number circles

All size controls are responsive-aware — set different values for desktop, tablet, and mobile.

---

Services Grid Widget

A second widget — Salon Services Grid — displays your services in a card grid layout (great for service pages).

Content Controls

Control	Description
Columns	1–4 columns
Mobile Columns	Override for phone screens
Show Price	Toggle price display
Show Duration	Toggle duration display
Show Description	Toggle description text
Show Image	Toggle featured image
Max Services	Limit number shown (-1 = all)
Order By	Title, Date, Random, Menu Order
Order Direction	Ascending/Descending

Style Controls

Section	Controls
Card Style	Background, Border color/width, Border radius, Shadow preset, Hover effect, Image height/fit
Typography	Name (font + color), Description (font + color), Price (font + color), Duration (font + color)
Layout & Spacing	Grid gap, Body padding, Footer padding

---

Managing Bookings

Viewing Bookings

Navigate to SalonKit → Bookings (under Services). You'll see a table with:

• Booking ID
• Client name & email
• Service name
• Professional name
• Date & time
• Price & status

Dashboard Widget

A "Today's Bookings" widget appears on the WordPress Dashboard showing all confirmed appointments for the current day.

Booking Storage

Bookings are stored in two places:

1. Custom database table (wp_salon_bookings) — used for slot availability queries
2. Custom post type (salon_booking) — used for admin display & management

---

Shortcode Reference

[salon_booking]

• No attributes currently supported — all customization goes through the Elementor widget
• Outputs the full booking form with default styles & settings
• Enqueues CSS & JS automatically

---

Developer Docs