Back to Plugin Settings Guides

This guide applies to:

  • Basic Edition
  • Plus Edition
  • Pro Edition
  • Business Edition

Introduction

Copy these CSS snippets to help with hiding headers, text and icons. Find other ways to customize the Booking Calendar in the Style with CSS Snippets guide.

Make sure to add the CSS in SSA Settings > Styles > Custom CSS field. If you’d like to learn more see our guide on adding custom CSS to Simply Schedule Appointments.


“What type of appointment are you booking?” Header

Header above the list of Appointment Type

This header appears at the beginning of the Booking Calendar flow if you have multiple Appointment Type to choose from. Use this CSS to hide the header:

/* Hide the 'What type of appointment are you booking?' header */
.book-type .md-title.ssa-type-header {
display: none;
}

Appointment Duration

By default, the Appointment Duration displays under the Appointment Type name and on the Booking Confirmation Screen.

appointment duration shown under appointment type name
Appointment Duration shown under the Appointment Name

Use this CSS to hide the Appointment Duration on the Booking Calendar:

/* Hide the Appointment Duration */
body .appointment-duration {
display: none;
}
Appointment duration removed
Appointment Duration hidden

This CSS doesn’t affect Notification messages. Use the Notification Settings to remove the Appointment Duration from the notifications..

Hide Dash Next to Payment Amount

If you have Payments enabled and have hidden the Appointment duration, your Booking Calendar will look like this:

dash before the payment amount and appointment duration hidden

To get rid of the dash before the payment amount, add this CSS:

/* Hide the dash next to payment amount (used when you're hiding the appointment duration) */
body .divider {
display: none;
}

Appointment Start and End Time

If you’re hiding the Appointment Duration, you may also need to hide the Start and End Time of the appointment on the Booking Form and Confirmation Screen.

start time and end time on booking form

Use this CSS to remove the Start and End Times components- You could also use each individually to only remove Start or End Time.

The Whole Shebang: Start Time + Divider + End Time + Timezone

/* Hide the time slot information on the confirmation and booking form screens */
body .confirm .md-subhead {
display: none;
}

Start Time: Date + Time

/* Hide the start date and time on the confirmation and booking form screens */
body .confirm .appointment-start-time {
display: none;
}

Start Time: Date Only

/* Hide the start date on the confirmation and booking form screens */
body .confirm .appointment-start-d {
display: none;
}

Start Time: Time Only

/* Hide the start time on the confirmation and booking form screens */
body .confirm .appointment-start-t {
display: none;
}

End Time

/* Hide the end time on the confirmation and booking form screens */
body .appointment-end-time {
display: none;
}

Start and End Divider

/* Hide the time divider on the confirmation and booking form screens */
body .appointment-end-time {
display: none;
}

Timezone Only

/* Hide the timezone info on the confirmation and booking form screens */
body .appointment-end-time {
display: none;
}

This CSS doesn’t affect Notification messages. Use the Notification Settings to remove the Start and End time from the notifications..


“What would you like to do next?” on Confirmation Screen

Confirmation screen with all the buttons included

Use this CSS to hide this heading on the confirmation screen:

/* Hide the 'What would you like to do next?' header on the confirmation screen */
.confirm .appointment-actions .md-subheading { 
display: none; 
}

Time Categories

Each time slot in the booking calendar get categorized into one of four sections pertaining to the time of day: Night, Morning, Afternoon and Evening.

How the time categories look like by default

Category Subheadings

Use this CSS to hide those subheadings:

/* Hide the Night, Morning, Afternoon, and Evening subheadings */
.time-select .md-column-center .md-subheading {
    display: none;
}

If you’d like to change what the subheadings say instead, follow this our ‘Change Phrasing’ guide.

Icons

To remove the icons, use this CSS:

/* Hide the Night, Morning, Afternoon, and Evening icons */
.time-select .time-listing-icons {
  display:none;
}

Field Icons in the Booking Form

Fields with their icons on the left

Each field on the booking form displays an icon on the left side. Use this CSS to hide the icons on the booking form:

/* Hide the icons for the fields in the booking form screen */
body .md-input-container .md-icon,
fieldset i.md-icon {
display: none;
}

body .md-input-container .md-icon:not(.md-icon-delete)~label {
left: 0;
}

body .md-input-container .md-icon:not(.md-icon-delete)~.md-input {
margin-left: 0;
}
/* --------------------------------------------------------- */

Still stuck?

File a support ticket with our five-star support team to get more help.

File a ticket

  • Please provide any information that will be helpful in helping you get your issue fixed. What have you tried already? What results did you expect? What did you get instead?
  • This field is for validation purposes and should be left unchanged.


Related Guides