Back to contents

JetAppointment: How to Enable WooCommerce Integration

 

Go through this tutorial to discover how to connect the JetAppointment plugin’s form with WooCommerce checkout.

If you enable WooCommerce integration for the JetAppointment 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, doesn’t it? This tutorial will show you how to enable WooCommerce 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 a vital 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 enable the WooCommerce Integration toggle.

jetappointments general settings

Then, proceed to the WooCommerce > Products and check whether a new product appeared on your products list.

woocommerce products appointment

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

knowledge base information icon
ATTENTION!
The function of this product is to activate the checkout option. The actual products that should be paid for are your custom post type services.
Please, do not delete this sample product — payments will not work without it. Simply hide it if you do not need it on the front end.

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 post type, open the needed service, set the Price per value, and type the price in the newly appeared field.

Once the price is set, click the “Update” button.

price per slot

3 Step — Define the form’s Notification Settings

Make sure that you have proper notification settings in your forms. Go to JetEngine > Forms, find one of the appointment forms created automatically, and click the “Edit” button. Firstly, you have to create an additional calculated field for price. Click the “Add Field” button.

Set the Type to “Calculated,” define Name and Label, and paste the following Calculation Formula:

%FIELD::appointment_date%, where ‘appointment_date’ represents the “Appointment Date” field.

Don’t forget to click the “Apply Changes” button.

calculated field in the form

When you create an additional price field, it is time to deal with the Post-submit Actions / Notifications 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.

In the 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 the WooCommerce linking tutorial.

insert appointment post submit action

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.

woocommerce checkout fields map

Push the “Update” button after you have adjusted the fields.

4 Step — Book & pay

Now, let’s check the progress.

giff app

Now you know how to integrate WooCommerce with the JetAppointment plugin.