WC Bookings Date Picker Buttons To Set Number of Duration Days

This code displays a grid of buttons to set a preset number of days using the WooCommerce Bookings date picker . All you need to do is select the start date and click any of the buttons to set the duration. The code dynamically creates buttons based on the settings for bookable products range set when creating bookable products.

Once you create the date range in the plugin settings, the buttons are generated dynamically creating a set duration block of days for each button. Once clicked, the calendar automatically selects and highlights the number of days. All the user needs to do is select the start date as seen in the demo video.

The duration also updates the cost for the range of days selected.

Demo Video

Shows the duration set once the start date is selected and duration button is clicked.


There’s 3 steps :

  1. Upload the file named duration.js to your child themes folder.
  2. Copy and paste the PHP code from the functions.php file to the end of your child themes functions file.
  3. Copy and paste the CSS to the end of your child themes style.css file and clear caching. If using a block theme, go to Appearance > Editor > Styles > Edit Styles > 3 dots > Additional CSS or style the elements yourself using the block editor.