How to Create a Hair Salon Website with WordPress
Table of Contents
Building a hair salon website with WordPress requires in general only two core things: an appointment booking plugin (the booking engine) and a template (design). Of course, if you have already dealt with the hosting and website installation parts.
It also might be the case that you don’t need to accept automated appointment bookings so that you can simply skip installing this functionality.
But it’s always more forward-looking to choose a solution with any sort of booking functionality already integrated since you never know when you might need one (or your clients ask you for a more user-friendly and easy way to order a hairstyle on the Internet!)
In this post, we’ll describe the average process of creating a hair salon website that accepts appointment reservations. For the purpose of this particular guide, we assume you have already installed WordPress and can get the idea of this guide.
If you haven’t decided on a design yet, you might want to browse themes from the most popular Themeforest market, it offers a huge collection of the best hair salon WordPress themes for different niches. I’m sure you’ll find a hairdressing salon layout to your liking there.
What WordPress themes do we recommend for a barbershop or hair salon website?
1. Bro Barbershop (Free) Download
This is a free hair salon WordPress theme for any beauty professional, with the free session scheduling plugin included.
2. Restline – Purchase
Made for salons and massage centers, this theme is perfect for any salon.
3. Curly – Purchase
A premium hair salon theme for professionals.
So in this particular post, we’ll be using the MotoPress appointment booking plugin for WordPress that will help you accept hourly reservations on WordPress with ease.
Since it works with all the top-used WordPress page builders, including the native block editor, Divi and Elementor, you can actually go with any WordPress theme and customize the plugin’s content with any builder.
This Appointment Booking plugin will help you manage your services, employees and bookings right from your website dashboard. It also suits the needs of multi-shop and multi-vendor salons so you must not experience any essential limitations using this solution.
So let’s get our hands dirty and dig into the settings!
Step 1. Install the plugin, set currency, appointment time frames, customize email notifications, and more
It’s better to start with some general settings you can find in the Settings menu (for all the detailed steps you’ll have docs and videos).
In this menu, you are free to choose the currency, booking confirmation modes (namely, who approves booking requests – you or a client), and default time slots for appointments. The latter means you can create various flexible appointment durations: 1h, 2h 10m, 45m, etc.
If you want to work with automated bookings, you’ll also need to edit your email notifications – there are many types associated with different types of actions, e.g. reserving, confirming or canceling an appointment.
To make these notifications fully automated, you can use special tags that get replaced with the actual client info.
Email notification example
There are two types of emails: for the site admins and, of course, customers. The latter can get emails with the received, on hold, confirmed, or canceled statuses.
Step 2. Add your salon staff
The MotoPress Appointment Booking plugin allows you to add any number of the staff members as well include their bios, contacts and other details.
On your hair salon website on WordPress, the list of staff members will appear in the booking wizard filters (the online booking form) and you can optionally build a dedicated page listing your staff.
The WordPress appointment plugin allows you to add the bio, skills, and photo of every employee via specific blocks – you can further display all this info in a structured way on your site.
Those blocks can also include social networks, skills or any other essential information your visitors might want to know about the staff before making a booking.
Step 3. Add salon locations
It’s probably the easiest part!
By locations you can add any categories – either individual salons or departments/rooms; it’s up to your real business needs.
There are several places where you can display locations on your site: in a booking wizard when clients choose a location or even put the entire list on a dedicated page.
Step 4. Schedule staff working hours
Here is where you can adjust the working schedule for each employee, assign the services they can perform and more.
Go through the menus to configure the following settings for each employee – choose the needed one from the list first and choose a major location for them.
Then customize a timetable by adding:
- Regular working hours
- Lunchtime and break durations
- If needed, set a different location for selected days
- Add custom days off
- Add custom working days
As you see, it won’t take you much time to set up the entire schedule and, by the way, this WordPress appointment plugin is super flexible so that you can bend the schedule to any direction when needed.
Step 5. Add salon website services
Services are the core thing your visitors will book on your salon website. Consider them as bookable slots.
In addition to services, you can also add service categories that will serve as extra filters in the booking widget allowing your customers to place an appointment quicker and easier (they work just as the shop filters for online stores). For example, hair salon websites can have filters for men & women & kids styling services. It’s easy with WooCommerce.
There are tons of settings that will help you customize your services:
- Price with a configurable currency
- Default duration
- Buffer times before and after the service (optional extra preparation time added to the service duration – it’s for your employees, not clients)
- A time period before booking globally for the service
- Assign staff members who are able to provide the service.
Assign service tags to ensure easier navigation for your hairdressing salon website.
Note that you can also customize the regular service price and duration based on the staff member who provides it.
The plugin also allows you to set a group capacity for an appointment so that you can allow a client to book a visit for several people at a time (the price can be set per group or per person). You can manage this via the ‘Capacity’ settings.
Step 6. Add a booking widget to your hair salon website
In the menu with the scary name ‘Shortcodes’, you can find a list of traditional WordPress shortcodes as well as user-friendly shortcode generators.
You need shortcodes if you want to display a specific sort of content on a page. The MotoPress Appointment plugin allows you to do that for the booking form widget, a list of employees, services, and more.
Let’s try to create the most essential part for those hair and nail salon websites that want to accept automated or confirmed bookings.
It’s very easy to create these shortcodes – you just need to tick boxes:
- Choose which form filters / fields to display/hide (you are required to leave the Service field only)
- Rename form fields if needed so that they better suit your hair salon website on WordPress
- Set services, staff members, etc. displayed by default
- Customize CSS or custom HTML if you want.
So how do you get a booking widget with that shortcode? Simply paste it via any preferable builder using the standard Shortcode block or widget. For example, let’s do it via Elementor:
Voila! Here is our booking widget for a hair salon WordPress website:
Your visitors will need to go through several easy steps to submit a booking. On the next step, they will be offered to pick a date and time for their appointment:
After that, a client must provide their personal and contact information, such as an email address, phone number, name, etc.
The text your client will see depends on the booking confirmation mode you set in the settings.
You can optionally enable online payments so that clients can pay you in advance to 100% secure a place for themselves. You are free to enable Stripe, PayPal and other gateways.
All bookings will go to your Bookings menu. It’s also very handy since you can preview all bookings in a list as well as open each one in particular. You can see and customize all of them, for example, edit a price or customer information. You can also update a status manually.
Step 7. Add other related content to your hair salon WordPress site
Thanks to those shortcodes we’ve already revised, websites for salons like yours can have extra pages, such as listings of services, staff members, etc. It’s up to you how to build them – you can use content from the plugin or create pages for hair saloon websites with your preferable WordPress builder.
Using handy shortcode generators, you can create the following pages:
- Create the team page:
You can customize it using the staff shortcode:
- Display categories and services
With shortcodes, you can list services, their prices & descriptions, and display photos of the staff. This would be enough information for hair styling websites of this kind. According to the default plugin settings, if there is just one staff member, the service will be displayed with the person’s name; for many employees people will see only a list of people.
Most likely a hair salon WordPress theme you’ll choose will come with many built-in components for displaying your works, services, pricing and more, so you just need to choose the right solution.
Conclusion: Build hairdressing salon websites with WordPress & Appointment engine
Starting a hair salon and customizing a hair salon website is a breeze with an appointment form for WordPress & a hair salon WordPress theme (for example, Lotus Spa by MotoPress) of your choice. You just need to go with the right set of tools and design which is easy to customize without any special technical knowledge. Just like many professional hairstylist websites, your site will feature your services, portfolios, and also allow clients to submit a booking online. Is it the change you are looking for in your beauty business?
Can the WordPress Appointment Booking plugin be used with any theme?
Can I create an appointment of any custom durations?
Can the appointment booking plugin be used for many salons?
it is very easy way for booking, payments. thank you for sharing this app. it is very useful to the customers.
Salon websites and apps are great for both businesses and their customers. It is so easy to book an appointment, make payment, give feedback, etc. I also love on-demand home service apps which provide services at home. My company develops these types of apps and some are running successfully.