Example CSS

Styling the search to fit your theme

Every theme is different and therefore we are creating the Availability Search with flexibility in mind.

  • The search will try to inherit as much of your theme’s styling as possible.
  • The Search will use the default WooCommerce stying for displaying the products. (Themes may override this with their own.)

Sometimes you’ll need to create your own CSS to match your theme perfectly. Below you’ll find a simple example of using the CSS selectors. You can then create your own style by putting the custom CSS into your theme or the WordPress customizer.

/* Centers the search */
form.aswb-search {
   text-align: center;
   margin: 0 auto;
/* Change the font and background color of the date input */
form.aswb-search input {
  background: grey;
  color: white;
/* Changes the background of the submit button*/
button.aswb-submit {
   min-width: 100px;
   background: #26de27;
/* Changes font and background color of the apply button in the date picker*/
button.aswb-datepicker-buttons.aswb-apply-button {
    background: grey;
    color: white;
/* Changes font and background color of the cancel button in the date picker*/
button.aswb-datepicker-buttons.aswb-cancel-button {
    background: white;
/* Increase size and padding on datepicker buttons*/
button.aswb-datepicker-buttons {
    padding: 20px!important;
    font-size: 14px!important;
/* Adds light grey box with adding around the bookable product results*/
div.aswb-results {
    margin-top: 35px;
    background: #f9f9f9;
    padding: 30px 60px;
/* Change the highlighted color on the datepicker range */ 
.daterangepicker td.active, .daterangepicker td.active:hover {
    background-color: purple;
    border-color: transparent;
    color: #fff;
Was this page helpful?