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.

Copy and paste only examples that you need.

/*
* Search & Fields 
*/

/* Center the Search */
.aswb-wrapper form.aswb-search {
    text-align: center;
}
/* Stack Search Fields */
.aswb-wrapper form.aswb-search {
    text-align: left;
    display: grid;
}

/* Stack Search Lables */
.aswb-label {
    display: block;
}

/* Change the font and background color of the date input */
form.aswb-search input {
  background: grey;
  color: white;
}

/* Change the submit button color and background*/
button.aswb-submit {
    background: cadetblue;
    color: white;
}

/*
* Date Picker
*/

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

/* Selected date color on the datepicker range */ 
.daterangepicker .calendar-table tbody tr td.active, .daterangepicker .daterangepicker .calendar-table tbody tr td.active:hover {
    background-color: #15b3b0;
    border-color: transparent;
    color: #fff;
}

/* Change the highlighted color on the datepicker range */ 
.daterangepicker .calendar-table tbody tr td.in-range {
    background-color: #15b3b021;
    border-color: transparent;
    color: #000;
}

/*
* The rest of the date picker uses your themes styling.
*/ 


/* Results: Adds light grey box with adding around the bookable product results*/
div.aswb-results {
    margin-top: 35px;
    background: #f9f9f9;
    padding: 30px 60px;
}
Code language: CSS (css)

2 Column layout – Starter

Use Availability Search as a 2 column layout. The search fields on the left side and the search results on the right.

.aswb-wrapper {
    display: flex;
}

.aswb-field-group {
    display: block;
    width: 100%;
}

.aswb-search {
    background: whitesmoke;
    padding: 20px;
    min-height: 150px;
    max-width: min-content;
}
.aswb-label {
    display: block;
}
.aswb-results {
    margin-left: 30px;
}
Code language: CSS (css)

Responsive product columns

Most themes will automatically create resposive columns with Availability Search results. If your theme is still displaying 4 columns on mobile devices then you can modify the below CSS and add it your site.

The product will display in 2 columns on screen sizes below 780px. If the screen is bigger, then ASWB will use the columns specified in the settings.

@media only screen and (max-width: 780px) {
.aswb-results ul.products li.product {
    width: 44%;
    float: left;
    margin-right: 5%;
	}
}Code language: CSS (css)