WooCommerce Bookings Show Start Date, End Date, Duration

Picture of datepicker and date showing below

Note: This is now available for sale as a plugin ready to go: Woo Bookings Show Start Date, End Date, Duration

Show Duration with Cost on WooCommerce Booking Single Product Page
I am surprised no one asked me for this before, but low and behold it has taken this long. As some (I daresay many) of you will know, when you are choosing start and end dates on the WooCommerce Bookings plugin that it automatically (via Ajax) updates the booking cost for the booking. Some would think it would be handy if that panel showing the booking cost also showed the chosen dates and the duration of booking the cost is indicative of, I would and I finally had a client ask me to make this happen for them.
So let’s make it happen.
First we will enqueue a JavaScript file so we can hook into the interactive ajax that keeps the booking cost updated as you choose different dates.

Now – in the javascript file we hook into a hook that is fired every time the booking form is updated, this happens each time you choose a date from the date picker or if you change the resource or person count if you have those fields active in your form. The awesome ‘wc_booking_form_changed’ hook, and in that hook we get the start date and end date and calculate the duration between the two – here’s the code.

“); container.attr(‘id’, ‘duration-container’); container.prependTo(‘.wc-bookings-booking-cost’); var startDate = new Date(bookingDates.start_year, parseInt(bookingDates.start_month)-1, bookingDates.start_day); console.log(startDate); if (startDate != “Invalid Date”) { container.html(”

Start Date: ” + startDate.toDateString() + “

“); } var endDate = new Date(bookingDates.end_year, parseInt(bookingDates.end_month)-1, bookingDates.end_day); console.log(endDate); if (endDate != “Invalid Date”) { container.append(”

End Date: ” + endDate.toDateString() + “

“); } var bookingDays = Date.daysBetween(startDate, endDate); if (!isNaN(bookingDays)) { console.log(bookingDays); container.append(”

Duration: ” + bookingDays + ” days

“); } //$(‘.wc-bookings-booking-cost’).before }); })

My client also wanted to show the start date, end date and duration on the cart and checkout pages. As you may know WooCommerce Bookings already shows some of this on the cart and checkout, the Booking Date, which is the start date, and the Duration, and because of the way it shows this our task is simple. WooCommerce Bookings hooks into the get_item_data hook and shows any data posted from the booking form with a field name not starting with an underscore. So all we do is copy the data into the right keys like so.

Because we are now showing Start Date, End Date and Duration we just remove Booking Date like so:

And finally to show the same info in the order backend, and in the emails to the user we just do.

If you like the idea or the look of this plugin it is now available for purchase along with my other premium plugins via the shop page for just £15. Here is the direct link.

Like the code you see here? You can hire me at Codeable.io - a WordPress specialist outsourcing site that vets developers to make sure they are of the highest standard. See all developers you can hire through Codeable here.

Posted in Code Snippets, Featured, Guides, Help Topics, Woocommerce, Wordpress and tagged .


  1. is this plugin still available for download?
    What I see on the image is that the day of the week is displayed (THU). I would really like this so that this can also be displayed in the email. Does this plugin do that? And where can I download it?

  2. Hi! Nice piece of code.

    May i ask where you found the wc_booking_form_changed hook?

    I’ve got a case. If i select saturday as the start-date, it should automatically make it from friday instead. So it is only possible to book a whole weekend, and not eg. saturday to sunday.

    My question is, is it possible to return the startDate and endDate objects again, so it updates the frontend and booking stuff?

    • You don’t even need to do anything fancy for that. Set your block size to 4 days (Fri-Mon I guess?), in availability set days to be unbookable by default.
      Set it to check only the start and end days of the booking, set Sat-Sun block as not bookable and then set Fri-Mon block as available for booking, with the priority on the Fri-Mon higher than the Sat-Sun block and you should be golden. It won’t auto select Friday for them, but it will make Friday available for booking and Sat/Sun not available, but when they select a Friday they will be booking the 4 day block for the entire weekend. Any problems come back to me.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.