Back to Booking Forms Guides

Hiding Buttons and Links

This guide applies to:

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

Introduction

Copy these CSS snippets to help with hiding buttons. 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.

Action Buttons on the Cancel/Reschedule Screen

Appointment Confirmation screen depicting the Edit Information, Reschedule, and Cancel Appointment buttons.
Appointment Actions on the Cancel/Reschedule Screen

The default notification message includes a link to Cancel/Reschedule the booked appointment. When customers click that link, they can see a couple of action buttons to edit their appointment.

All Buttons

To hide ALL the buttons on the cancel/reschedule screen, such as Save to Calendar, Edit Information, Reschedule, Cancel Appointment, and Schedule a New Appointment to use the following CSS.

Old Booking App
/* Hide the 'edit information', and 'reschedule' and 'cancel appointment' buttons on cancellation screen */
.md-card-actions.cancellation-actions { 
display: none; 
}
New Booking App
/* Hide the 'edit information', and 'reschedule' and 'cancel appointment' buttons on cancellation screen */
.mdc-card__actions.cancellation-actions {
display: none;
}

Edit Information Only

Old Booking App
/* Hide the 'edit information' button on cancellation screen */
.md-card-actions.cancellation-actions .appointment-edit-button { 
display: none; 
}
New Booking App
/* Hide the 'edit information' button on cancellation screen */
.change.cust-info .cancellation-actions .appointment-edit-button {
display: none;
}

Reschedule Only

Old Booking App
/* Hide the 'reschedule' button on cancellation screen */
.md-card-actions.cancellation-actions .appointment-reschedule-button { 
display: none; 
}
New Booking App
/* Hide the 'reschedule' button on cancellation screen */
.change.cust-info .cancellation-actions .appointment-reschedule-button {
display: none;
}

Cancel Appointment Only

Old Booking App
/* Hide the 'cancel appointment' button on cancellation screen */
.md-card-actions.cancellation-actions .appointment-cancel-button { 
display: none; 
}
New Booking App
/* Hide the 'cancel appointment' button on cancellation screen */
.change.cust-info .cancellation-actions .appointment-cancel-button {
display: none;
}

Action Buttons on Confirmation Screen

Save to Calendar and Edit Information, Reschedule, Cancel, Schedule buttons, hiding buttons with CSS.
Confirmation screen with all the buttons included

All Buttons

To hide ALL the buttons on the confirmation screen, such as Save to Calendar, Edit Information, Reschedule, Cancel Appointment, and Schedule a New Appointment, use the following CSS.

Old Booking App
/* Hide the 'save to calendar', 'edit information', 'reschedule/cancel appointment', and 'schedule a new appointment' buttons on confirmation screen */
.confirm .md-card-actions.confirmation-actions,
.confirm .calendar-save { 
display: none; 
}
New Booking App
/* Hide the 'save to calendar', 'edit information', 'reschedule/cancel appointment', and 'schedule a new appointment' buttons on confirmation screen */
.confirm.cust-info .mdc-card__actions,
.confirm.cust-info .calendar-save {
display: none;
}

Save to Calendar Only

Old Booking App
/* Hide the 'save to calendar' button on confirmation screen */
body .confirm .calendar-save {
display: none;
}
New Booking App
/* Hide the 'save to calendar' button on confirmation screen */
.confirm.cust-info .calendar-save {
display: none;
}

Schedule a New Appointment Only

Old Booking App
/* Hide the 'schedule a new appointment' button on confirmation screen */
body .confirm .appointment-book-new-button {
display: none;
}
New Booking App
/* Hide the 'schedule a new appointment' button on confirmation screen */
.confirm.cust-info .appointment-book-new-button {
display: none;
}

Reschedule Only

Old Booking App
/* Hide the 'reschedule' button on confirmation screen */
body .confirm .appointment-reschedule-button {
display: none;
}
New Booking App
/* Hide the 'reschedule' button on confirmation screen */
.confirm.cust-info .appointment-edit-button {
display: none;
}

Edit Information Only

Old Booking App
/* Hide the 'edit information' button on confirmation screen */
body .confirm .appointment-edit-button {
display: none;
}
New Booking App
/* Hide the 'edit information' button on confirmation screen */
.confirm.cust-info .appointment-reschedule-button {
display: none;
}

Cancel Appointment Only

Old Booking App
/* Hide the 'cancel appointment' button on the confirmation screen */
body .confirm .appointment-cancel-button {
display: none;
}
New Booking App
/* Hide the 'cancel appointment' button on the confirmation screen */
.confirm.cust-info .appointment-cancel-button {
display: none;
}

Hiding buttons has never been easier.

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