A Complete Tutorial on Adding Custom Meta Boxes to WooCommerce Order Pages

WooCommerce is a powerful and flexible platform for eCommerce, allowing you to tailor the checkout process, product management, and order processing to your needs. One way to enhance your WooCommerce site is by adding custom meta boxes to the shop order detail pages. These meta boxes can include custom inputs like text fields, dropdowns, and more, which can be used to store additional data for each order.

In this tutorial, we'll walk through the process of creating a custom meta box on the WooCommerce order page, adding a select dropdown input, saving the input data, and using the WordPress selected() function to handle select fields.

---

Step 1: Adding a Custom Meta Box to the WooCommerce Order Page

To add a custom meta box to the WooCommerce order page, we'll hook into the add_meta_boxes action. This will allow us to create a new meta box that appears on the order detail page in the WordPress admin.

add_action(
    'add_meta_boxes',
    function () {
        $current_screen = get_current_screen()->id;

        if ( 'shop_order' === $current_screen || 'woocommerce_page_wc-orders' ) {
            add_meta_box(
                'custom_meta_box',
                __( 'Custom Meta Box', 'pd' ),
                'custom_callback_function',
                $current_screen,
                'side'
            );
        }
    }
);

Explanation:

• add_meta_boxes action: This action is used to add meta boxes to different screens in WordPress.

• get_current_screen()->id: This function returns the ID of the current screen, allowing us to target the WooCommerce order page specifically.

• add_meta_box function: Adds a meta box to the specified screen. Here, it's added to the side of the shop order page.

The meta box will be added to the WooCommerce order page, and the content of the meta box will be generated by the custom_callback_function().

---

Step 2: Creating the Meta Box Content

The content of the meta box is defined in the custom_callback_function. In this example, we're adding a select dropdown input field with several options.

function custom_callback_function( $post ) {
    $post_id = $post->get_ID();
    echo '<select name="example_select_field">';
    echo '<option value="option 1">Option 1</option>';
    echo '<option value="option 2">Option 2</option>';
    echo '<option value="option 3">Option 3</option>';
    echo '<option value="option 4">Option 4</option>';
    echo '<option value="option 5">Option 5</option>';
    echo '</select>';

    echo get_post_meta( $post_id, 'example_select_field', true );
}

Explanation:

• custom_callback_function: This function generates the HTML content of the meta box. It includes a select dropdown with options 1 through 5.

• get_post_meta(): Retrieves the previously saved value of the select field, if any, and displays it below the dropdown.

---

Step 3: Saving Custom Inputs in WooCommerce Order Meta Boxes

To save the data entered in the custom meta box, we'll use the woocommerce_process_shop_order_meta action. This will allow us to update the order meta with the selected value from the dropdown.

add_action(
    'woocommerce_process_shop_order_meta',
    function ( $order_id, $order ) {
        $example_select_field = $_POST['example_select_field'];

        if ( ! empty( $example_select_field ) ) {
            update_post_meta( $order_id, 'example_select_field', sanitize_text_field( $example_select_field ) );
        }
    },
    10,
    2
);

Explanation:

• woocommerce_process_shop_order_meta action: This action is triggered when an order is saved. We use it to save the custom meta box data.

• update_post_meta(): Saves the selected value from the dropdown to the order meta, ensuring it's sanitized with sanitize_text_field().

---

Step 4: Using the WordPress selected() Function

The WordPress selected() function is useful when working with select inputs. It automatically adds the selected attribute to the option that matches the saved value.

function custom_callback_function( $post ) {
    $post_id = $post->get_ID();
    $example_select_field = get_post_meta( $post_id, 'example_select_field', true );

    echo '<select name="example_select_field">';
    echo '<option value="option 1" ' . selected( $example_select_field, 'option 1', false ) . '>Option 1</option>';
    echo '<option value="option 2" ' . selected( $example_select_field, 'option 2', false ) . '>Option 2</option>';
    echo '<option value="option 3" ' . selected( $example_select_field, 'option 3', false ) . '>Option 3</option>';
    echo '<option value="option 4" ' . selected( $example_select_field, 'option 4', false ) . '>Option 4</option>';
    echo '<option value="option 5" ' . selected( $example_select_field, 'option 5', false ) . '>Option 5</option>';
    echo '</select>';

    echo esc_html( $example_select_field );
}

Explanation:

• selected() function: This function compares two values and, if they match, outputs the selected attribute. This makes sure the correct option is pre-selected based on the saved meta value.

• esc_html(): Safely outputs the selected value to avoid potential security risks.

---

Conclusion

By following this tutorial, you've successfully created a custom meta box on the WooCommerce order detail page, added a select input field, saved the input data, and utilized the WordPress selected() function. This customization allows you to extend WooCommerce functionality and tailor the order management process to fit your specific needs.

Feel free to experiment with other input types and further extend the meta box functionality to suit your eCommerce requirements!