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.
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.
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).
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.
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.
One of the things that makes this plugin particularly powerful is that you can set display logic in the Display Rules tab.
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.
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:
And there you have it.
Grow Your Online Store With Managed WooCommerce Hosting
Now you know how to add a custom field with an auto-updating price to a WooCommerce booking product page.
In addition to the strategies we’ve listed here, a great hosting plan can be instrumental to growing your business. Fortunately, Nexcess has you covered.
Our managed WooCommerce hosting plan is ideal for growing businesses. Specially designed to convert more sales, WordPress managed hosting for ecommerce is packed with cutting-edge technologies to reduce query load times and cart abandonment rates.
To learn more about fully managed WooCommerce hosting, check out our plans to get started today.
