Overriding Templates - Booking & Appointment Plugin for WooCommerce Documentation

The template files of the Booking & Appointment Plugin for WooCommerce contain the markup for the frontend and HTML emails that are needed by our plugin for your site. These template files contain hooks that can allow you or your Developer to add, remove and move content by overriding the default plugin template.

The Booking & Appointment Plugin template files can be found within the /woocommerce-booking/templates/ folder. The templates folder contains the templates for the following sections:

Bookings: Booking Form, Bookings Date, Booking Hidden Fields, Cancel Booking, Multidates Box
Emails: New Booking (Admin), Booking Cancelled, Booking Confirmed, Booking Reminder, Booking Pending Confirmation, Rescheduled Booking (Admin), Google Calendar Import (Admin)
Meta Boxes
Vendors Integrations: Dokan & WC-Vendors
Edit Booking Modal
Reminder Email
Reminder SMS
Search Widget Form

The Booking & Appointment Plugin template files can be overridden in two ways:

By duplicating the default template files and fixing them in the current theme or child theme of your WordPress site.
By using a Hooks.

Overriding Templates by Duplication

You can use your own copy of the template files by duplicating them from the templates folder and fixing them in your theme or child theme. The plugin will search for any custom templates in the theme folders before using the default templates.

Warning: DO NOT delete or remove the file(s) you are about to copy. If you do, the Booking & Appointment Plugin will not have a fallback template and this could cause errors on your website.

Steps to duplicate default template files:

In the root directory of your theme folder, create a wocommerce-booking folder. At the end of this step, the newly created folder should have this path: {template_directory}/woocommerce-booking, where {template-directory} represents the path of the current theme. For instance, in the case where Storefront is being used as the theme, the path after completing this step should look like this: {site-url}/wp-content/themes/storefront/woocommerce-booking
Identify the template you wish to override by navigating to the Booking & Appointment Plugin template folder here: {site-url}/wp-content/plugins/woocommerce-booking/templates
Copy the template file(s) to the woocommerce-booking folder already created in Step 1. Please note that for template files that have a parent folder, the parent folder also needs to be created in the woocommerce-booking folder already created in Step 1.

For instance, to override the Bookings Form template file used on the Single Product Page, Cart, Checkout and My Account pages, copy {site-url}/wp-content/plugins/woocommerce-booking/templates/bookings/bkap-bookings-box.php to {site-url}/wp-content/themes/{current-theme}/woocommerce-booking/bookings/bkap-bookings-box.php

You are free to make the necessary changes in the copied file, which will override the default Booking & Appointment Plugin template file. If you decide you want to go back to using the default templates, then just delete the custom template file and it should return to using the Booking & Appointment Plugin default template.

It Didn’t work?

If you aren’t seeing the changes, be sure you have put the folder on the root of the theme or child theme, and make sure that the theme where you have put these files is in the currently active theme.

Warning: Do not edit these files within the core plugin itself as they are overwritten during the upgrade process and any customizations will be lost. We recommend using child-theme, which hasn’t dependencies with the official themes repo and all your custom files cannot be rewritten after a theme upgrade.

Overriding Templates by using Hooks

You can override the default template files of the Booking & Appointment Plugin by using the woocommerce_locate_template WooCommerce Hook in your current theme’s functions.php. The functions.php file behaves like a WordPress plugin, adding features and functionality to a WordPress site.

First, you would have to identify the template you wish to override by navigating to the Booking & Appointment Plugin template folder here: {site-url}/wp-content/plugins/woocommerce-booking/templates and copying the template file to any location of your choice. We will use {custom-path} to represent the location of your choice.

The custom code below shows how the default template files of the Booking & Appointment Plugin are being overridden, where {custom-path} represents the path to the location where the custom template files have been saved. The $override_template variable is an array that contains the list of template files that you want to be overridden.

