How to Add Custom Meta Box in WooCommerce Order Page?

This article dives into the world of meta boxes, exploring what they are, how to add them, and how to customize their position within the WooCommerce environment.

Meta boxes are an essential feature in WordPress that empower users to enhance the functionality and flexibility of their websites.

A user interface element is used to display additional information or options for a specific post type in WordPress.

It allows users to add custom fields, metadata, and other settings in the WordPress editor. Meta boxes are often added through WooCommerce plugins or custom code.

WordPress provides a hook add_meta_boxes hook for adding the custom meta box. we have used this hook to add a custom meta box in the WooCommerce order edit page.

// Add custom meta box to WooCommerce orders page
add_action( 'add_meta_boxes', 'custom_order_meta_box' );

/**
 * Add custom meta box.
 *
 * @return void
 */
function custom_order_meta_box() {
	add_meta_box(
		'custom-order-meta-box',
		__( 'Custom Meta Box', 'webkul' ),
		'custom_order_meta_box_callback',
		'shop_order',
		'advanced',
		'core'
	);
}

Now we need to display the custom HTML or content to display inside the meta box body. We have added a callback function for this called custom_order_meta_box_callback. which contains the code to render inside the meta box.

/**
 * Callback function for custom meta box.
 *
 * @param object $post Post object.
 *
 * @return void
 */
function custom_order_meta_box_callback( $post ) {
	// Get the saved value
	$custom_value = get_post_meta( $post->ID, '_custom_value', true );

	// Output the input field
	echo '<p><label for="custom-value">' . __( 'Custom Value:', 'webkul' ) . '</label> ';
	echo '<input type="text" id="custom-value" name="custom_value" value="' . esc_attr( $custom_value ) . '" /></p>';
}

This code represents a custom Input box, as this is looking similar to the below screenshot.

We can customise the position of the custom meta box. There are several positions or contexts of custom meta box like normal, side and advanced.

Normal: Normal context displays the custom meta box in the WooCommerce order edit page’s middle content.

Advanced: Advanced context displays the custom meta box in the WooCommerce order edit page’s middle content.

Side: Side context display the meta box in the WooCommerce order edit page’s side content.

We can manage the vertical position of the meta box by priority. There are several priorities are as high, core, default and low.

These all priorities work in top to bottom direction, high priority displays the meta box on the top position and low priority displays the meta box on the lower bottom side.

We have stored the complete source code on GitHub, click here to get the custom meta box source code. Also, we have used the custom meta boxes in our many plugins, one of them is WooCommerce POS NF525.

For any technical assistance kindly raise a ticket or reach us by email at [email protected]. Thanks for Your Time! Have a Good Day!

If you require expert assistance or want to develop custom unique functionality, Hire WooCommerce Developers for your project.