Appointment Booking Calendar Blog

Creating great appointment booking forms using WordPress.

Blog / Displaying price below the date selection

Displaying price below the date selection

You can enable the option to display the appointment price below the date selection, letting know the user the cost before clicking the submit button.


To enable this option locate the setting field "Display price below the calendar" into the calendar settings page and set it to "Yes":

display price option

Price is calculated/loaded with an ajax call after selecting the time slot, so this is an user-friendly feature. When enabled, after the user selects the time-slot(s) the price will be displayed like in the following screenshot:

price displayed

While its default styles may be enough in most cases, you can also customize the way it looks by adding a CSS style like the following:

.abccost {
    color: red;
}

You can add the needed styles into the "Customization area >> Add Custom Styles" (at the bottom of the page that contains the list of calendars), the customization area contains a nice CSS editor to make the process easier:

css customization

Feedback about these features will be welcome, feel free to open a support ticket for any question.