We use cookies to understand how you interact with our site, to personalize and streamline your experience, and to tailor advertising. By continuing to use our site, you accept our use of cookies and accept our Privacy Policy.

Your Digital Commerce Experts

How to Add a Field to a Bookable Product and Re-Calculate Product Price

How to Add a Field to a Bookable Product and Re-Calculate Product Price
Liquid Web & Nexcess
Nexcess Is Now Part Of The Liquid Web Family
Find all your favorite content for WordPress and WooCommerce here on Nexcess.net

Looking for a great way to add custom bookable products to your store?

When it comes to creating bookable products, the WooCommerce Bookings plugin has a good amount of options for customizing the way a service or physical goods can be scheduled and booked.

Managing multiple resources is a breeze with ‘Resources’, and ‘Persons’ makes it easy to designate a certain number of bookable items.

When it comes to adding more complexity to the bookings product page, things can get tricky.

Check Mark Subscribe to the Liquid Web eCommerce newsletter for ways to increase profitability for your store.

Let’s Build a Product Page

Let’s say you’re building a website for a luxury spa.

Your client has mentioned that they’re selling a lot of Hot Stone Therapy add-ons with their Deep Tissue Massage in store, but they’d really love to allow clients to purchase the add-on directly from their website when booking.

As you begin to create a product for a Deep Tissue Massage, out of the box, the page will have all of the functionality needed to book the service, but no add-ons.

Deep Tissue Massage without addon

Add Additional Value to the Product Page

What you really want to build is a bookable product page that both earns your client an additional $30 per massage, and offers a simple experience for the client booking the service.

Having the option to book the add-on is important, but so is the real-time adjustment of the total booking price so the client knows exactly what they’re getting and how much they’ll pay.

Here’s an example of the same product page, this time with the Hot Stone Therapy add-on included (and real-time price adjustment).

Deep tissue massage with addon and correct pricing

To achieve this simple and value-adding result, you could definitely add a field to your product page using WooCommerce hooks. If you’re looking for a quicker way to add custom fields to a bookable product and don’t want to spend time creating custom code, there’s a faster way.

After installing the WooCommerce Extra Product Options Pro plugin, head over to the products menu in the WordPress admin, and select Extra Product Option.

Adding a new field

Next, add a new field. I chose to add a Radio field, but there are plenty of field types to choose from. Make sure to add a wrapper class to your field as we’ll be using it to adjust the display of the options on the product page.

Note: There’s no additional work needed to enable the product page to auto-update pricing.

Once you’ve designated the price in the options area of the field in the backend, it will automatically update when selected by the user based on your rules.

Editing a product field

One of the things that makes this plugin particularly powerful is that you can set display logic in the Display Rules tab.

Adjusting product display options

In this case, additional product options will only be displayed when viewing a product within the Massage category.

Once you’ve set the options within the product field exactly how you want them, save the field by clicking Update Field.

After creating a Radio field, there’s a little bit of CSS cleanup we’ll need to do. The options will likely display in one wrapped line underneath the booking calendar, which isn’t the easiest to understand if you’re booking the service.

Deep tissue massage with style issues on addon

Remember that wrapper class? We’re going to use the wrapper class to adjust the display of the option fields so that they’re showing on separate lines.

Use the CSS editor to add the following custom style:

.yourwrapperclass label {display:block;}

With that small CSS change, your product page should look similar to this:

Deep tissue massage showing with addon and correct style using wrapper class

And that’s how to add a custom field with auto-updating price to a WooCommerce booking product page.

Learn How to Generate $1,000,000+ for Your Store

The 4 Keys to Generating Seven Figure Sales on WooCommerce - eBook