WordPress Booking Plugin for Appointment – BookingPress

Documentation

Customize Frontend Shortcode Output with BookingPress

BookingPress provides a fully customizable front-end design so you can create an Appointment Booking form that suits your brand and WordPress theme.

It’s very easy to customize the look and feel by adjusting colors and fonts etc.

When you go to the BookingPress -> Customize section , you will get mainly 2 sections.

  1. Booking form – This section is used to customize the front-end step-by-step Booking Wizard.
  2. My Bookings – This is the front-end customer panel customization where customers can view their booked appointments.
  3. Field Settings – This section is used to customize the form which is used for customer details in the booking form.

Booking Form Customization

Here you will be able to see the styling panel, options panel, labels panel and the preview of the booking form.

From the styling panel, you can choose the Background color of the wizard, footer background, primary color ( which will be used everywhere as the main color of the booking form), title, subtitle and content colors. You will be able to add the custom CSS by clicking in the CSS button.

You can change the labels of the booking steps from the right panel.

You can navigate through the booking steps by clicking on steps names.

From the left panel, you can change different options :

  1. Hide Category & Service selection step: If you have just one category and one service and if you don’t want customers to show that selection step then enable this switch. In the front-end, the booking form will display the first step and Date and time selection.
  2. Hide already booked slots: Use this option if you don’t want to display already booked slots in the list at the front-end.
  3. Display service description: If you want to display service description below the service title at the frontend, just enable this option.
  4. Booking Wizard Tabs Position: This option allows you to determine wizard step position whether you want to display it at the left side or the top position of the form

Once you are done with all the changes, just click on the ‘Save Changes’ button from the top right corner and it will save all the changes.

customize bookings form design

Please take note that once you save the changes, it is highly recommended that you delete the website cache/browser cache on your page where you have placed the booking form shortcode to avoid any caching issues.

My Bookings

Unlike the booking form customization, you can customize the ‘my bookings’ design.

From the Styling panel, you can choose the background color, title color, content color and fonts etc. All styling otions are common for the Booking form and my bookings section.

From the left panel, you can change different settings like:

  1. Hide customer details: If you don’t want to display customer’s details on the bookings listing page, you can hide it from here.
  2. Hide search bar: If you do not want to allow your customers to search for the appointments they have booked, you can hide it from here.
  3. Allow users to cancel their appointment: If you want to allow your customers to cancel their booked appointments, you can allow it from here.
  4. Cancelled appointment redirection: This option allows you to set the page where you wan to redirect your customers after cancel their appointment.

customize bookings page design

Field Settings

From this section, you can manage the form fields. You can make them required/optional or change settings. You can change the labels and error messages etc from the field setting. Click on the “settings” icon from the right side of the field and it will open a popover with all options for that field.

Apart from changing field settings, you can rearrange them by clicking on the “three dots” icon from the top left corner of each field. bookingpress field settings

BookingPress Premium Give Away

BookingPress Premium Give Away!

Register today & get a chance to win BookingPress Premium which will be launched soon.