Back to contents

JetAppointment: WooCommerce Integration


Go through this tutorial to learn how to connect JetAppointments plugin’s form with WooCommerce checkout.

If you enable WooCommerce integration for your JetAppointments plugin, you can adjust online payment right after the visitor books the service. It seems to be a must-have option for having a successful business, isn’t it? This tutorial will show you how to enableWooCommerce integration and use all the additional functions of JetAppointment.

By this time you have probably already passed the basic plugin installation. Before we start, please make sure that you have created and applied default WooCommerce pages. It is an important moment because the redirect from the appointment form to the checkout page will be created automatically.

1 Step — Enabling WooCommerce integration

Navigate to Appointments > Settings and turn the WooCommerce Integration toggle on.

JetAppointment General settings

Then, proceed to the Products dashboard tab and check that a new product appeared on your products list.

Appointment product

It is a sample product that was created automatically and you don’t need to make any changes here.

The function of this product is to activate the checkout option. The actual products that should be paid – are the services from your custom post type.

2 Step — Setting the price for the services

Please note that there is no need to set the price in the Woo product. Navigate to the services Price per slot meta field and set the price here.

price per slot

3 Step — Define form Notification Settings

Now you have to make sure that you have proper notification settings in your forms. Go to JetEngine > Forms find one of the appointment forms that were created automatically and click the “Edit” button. First of all, you have to create an additional hidden field for price. Click the “Add Field” button, set the Type to “Hidden”, define Name and Label, select “Current Post Meta” in the Field Value option, and type in the Price per slot meta field name to the Meta field to get value from text area. Don’t forget to click the “Apply Changes” button.

Price form field

When you are done creating an additional price field, it is time to deal with the Post-submit Actions / Notification Settings block. Hit the button with the pencil icon to start editing the Insert appointment settings section. The first five rows are filled automatically. However, you can change the values if necessary.

Insert appointment settings

In WooCommerce Price field select the price field you just created.

To define how the WooCommerce order will look – click the “Set up” button near the WooCommerce order details option. Check this form and WooCommerce linking tutorial.

Insert appointment settings

WooCommerce checkout fields map allows you to set the auto-filling of checkout form fields. All the data the user already typed into the form will be automatically inserted into the checkout form fields.

Insert appointment settings

4 Step — Book & Pay

Now, let’s check how the process goes.

giff app

Well done! Hope you love this cool feature and it will help you to create something special.