Date Blocks For Rental Duration in WooCommerce Bookings

Tested & Works

The code in this download folder customizes the Bookable Product page generated by the WooCommerce Bookings plugin. In this case, for party rental dresses. The code includes 188 lines of PHP code for custom functions for :

  • Repositioning the short description
  • Adding custom fields to the single bookable product general tab for sizes and outputting the sizes after the pricing on the single product page.
  • Adding buttons dynamically for any number of duration blocks which include the block count range, base cost and daily rental rate. The buttons when clicked integrate with the date picker calendar enabling the user to choose from a selection of date blocks for the rental product and a start date which then dynamically calculates the rental cost ready for progression to the cart page.
  • Once a start date is selected, the user can simply use the duration block buttons to select the length of rental without the need to reselect the start date every time they ant to select a different duration.
  • Dynamic inline buttons output after the buy now button using page slugs.
  • Changing the but now button text
  • Redirecting directly to the cart page when the buy now button is clicked.

Also includes jQuery to link the buttons to the date picker and 236 lines of CSS for styling.

Note : Your theme may style the date picker differently.

Video Demo

Shows the dynamic functionality stated above working on the front end.


There’s 3 steps :

  1. Copy and paste the PHP code to the end of your child themes functions file.
  2. Upload the .js file to your child theme folder.
  3. Copy and paste the CSS to the end of your child themes style.css file and clear caching.

The download folder also includes screen shots showing you how to setup the Product Date Bookable Product General, Availability and Costs settings so the calendar and costs work as seen in the demo video.

Installation included.

These solutions may also help :