WooCommerce Accommodation Bookings – Hide partially booked dates from displaying red triangle

Robin ScottWooCommerce Tutorials, WordPress Tutorials0 Comments

The thoroughly excellent WooCommerce extension WooCommerce Bookings may be further extended with the addition of WooCommerce Accommodation Bookings to swap over days for nights, and to add a checkin and checkout time (i.e. to make the extension useful for hotels, bed and breakfasts and other “overnight” accommodation provider style bookings.

We have a client using WooCommerce Bookings with the Accommodation Bookings extension to sell pitches at a caravan and motorhome site, with great success.

But some of the functionality proved to be “not so useful” to their customers, and in fact may be slightly confusing: the display of “partially booked” dates in the calendar.

For those of you who are here from Google wondering if this tutorial is going to suit you, I’ll explain:

Partially booked dates in WooCommerce Bookings with Accommodation look like this:

Why you wanna hide that?!

For the customer, assuming you’re taking a pitch from a pool of x bookable pitches, its not at all relevant that someone else has booked a pitch on that date, and in fact could (inaccurately) kind of indicate that this date is in some way “not available” (yes, you can hover over and see its partially booked, but why confuse the customer, just make the sale, old Gill, make that sale!).

How to hide that

In this case, its our old friend CSS for the win, as one liner in your custom CSS (wherever you might put that) will usually get this little red triangle hidden from view, forever:

.wc-bookings-date-picker .ui-datepicker td.partial_booked a:after {display:none;}

To break this down a little, what we’re doing here is hiding (display:none;) from display, the piece of code which makes this red triangle. We could use other code to do this, but this, broadly speaking, will be as future proof as any other method.

What it looks like after

After you put this code into your stylesheet (somewhere), it should now look like this. If not, hard refresh. If not, check you’re not caching the style. If not, cry (joke!), or leave a comment below and see if someone can help!

Leave a comment below if this works – or didn’t work – to fix your issue, and make us feel better about posting it. Or, if you have more complex needs, contact us for a consultation.

Leave a Reply

Your email address will not be published. Required fields are marked *