Search code examples
phpwordpresswoocommercehook-woocommerceorders

Add <HTML> to order-status column in WooCommerce "My account" orders table

I want to style the content of some order columns in the list of orders (My Account area). The problem is, that every content starts without any elements which I could use for styling.

For example: I want to give the order status a background color like a badge. At the moment the status is the only content in the column. Like this:

<td class="woocommerce-orders-table__cell woocommerce-orders-table__cell-order-status" data-title="Status">
    Completed
</td>

I want to change it to this:

<td class="woocommerce-orders-table__cell woocommerce-orders-table__cell-order-status" data-title="Status">
    <span class="badge badge-success">Completed</span>
</td>

The class is an option. I could also style the simple <span> based on he class of the <td>.

Is there any way to change the output of the columns without touching the template file? It's a very crucial template and I don't want to change it for such a simple addition.

In the template I saw this action before the content of each column:

<?php if ( has_action( 'woocommerce_my_account_my_orders_column_' . $column_id ) ) : ?>

Is there a way to use it?

Solution

  • That is indeed the correct way, use the column id 'order-status' in this case

    woocommerce_my_account_my_orders_column_{$column_id}

    function my_callback( $order ) {
    echo '<span class="badge badge-success">' . esc_html( wc_get_order_status_name( $order->get_status() ) ) . '</span>';
}
add_action( 'woocommerce_my_account_my_orders_column_order-status', 'my_callback', 10, 1 );