Reading list Switch to dark mode

    How to Add Custom Meta Box in WooCommerce Order Page?

    Updated 14 March 2024

    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.

    What is meta box?

    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.

    How to add meta box?

    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.

    Searching for an experienced
    Woocommerce Company ?
    Find out More
    // 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'
    	);
    }

    Create custom meta box

    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.

    custom meta box in woocommerce

    Customise the position of custom meta box in WooCommerce

    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.

    WooCommerce order page custom meta box position

    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.

    Download Source Code from GitHub

    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.

    WooCommerce Support

    For any technical assistance, please raise a ticket or reach us by mail at [email protected]Thanks for Your Time! Have a Good Day! Also, Hire WooCommerce Developers for all kinds of services for web and mobile development, plugin development, mobile app, design services, and much more.If you need custom WordPress Development services then feel free to reach us and also explore our exclusive range of WordPress WooCommerce Extensions.

    Thanks for Your Time! Have a Good Day!

    . . .

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    Be the first to comment.

    Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home

    Table of Content