function bkap_override_template( $template, $template_name, $template_path ) {

	$basename          = basename( $template );
	$override_template = array(
		'bkap-bookings-date.php'            => '{custom-path}/bookings/bkap-bookings-date.php',
		'admin-gcal-import-event.php'       => '{custom-path}/emails/admin-gcal-import-event.php',
		'admin-new-booking.php'             => '{custom-path}/emails/admin-new-booking.php',
		'customer-booking-cancelled.php'    => '{custom-path}/emails/customer-booking-cancelled.php',
		'customer-booking-confirmed.php'    => '{custom-path}/emails/customer-booking-confirmed.php',
		'customer-booking-reminder.php'     => '{custom-path}/emails/customer-booking-reminder.php',
		'customer-pending-confirmation.php' => '{custom-path}/emails/customer-pending-confirmation.php',
		'rescheduled-booking-admin.php'     => '{custom-path}/emails/rescheduled-booking-admin.php',
	);

	if ( isset( $override_template[ $basename ] ) ) {
		$template = $override_template[ $basename ];
	}

	return $template;
}
add_filter( 'woocommerce_locate_template', 'bkap_override_template', 10, 3 );

Alternatively, if you wish to incorporate your overridden template plans into a custom plugin, you can download this plugin template to get started: https://www.dropbox.com/s/bt6kl3py2cxktbc/my-custom-functionality.zip

Overriding Core WC Vendors Template Files

WC Vendors has a suite of template files that can be overridden to provide a specific feature that you may wish incorporated into your website.

The WC Vendors template files are organized into 4 directories:

Front: This directory contains all the pages that are visible on the front-end for customers.
Dashboard: This directory contains the templates for the Vendor Dashboard.
Emails: This directory contains the templates for emails sent by WooCommerce for new product notifications, vendor applications, and more.
Orders: This directory handles the output of the orders on the Vendor Dashboard and the CSV Exports.

To override any of the files located in the template directories above, take the following steps:

Create a wc-vendors folder in the root folder of your current theme folder or child theme. If you are using the storefront WordPress theme, the path of the created folder should look like this: /wp-content/themes/storefront/wc-vendors
Locate the template directory or directories of the template files that you wish to override. The template directory is located here: /wp-content/plugins/wc-vendors/templates
Copy the template file into the folder created in Step 1, making sure to create its parent template directory if the template file is in another sub-template directory.

For instance, to override the new-product.php email template using the above steps, we would have:

Create a wc-vendors folder in the root folder of the current theme folder or child theme. Path is /wp-content/themes/storefront/wc-vendors
Locate the template directory of new-product.php: Template directory is emails directory.
Copy the template file into the folder created in Step 1. Parent template directory is emails which has to be created also. Path: /wp-content/themes/storefront/wc-vendors/emails/new-product.php

Overriding Custom WC Vendors Template Files

The Booking & Appointment Plugin for WooCommerce has custom template files for WC Vendors, which provide Booking functionalities that are needed by store owners for the smooth running of their multi-vendor websites. These custom template files can be found within the /woocommerce-booking/templates/vendors-integration/wc-vendors folder.

These files can be overridden using the following steps:

Create a wc-vendors/dashboard directory in the root folder of your current theme folder or child theme. If you are using the storefront WordPress theme, the path of the created folder should look like this: /wp-content/themes/storefront/wc-vendors/dashboard
Locate the custom WC Vendors template file(s) that you wish to override from this directory: /woocommerce-booking/templates/vendors-integration/wc-vendors.
Copy the template file(s) into the folder created in Step 1.

Overriding Dokan Template Files

Similar to WC Vendors, Dokan has multiple template files located in the templates folder which create functionalities for customizing the Dashboard, Store page, Product upload/edit page, store-list page, and a host of others.

Just as we have covered with the overriding process for Booking & Appointment Plugin and WC Vendors, the Dokan overriding process follows a similar process where template files have to be copied to the theme folder of the current theme for overriding purposes.

Depending on the subscription package of the Dokan plugin that you have installed on your WordPress website ( Dokan Lite or Dokan Pro), the template files are located in the templates directory like this: /wp-content/plugins/dokan-lite/templates

To override the template files, we would take the following steps:

