1. Home
  2. Docs
  3. Availability Search for WooCommerce Bookings
  4. How to

How to

Availability search for WooCommerce Bookings

Here you’ll find the basic usage documentation for our Availability Search for WooCommerce Bookings plugin.

The plugin is in beta mode and some things are subjected to change as we improve and release updates.

 

Example CSS for 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*/
#aswb-submit-button {
   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;
    color:grey;
}

/* 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;
}

 

 

Articles

Was this article helpful to you? Yes 1 No