Save custom checkout fields and display them in admin Woocommerce Orders
As a WordPress developer, you may often need to add custom fields to the WooCommerce checkout process to capture additional information from your customers. However, the process of saving these custom fields and displaying them in the admin order pages can be a bit tricky. In this blog post, we'll walk you through the proper way to handle this task.
Adding Custom Checkout Fields
Let's start by adding the custom checkout fields to the WooCommerce checkout process. We'll use the woocommerce_before_order_notes
action hook to insert our custom fields:
add_action('woocommerce_before_order_notes', 'add_checkout_custom_text_fields', 20, 1);
function add_checkout_custom_text_fields($checkout) {
$index = 0;
// Loop through cart items
foreach (WC()->cart->get_cart() as $cart_item) {
$index++;
// Loop through each unit related to item quantity
for ($i = 1; $i <= $cart_item['quantity']; $i++) {
woocommerce_form_field("my_field[$index][$i]", array(
'type' => 'text',
'class' => array('my-field-class form-row-wide'),
'label' => __('My Field') . " (item $index - $i)",
'placeholder' => __('Please enter your data'),
), $checkout->get_value("my_field[$index][$i]"));
}
}
}
In this code, we're creating a custom text field for each unit of each item in the customer's cart. The field names will be structured as my_field[{index}][{i}]
, where {index}
represents the index of the cart item, and {i}
represents the index of the unit for that item.
Saving Custom Checkout Fields
Now that we've added the custom fields to the checkout, we need to save the customer-entered data in the order metadata. We'll use the woocommerce_checkout_create_order
action hook for this:
add_action('woocommerce_checkout_create_order', 'save_custom_fields_to_order_meta_data', 20, 2);
function save_custom_fields_to_order_meta_data($order, $data) {
$index = 0;
// Loop through order items
foreach ($order->get_items() as $item) {
$index++;
// Loop through each unit related to item quantity
for ($i = 1; $i <= $item->get_quantity(); $i++) {
if (isset($_POST['my_field'][$index][$i]) && !empty($_POST['my_field'][$index][$i])) {
$order->update_meta_data('_my_field_' . $index . '_' . $i, esc_attr($_POST['my_field'][$index][$i]));
}
}
}
}
In this code, we're looping through the order items and their quantities, and for each one, we're checking if the corresponding custom field value was submitted. If so, we're saving it to the order metadata using the update_meta_data()
method of the WC_Order
class.
Displaying Custom Checkout Fields in the Admin Order Page
The final step is to display the saved custom field values in the admin order edit page. We'll use the woocommerce_admin_order_data_after_billing_address
action hook to add our custom content:
add_action('woocommerce_admin_order_data_after_billing_address', 'display_custom_fields_in_admin_order', 20, 1);
function display_custom_fields_in_admin_order($order) {
$index = 0;
// Loop through order items
foreach ($order->get_items() as $item) {
$index++;
// Loop through each unit related to item quantity
for ($i = 1; $i <= $item->get_quantity(); $i++) {
$my_field = get_post_meta($order->get_id(), '_my_field_' . $index . '_' . $i, true);
if (!empty($my_field)) {
echo '<p><strong>' . __('My Field') . " <em>(item $index - $i)</em>" . ':</strong> ' . $my_field . '</p>';
}
}
}
}
In this code, we're again looping through the order items and their quantities, and for each one, we're retrieving the corresponding custom field value from the order metadata using the get_post_meta()
function. If the value is not empty, we're displaying it in the admin order edit page.
Conclusion
By following the steps outlined in this blog post, you can successfully save custom checkout fields and display them in the admin order edit pages of your WooCommerce-powered website. This will provide your customers with a more tailored checkout experience, and give you valuable additional information about their orders.
If you're looking for a more comprehensive solution to optimize your website's conversion rates, I'd recommend checking out Flowpoint.ai. Flowpoint uses AI to analyze your website's user behavior and provide actionable recommendations to improve your conversion rates, including technical, UX/UI, and content-related suggestions
Get a Free AI Website Audit
Automatically identify UX and content issues affecting your conversion rates with Flowpoint's comprehensive AI-driven website audit.