WooCommerce Bookings Calendar CSS Style Elements

You are here:

If you want to change the color scheme of the WooCommerce Bookings calendar of the customer view, you can do so by modifying a few CSS styles.

If you are not using a child theme for WordPress or your theme does not allow you to enter custom CSS, perhaps you can install the Jetpack plugin which has a Custom CSS Editor built in.

 

Note: This is a Developer level doc. If you are unfamiliar with code and resolving potential conflicts, select a WooExpert or Developer for assistance. We are unable to provide support for customizations under our  Support Policy.

 

Here are the styles for the different calendar elements:

  /*
  Modify the color styles of the WooCommerce Bookings datepicker calendar.
  Add any/all of these styles to your theme’s custom CSS, but be sure to change
  the color hex codes to your choice. They’re all black here.
  */
   
  /* Month header background color */
  #wc-bookings-booking-form .wc-bookings-date-picker .ui-datepicker-header {
  background-color: #000000;
  }
   
  /* Previous/Next month arrow background color */
  #wc-bookings-booking-form .wc-bookings-date-picker .ui-datepicker .ui-datepicker-next,
  #wc-bookings-booking-form .wc-bookings-date-picker .ui-datepicker .ui-datepicker-prev {
  background-color: #000000;
  }
   
  /* Previous/Next month arrows if not allowed, and calendar dates that are not available */
  .ui-state-disabled,
  .ui-widget-content .ui-state-disabled,
  .ui-widget-header .ui-state-disabled {
  opacity: 0.35;
  }
   
  /* Days of the week header background color */
  .ui-datepicker-calendar thead {
  background-color: #000000;
  }
   
  /* Days of the week header font color */
  #wc-bookings-booking-form .wc-bookings-date-picker .ui-datepicker th {
  color: #000000;
  }
   
  /* Past calendar days background color (not available) */
  .ui-datepicker-calendar tbody {
  background-color: #000000;
  }
   
  /* Available calendar days background color */
  #wc-bookings-booking-form .wc-bookings-date-picker .ui-datepicker td.bookable a {
  background-color: #000000 !important;
  }
   
  /* Available calendar day hover background color */
  #wc-bookings-booking-form .wc-bookings-date-picker .ui-datepicker td.bookable a:hover {
  background-color: #000000 !important;
  }
   
  /* Fully booked calendar days */
  .wc-bookings-date-picker .ui-datepicker td.fully_booked a,
  .wc-bookings-date-picker .ui-datepicker td.fully_booked span {
  background-color: #000000 !important;
  }
   
  /* Days not bookable based on the availability rules */
  .wc-bookings-date-picker .ui-datepicker td.not_bookable {
  background-color: #FFFFFF !important;
  }
   
  /* Today’s date on calendar background color */
  #wc-bookings-booking-form .wc-bookings-date-picker .ui-datepicker td.ui-datepicker-today a {
  background-color: #000000 !important;
  }
   
  /* Time Blocks */
  #wc-bookings-booking-form .block-picker li a {
  background-color: #FFFFFF !important;
  }
   
  /* Time Blocks Hover */
  #wc-bookings-booking-form .block-picker li a:hover {
  background-color: #000000 !important;
  }
   
  /* Selected Date*/
  #wc-bookings-booking-form .wc-bookings-date-picker .ui-datepicker td.ui-datepicker-current-day a {
  background-color: #000000 !important;
  }
   
  /* Selected Time Block */
  #wc-bookings-booking-form .block-picker li a.selected {
  background: #ffffff !important;
  }
Was this article helpful?
Dislike 0
Views: 57