2. Home
  4. Booking & Appointment Plugin for WooCommerce
  6. Overriding Templates

Overriding Templates

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:

  1. By duplicating the default template files and fixing them in the current theme or child theme of your WordPress site.
  2. 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:

  1. 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
  2. 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
  3. 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: 

  1. Front: This directory contains all the pages that are visible on the front-end for customers.
  2. Dashboard: This directory contains the templates for the Vendor Dashboard.
  3. Emails: This directory contains the templates for emails sent by WooCommerce for new product notifications, vendor applications, and more.
  4. 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:

  1. 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
  2. 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
  3. 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:

  1. 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
  2. Locate the template directory of new-product.php: Template directory is emails directory.
  3. 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:

  1. 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
  2. Locate the custom WC Vendors template file(s) that you wish to override from this directory: /woocommerce-booking/templates/vendors-integration/wc-vendors.
  3. 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:

  1. 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.
  2. 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
  3. 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:

  1. 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.
  2. Locate the custom Dokan template file(s) that you wish to override from this directory: /woocommerce-booking/templates/vendors-integration/dokan.
  3. 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

 

Was this article helpful to you? Yes No

How can we help?