Create a dokan folder in the root folder of your current theme folder or child theme. If you are using the storefront WordPress theme, the path of the created folder should look like this: /wp-content/themes/storefront/dokan or /wp-content/themes/child-theme/dokan if you are using a child theme instead. The dokan folder is the same for both the dokan-lite or pro version.
Locate the template directory or directories of the template files that you wish to override. The template directory is located here: /wp-content/plugins/dokan-lite/templates
Copy the template file into the folder created in Step 1, making sure to create its parent template directory if the template file is in another sub-template directory.

Overriding Custom Dokan Template Files

Just like we have in WC Vendors, the Booking & Appointment Plugin for WooCommerce has also integrated a number of custom template files for Dokan, which in turn, provides functionality for the different functions that are needed by store owners for the smooth running of their multi-vendor website. The Dokan custom template files can be found within the /woocommerce-booking/templates/vendors-integration/dokan folder and can be overridden using the following steps:

Create a dokan folder in the root folder of your current theme folder or child theme. If you are using the storefront WordPress theme, the path of the created folder should look like this: /wp-content/themes/storefront/dokan or /wp-content/themes/child-theme/dokan if you are using a child theme instead.
Locate the custom Dokan template file(s) that you wish to override from this directory: /woocommerce-booking/templates/vendors-integration/dokan.
Copy the template file(s) into the folder created in Step 1 and you’re good to go.

Overriding Email Notifications using Hooks

WooCommerce has made available a wide range of hooks and filters which can be used to customize the notification emails, in a case where hooks are preferred over overriding the template files directly.

Another use case of using the Email Notification Hooks is where you may need to send different email contents, say the new order email, to different customers. In this case, overriding the email templates is insufficient and a hook is required to programmatically change the content, such that each customer receives a different email content. While we won’t be covering the specifics of developing the programmatic code for the custom email content in this tutorial, we will be covering some useful hooks and filters that will be needed.

Hooks for modifying the Email Subject

woocommerce_email_subject_new_order
woocommerce_email_subject_customer_processing_order
woocommerce_email_subject_customer_completed_order
woocommerce_email_subject_customer_invoice
woocommerce_email_subject_customer_note
woocommerce_email_subject_low_stock
woocommerce_email_subject_no_stock
woocommerce_email_subject_backorder
woocommerce_email_subject_customer_new_account
woocommerce_email_subject_customer_invoice_paid

For instance, to change the email subject for the new order email notification, the following code can be used with the woocommerce_email_subject_new_order hook outlined above.

add_filter('woocommerce_email_subject_new_order', 'change_admin_email_subject', 1, 2);

function change_admin_email_subject( $subject, $order ) {
	global $woocommerce;

	$blogname = wp_specialchars_decode(get_option('blogname'), ENT_QUOTES);

	$subject = sprintf( '[%s] New Customer Order (# %s) from Name %s %s', $blogname, $order->id, $order->billing_first_name, $order->billing_last_name );

	return $subject;
}

Hooks for modifying the Email Heading

woocommerce_email_heading_new_order
woocommerce_email_heading_customer_processing_order
woocommerce_email_heading_customer_completed_order
woocommerce_email_heading_customer_invoice
woocommerce_email_heading_customer_note
woocommerce_email_heading_low_stock
woocommerce_email_heading_no_stock
woocommerce_email_heading_backorder
woocommerce_email_heading_customer_new_account
woocommerce_email_heading_customer_invoice_paid

Hooks for modifying the Email Recipient

woocommerce_email_recipient_new_order
woocommerce_email_recipient_customer_processing_order
woocommerce_email_recipient_customer_completed_order
woocommerce_email_recipient_customer_invoice
woocommerce_email_recipient_customer_note
woocommerce_email_recipient_low_stock
woocommerce_email_recipient_no_stock
woocommerce_email_recipient_backorder
woocommerce_email_recipient_customer_new_account
woocommerce_email_recipient_customer_invoice_paid

Reference to the other WooCommerce Action and Filter Hooks can be found at the official WooCommerce Hook page:

https://woocommerce.github.io/code-reference/hooks/hooks.html