WooCommerce Bookings Show Start Date, End Date, Duration

Picture of datepicker and date showing below

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.

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 why not download it from my Github.

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 .

Leave a Reply

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