Tutorials

The Appointments documentation on BookingWP™ lists short, focused tutorials for developers. This page pulls those same ideas into our Docusaurus site, links to the longer guides we already host, and embeds each of the screenshots that originally illustrated the workflow.

REST API quick start

The REST API tutorial walks through the appointments, slots, availabilities, and staff controllers and shows you how to grab an API key in WooCommerce Settings → Advanced → REST API.

Our developer/api series expands every endpoint (V1 and V2), plus filters, authentication, and error handling. Keep the screenshot handy when generating a key so you end up in the right admin screen before testing with Postman or Insomnia.

Override templates

The “Override Templates via a Theme” tutorial explains that the appointment form templates live in plugins/woocommerce-appointments/templates/ and should be copied into wp-content/themes/<your-theme>/woocommerce/ when you need structural changes. For complete guidance, see Style the Appointment Form, which walks through CSS tweaks, template overrides, and the hooks that wrap the form.

Move the appointment form into a tab

By default the booking form appears in the sidebar next to the product description.

To reclaim that sidebar and move the form into its own product tab, remove the form action, register a custom tab, and render the appointment template directly inside the new tab. The code snippet below removes the description tab and reuses the WC_Appointment_Form wrapper so the form renders exactly as it does on the default page.

The tutorial also shows how to print the product description back into the empty sidebar area:

Tab snippet

add_action( 'wp_head', 'bizzwoo_remove_appointment_form', 0 );
function bizzwoo_remove_appointment_form() {
	global $wc_appointment_cart_manager;
	remove_action( 'woocommerce_appointment_add_to_cart', array( $wc_appointment_cart_manager, 'add_to_cart' ), 30 );
}

add_filter( 'woocommerce_product_tabs', 'bizzwoo_new_product_booking_tab' );
function bizzwoo_new_product_booking_tab( $tabs ) {
	if ( is_product() ) {
		$product = wc_get_product( get_the_ID() );
		if ( $product->is_type( 'appointment' ) ) {
			$tabs['booking_tab'] = [
				'title'    => __( 'Booking', 'woocommerce' ),
				'priority' => 50,
				'callback' => 'bizzwoo_new_product_booking_tab_content',
			];
		}
	}
	return $tabs;
}

function bizzwoo_new_product_booking_tab_content() {
	global $product;
	$appointment_form = new WC_Appointment_Form( $product );
	wc_get_template(
		'single-product/add-to-cart/appointment.php',
		[ 'appointment_form' => $appointment_form ],
		'woocommerce-appointments',
		WC_APPOINTMENTS_TEMPLATE_PATH
	);
}

add_filter( 'woocommerce_product_tabs', 'bizzwoo_remove_product_tabs', 98 );
function bizzwoo_remove_product_tabs( $tabs ) {
	if ( is_product() ) {
		$product = wc_get_product( get_the_ID() );
		if ( $product->is_type( 'appointment' ) ) {
			unset( $tabs['description'] );
		}
	}
	return $tabs;
}

add_action( 'woocommerce_appointment_add_to_cart', 'bizzwoo_description_insteadof_form' );
function bizzwoo_description_insteadof_form() {
	if ( is_product() ) {
		$product = wc_get_product( get_the_ID() );
		if ( $product->is_type( 'appointment' ) ) {
			the_content();
		}
	}
}

Appointment form shortcodes

BookingWP shows how to drop [appointment_form] or [product_page] into posts and even tabs. Our Shortcodes guide already lists every attribute, explains the optional show_* flags, and now includes the screenshot below so you can copy the correct product ID from the WooCommerce Products list.

Google Calendar sync for unpaid appointments

By default the plugin only syncs confirmed, paid, or completed appointments with Google Calendar. The tutorial adds unpaid appointments through woocommerce_appointments_gcal_sync_statuses; paste the snippet below into a child theme’s functions.php file to keep the unpaid entries in sync as well.

add_filter( 'woocommerce_appointments_gcal_sync_statuses', 'gcal_sync_unpaid_statuses' );
function gcal_sync_unpaid_statuses( $sync_statuses ) {
	array_push( $sync_statuses, 'unpaid' );
	return $sync_statuses;
}

For the full Google Calendar setup, reference Google Calendar Sync.