How to customize Booking (Appointment) Form in our theme?

[admin]

Hi all customer,

In other topic we already have tutorial how Appointment working in our theme: https://harutheme.com/forums/topic/how-appointment-form-are-working-in-harutheme/

In this topic tutorial we’ll help you customize Booking (Appointment) Form in our theme.

Before customize Booking Form you need to know about customize template display using child theme in this topic tutorial: https://harutheme.com/forums/topic/customize-wordpress-theme-using-child-theme/

In this example we’ll use Shang theme. It similar with other themes like Clarivo,…

Tutorial : Add or Remove Fields

Step 1: File template to edit is:

wp-content/plugins/haru-shang-core/templates/posttypes/appoinment/layout/style_x.php

wp-content/plugins/haru-shang-core/includes/widgets/haru-widget-book-appointment.php

You will see field in form like this:

<input name="first_name" id="first_name" class="haru-require" type="text" placeholder="">

You can add or remove by add similar code but the name and id must be different.

Example:

<input name="new_field" id="new_field" class="haru-require" type="text" placeholder="">

Step 2: File to edit in: wp-content/plugins/haru-shang-core/shortcodes/posttypes/appointment/appointment-form.php

Find this function: haru_ajax_appointment_register() and Process new field has just added like this:

if ( !isset($_POST['new_field']) || empty( $_POST['new_field'] ) ) {
echo $_POST['new_field'];
self::_ajax_exit( __( 'New field is missing.', 'haru-shang' ) );
}

Find this function: create_new_appointment() and process to save it in database like this:

update_post_meta( $order_ID, 'haru_appointment_new_field', $new_field );

If you want to use it in Email template you need add it in $replace_array like this:

'new_field' => $new_field,

Step 3: File to edit in: wp-content/plugins/haru-shang-core/includes/posttypes/appointment.php

Find this function: haru_save_appointment() and process Email template like this:

$new_field = get_post_meta($post->ID, 'haru_appointment_new_field', true);

You also need add it in $replace_array like this:

'new_field' => $new_field,

Step 4: Add CSS if needed in Appearance -> Customize -> Additional CSS or in child theme.

Hope this help and thanks for reading.

 

*****
Best regards,

HaruTheme

• This topic was modified 3 years, 7 months ago by admin.
• This topic was modified 3 years, 3 months ago by admin.
• This topic was modified 3 years, 3 months ago by admin.
• This topic was modified 3 years, 3 months ago by admin.

[Lota]

Hello please is there any way I can customise the Booking without going to the Code.

Also in the Appointment form I have been able to edit it but now i removed the Barber section from the appointment form but the Barber section in the form is required so when I try submitting the form it says “Barber is missing.”

[Lota]

hello I tried submitting the form and it brought this notification “Failed to register appointment. Please contact to Administrator”

and I saw the request at the backend

[admin]

Hi Lota,
Now our Booking form don’t use any plugins to do it.
So in this case if you want to customize Booking form please follow step to step above. Now don’t have solution to do that without change the code.
We already have tutorial to add or delete field.

****
Regards,
HaruTheme

[chyzob]

I think I’ve resolved the original appointment form code. Thanks.

[Author]

Posts