Mobile Friendly Search

The Availability Search for WooCommerce Bookings is mobile friendly out of the box. We’ve done our best make the search automatically fit your theme. However there a few things you can change to improve the experience for your mobile users.

Display available products in two columns

You might display the bookings results in 3 or 4 columns for desktop users. However that would make the products very small on mobile devices.

We highly recommend the offical Store Front theme for WooCommerce. Store Front will automatically display the results in a single column on mobiles. The CSS snippet below will change the columns to 2 on smaller screen sizes. This snippet should work on other themes too.

.aswb-results ul.products li.product { width: 46.411765%; float: left; margin-right: 5.8823529412%; } .aswb-results ul.products li.product:nth-of-type( 2n ) { margin-right: 0; } @media ( min-width: 768px ) { .aswb-results ul.products li.product:nth-of-type( 2n ) { margin-right: 5.8823529412%; } }
Code language: CSS (css)

Apply dates on selection

Availability Search Default Date Picker WooCommerce Bookings
Availability Search apply dates via buttons.
Availability Search automatically apply dates WooCommerce Bookings
Automatically apply dates on selection.

Currently when you select the dates in the Availbility Search date picker you’ll see two buttons. “Apply” & “Cancel”, these buttons allow users to make sure they’ve got their date selection right before starting the search for bookable products.

However these 2 buttons can be removed if you wish to automatically apply the dates when the user has selected the end date. it’s one less click for mobile uses.

The auto apply dates feature can be added per search using the shortcode. You’ll need to add auto_apply_dates="true" to your shortcode.

For all the shortcode examples click here.

Was this page helpful?