Woocommerce自定义页面如何展示当前用户订单并自定义展示结构

优先实现方式：直接覆盖模板文件重写循环 #

WooCommerce支持模板重载，你只需将wp-content/plugins/woocommerce/templates/myaccount/orders.php复制到当前主题目录的woocommerce/myaccount/orders.php路径，直接修改该文件内的循环结构即可，完全可以删掉原生的列循环逻辑，自己写左右分栏的HTML结构，不需要受原生表格/列逻辑限制。

订单字段直接调用方法（无需依赖原生列钩子） #

所有订单信息都可以通过$order对象直接调用，和你调用$product方法的逻辑完全一致，常用字段调用方式如下：

• 订单号：$order->get_order_number()
• 订单详情页链接：$order->get_view_order_url()
• 订单创建日期：wc_format_datetime( $order->get_date_created() )
• 订单状态文本：wc_get_order_status_name( $order->get_status() )
• 格式化订单总价：$order->get_formatted_order_total()
• 有效商品数量（扣除已退款商品）：$order->get_item_count() - $order->get_item_count_refunded()
• 订单操作按钮：wc_get_account_orders_actions( $order)
• 订单商品缩略图获取方式：

foreach( $order->get_items() as $item ) {
    $product = $item->get_product();
    if( $product ) {
        // 括号内可自定义图片尺寸，比如'thumbnail'、'woocommerce_thumbnail'
        echo $product->get_image( 'woocommerce_thumbnail' );
    }
    break; // 只显示第一个商品缩略图就保留此行，多个商品显示就删除
}

• 自定义订单元数据：get_post_meta( $order->get_id(), '你的自定义字段key', true )

自定义左右分栏结构示例代码 #

可以直接替换原模板里的循环部分，以下是已经拆分左右容器的完整循环代码：

foreach ( $customer_orders->orders as $customer_order ) {
    $order = wc_get_order( $customer_order );
    $item_count = $order->get_item_count() - $order->get_item_count_refunded();
?>
<div class="order-item-wrapper woocommerce-orders-table__row--status-<?php echo esc_attr( $order->get_status() ); ?>">
    <!-- 左侧容器：缩略图+订单号 -->
    <div class="order-left-col">
        <div class="order-thumb">
            <?php 
            foreach( $order->get_items() as $item ) {
                $product = $item->get_product();
                if( $product ) {
                    echo $product->get_image( 'woocommerce_thumbnail' );
                }
                break;
            }
            ?>
        </div>
        <div class="order-number">
            <a href="<?php echo esc_url( $order->get_view_order_url() ); ?>">
                <?php echo esc_html( '#' . $order->get_order_number() ); ?>
            </a>
        </div>
    </div>

    <!-- 右侧容器：其余所有元数据 -->
    <div class="order-right-col">
        <div class="order-date">
            <time datetime="<?php echo esc_attr( $order->get_date_created()->date( 'c' ) ); ?>">
                <?php echo esc_html( wc_format_datetime( $order->get_date_created() ) ); ?>
            </time>
        </div>
        <div class="order-status">
            <?php echo esc_html( wc_get_order_status_name( $order->get_status() ) ); ?>
        </div>
        <div class="order-total">
            <?php echo wp_kses_post( sprintf( _n( '%1$s 共 %2$s 件商品', '%1$s 共 %2$s 件商品', $item_count, 'woocommerce' ), $order->get_formatted_order_total(), $item_count ) ); ?>
        </div>
        <div class="order-custom-meta">
            <?php echo get_post_meta( $order->get_id(), '你的自定义字段key', true ); ?>
        </div>
        <div class="order-actions">
            <?php
            $actions = wc_get_account_orders_actions( $order );
            if ( ! empty( $actions ) ) {
                foreach ( $actions as $key => $action ) {
                    echo '<a href="' . esc_url( $action['url'] ) . '" class="woocommerce-button button ' . sanitize_html_class( $key ) . '">' . esc_html( $action['name'] ) . '</a>';
                }
            }
            ?>
        </div>
    </div>
</div>
<?php
}

注意：你原代码里的esc_atdiv是笔误，正确的转义函数是esc_attr，注意替换所有错误写法。

内容的提问来源于stack exchange，提问作者libertarian