Customize completely WooCommerce My account Orders section

Question

Basically, I am trying to change the WooCommerce My account Orders section. I have been able to do so changes:

Screenshot 1, is the result I am getting.

Screenshot 2, is the desired result I want:

Here I found in wc-accounts-function.php file the following related:

/**
 * Get My Account > Orders columns.
 *
 * @since 2.6.0
 * @return array
 */
function wc_get_account_orders_columns() {
    $columns = apply_filters(
        'woocommerce_account_orders_columns',
        array(
            'order-number'  => __( 'Order', 'woocommerce' ),
            'order-date'    => __( 'Date', 'woocommerce' ),
            'order-status'  => __( 'Status', 'woocommerce' ),
            'order-total'   => __( 'Total', 'woocommerce' ),
            'order-actions' => __( 'Actions', 'woocommerce' ),
        )
    );

    // Deprecated filter since 2.6.0.
    return apply_filters( 'woocommerce_my_account_my_orders_columns', $columns );
}

Moreover I also found another piece of code that is i guess defining the fuctionality in the file my-orders.php:

<?php elseif ( 'order-number' === $column_id ) : ?>
    <a href="<?php echo esc_url( $order->get_view_order_url() ); ?>">
        <?php echo _x( '#', 'hash before order number', 'woocommerce' ) . $order->get_order_number(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
    </a>

<?php elseif ( 'order-date' === $column_id ) : ?>
    <time datetime="<?php echo esc_attr( $order->get_date_created()->date( 'c' ) ); ?>"><?php echo esc_html( wc_format_datetime( $order->get_date_created() ) ); ?></time>

<?php elseif ( 'order-status' === $column_id ) : ?>
    <?php echo esc_html( wc_get_order_status_name( $order->get_status() ) ); ?>

<?php elseif ( 'order-total' === $column_id ) : ?>
    <?php
    /* translators: 1: formatted order total 2: total order items */
    printf( _n( '%1$s for %2$s item', '%1$s for %2$s items', $item_count, 'woocommerce' ), $order->get_formatted_order_total(), $item_count ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
    ?>

<?php elseif ( 'order-actions' === $column_id ) : ?>
    <?php
    $actions = wc_get_account_orders_actions( $order );

But I can't get the desired output for the things that I need:

• Date and Time
• First Name
• Email
• Total amount

I am using last WooCommerce version with the DIVI theme.

Any help will be highly appreciated.

Answer 1

You don't need to edit the template files to change the My Account Orders section.

First to edit the My Account > Orders menu you will use the following:

add_filter( 'woocommerce_account_orders_columns', 'custom_account_orders_columns' );
function custom_account_orders_columns( $columns ) {
    return array(
        'date-time'         => __( 'Date time', 'woocommerce' ),
        'billing-name'      => __( 'Name', 'woocommerce' ),
        'billing-email'     => __( 'Email', 'woocommerce' ),
        'total-order'       => __( 'Total', 'woocommerce' ),
        'order-actions'     => __( 'Actions', 'woocommerce' ),
    );
}

Then for the new columns content, we will use the following hooked functions:

add_action( 'woocommerce_my_account_my_orders_column_date-time', 'my_account_orders_column_date_time' );
function my_account_orders_column_date_time( $order ) {
    echo $order->get_date_created()->format('Y-m-d H:i:s');
}

add_action( 'woocommerce_my_account_my_orders_column_billing-name', 'my_account_orders_column_billing_name' );
function my_account_orders_column_billing_name( $order ) {
    echo $order->get_billing_first_name();
}

add_action( 'woocommerce_my_account_my_orders_column_billing-email', 'my_account_orders_column_billing_email' );
function my_account_orders_column_billing_email( $order ) {
    echo $order->get_billing_email();
}

add_action( 'woocommerce_my_account_my_orders_column_total-order', 'my_account_orders_column_total_order' );
function my_account_orders_column_total_order( $order ) {
    echo wc_price($order->get_total());
}

The code goes in the functions.php file of your child theme (or in a plugin).

You will get something like: