How to Add a Custom Row in the WooCommerce Order Edit Page After the Customer Address
As a WooCommerce store owner, you may sometimes need to add custom information or functionality to the order edit page in the WordPress admin area. One common requirement is to add a new row or section after the customer address details, allowing you to display additional information or provide extra functionality related to the order.
Fortunately, WooCommerce provides a handy hook that makes this task relatively simple. In this article, we'll explore how to use the woocommerce_admin_order_data_after_shipping_address
action hook to add a custom row in the order edit page after the customer address.
Understanding the woocommerce_admin_order_data_after_shipping_address
Hook
The woocommerce_admin_order_data_after_shipping_address
action hook is a powerful tool that allows you to add custom content or functionality to the order edit page in the WooCommerce admin area. This hook is specifically designed to insert content after the customer's shipping address information, providing a convenient place to add your own custom section.
Here's the basic structure of the hook:
add_action( 'woocommerce_admin_order_data_after_shipping_address', 'admin_custom_row_after_order_addresses', 10, 1 );
function admin_custom_row_after_order_addresses( $order ) {
// Your custom code goes here
}
The admin_custom_row_after_order_addresses
function is where you'll place your custom code to be displayed in the new row or section. The $order
parameter passed to the function represents the current order object, which you can use to retrieve and display relevant order-related information.
Adding a Custom Row with a Title and Paragraph
Let's start with a simple example of adding a custom row with a title and a paragraph of text. Here's the code you can use:
add_action( 'woocommerce_admin_order_data_after_shipping_address', 'admin_custom_row_after_order_addresses', 10, 1 );
function admin_custom_row_after_order_addresses( $order ) {
?>
</div></div>
<div class="clear"></div>
<!-- new custom section row -->
<div class="order_data_column_container">
<div class="order_data_column_wide">
<h3><?php _e("My Custom row title"); ?></h3>
<!-- custom row paragraph -->
<p><?php
_e("Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.");
?></p>
<?php
}
Here's how this code works:
- The
add_action
function hooks the admin_custom_row_after_order_addresses
function to the woocommerce_admin_order_data_after_shipping_address
action hook.
- Inside the
admin_custom_row_after_order_addresses
function, we use a series of HTML tags to create a new section with a title and a paragraph of text.
- The
<div class="order_data_column_container">
and <div class="order_data_column_wide">
elements ensure that the custom row is styled and positioned correctly within the order edit page.
- The
<h3>
tag is used to display the custom row title, and the <p>
tag is used to display the custom paragraph of text.
When you add this code to your theme's functions.php
file (or a custom plugin), you'll see a new section with the title "My Custom row title" and the accompanying paragraph of text added to the order edit page, right after the customer's shipping address.
Displaying Order-Specific Information
In the previous example, we used static text for the custom row's title and paragraph. However, you can also use order-specific information to make the custom row more relevant and useful. Here's an example of how to display the order's total amount and the number of items in the order:
add_action( 'woocommerce_admin_order_data_after_shipping_address', 'admin_custom_row_after_order_addresses', 10, 1 );
function admin_custom_row_after_order_addresses( $order ) {
$order_total = $order->get_total();
$order_item_count = $order->get_item_count();
?>
</div></div>
<div class="clear"></div>
<!-- new custom section row -->
<div class="order_data_column_container">
<div class="order_data_column_wide">
<h3><?php _e("Order Details"); ?></h3>
<!-- custom row paragraph -->
<p><?php
printf( __("This order has a total of %s and %s items."), wc_price($order_total), $order_item_count );
?></p>
<?php
}
In this updated example, we use the $order
object to retrieve the order's total amount ($order->get_total()
) and the number of items in the order ($order->get_item_count()
). We then display this information in the custom row's paragraph using the printf
function and the wc_price
function to format the order total.
By using order-specific data, you can create a more dynamic and informative custom row that provides valuable information to the store admin directly within the order edit page.
Enhancing the Custom Row with Additional Functionality
The woocommerce_admin_order_data_after_shipping_address
hook can also be used to add more advanced functionality to the custom row, such as:
- Displaying Custom Order Meta: You can use the
$order
object to retrieve and display any custom order meta data that you've associated with the order.
- Offering Additional Actions: You can add buttons, links, or other interactive elements that allow the store admin to perform additional actions related to the order.
- Integrating with Other Plugins: If your store uses other WooCommerce-compatible plugins, you can leverage the custom row to display information or provide functionality related to those plugins.
Here's an example of how you could add a button to the custom row that allows the store admin to generate a PDF invoice for the order:
add_action( 'woocommerce_admin_order_data_after_shipping_address', 'admin_custom_row_after_order_addresses', 10, 1 );
function admin_custom_row_after_order_addresses( $order ) {
$order_total = $order->get_total();
$order_item_count = $order->get_item_count();
?>
</div></div>
<div class="clear"></div>
<!-- new custom section row -->
<div class="order_data_column_container">
<div class="order_data_column_wide">
<h3><?php _e("Order Details"); ?></h3>
<!-- custom row paragraph -->
<p><?php
printf( __("This order has a total of %s and %s items."), wc_price($order_total), $order_item_count );
?></p>
<!-- custom row action button -->
<p>
<a href="<?php echo admin_url('admin-ajax.php?action=generate_pdf_invoice&order_id=' . $order->get_id()); ?>" class="button">Generate PDF Invoice</a>
</p>
<?php
}
In this example, we've added a link that, when clicked, will trigger an AJAX request to generate a PDF invoice for the current order. You can expand on this functionality by adding the necessary server-side code to handle the AJAX request and generate the PDF invoice.
By leveraging the woocommerce_admin_order_data_after_shipping_address
hook, you can enhance the order edit page with custom information and functionality that can greatly improve the efficiency and productivity of your store's admin users.
Conclusion
In this article, we've explored how to use the woocommerce_admin_order_data_after_shipping_address
action hook to add a custom row in the WooCommerce order edit page after the customer address. We've provided examples of how to display a simple title and paragraph, as well as how to incorporate order-specific information and additional functionality.
By customizing the order edit page in this way, you can provide your store's admin users with valuable information and tools directly within the context of the order management process. This can lead to improved efficiency, better decision-making, and an overall enhanced user experience for your store's backend.
If you're looking to identify and fix technical issues that are impacting your website's conversion rates, be sure to check out Flowpoint.ai. Flowpoint's AI-powered analytics and recommendations can help you uncover and address the technical problems that are hindering your site's performance.
Get a Free AI Website Audit
Automatically identify UX and content issues affecting your conversion rates with Flowpoint's comprehensive AI-driven website audit.