WooCommerce我的账户查看订单页：按订单状态控制商品元数据显隐

直接用CSS全局隐藏wc-item-meta会覆盖所有场景，无法区分订单状态和页面，因此需要结合PHP逻辑实现条件控制，以下是两种可行方案：

方案一：通过PHP过滤器精准控制元数据输出（推荐） #

此方法会直接拦截待处理订单的元数据HTML输出，彻底隐藏内容，适用于不希望用户通过源代码查看元数据的场景。

将以下代码添加到主题的functions.php文件或自定义插件中：

add_filter( 'woocommerce_order_item_meta_display', 'hide_pending_order_item_meta', 10, 3 );
function hide_pending_order_item_meta( $html, $item, $args ) {
    // 仅针对「我的账户>查看订单」页面
    if ( is_wc_endpoint_url( 'view-order' ) ) {
        $order = $item->get_order();
        // 订单状态为pending时，返回空字符串隐藏元数据
        if ( $order && $order->has_status( 'pending' ) ) {
            return '';
        }
    }
    // 其他场景（完成状态的订单页、结账确认页、邮件）正常输出
    return $html;
}

代码说明： #

• 利用woocommerce_order_item_meta_display过滤器拦截商品元数据的输出内容
• is_wc_endpoint_url('view-order')判断当前是否处于「我的账户>查看订单」页面
• 通过$order->has_status('pending')检查订单状态，待处理状态下返回空值隐藏元数据
• 订单完成时的查看页、结账确认页、邮件场景不受影响，元数据正常显示

方案二：添加订单状态类配合CSS隐藏（视觉隐藏） #

此方法仅在视觉上隐藏元数据，HTML代码仍会输出，适合快速实现视觉隐藏需求的场景。

步骤1：添加订单状态类到订单容器 #

将以下PHP代码添加到主题functions.php或自定义插件：

add_filter( 'woocommerce_order_class', 'add_order_status_to_order_class', 10, 3 );
function add_order_status_to_order_class( $classes, $order, $has_actions ) {
    if ( is_wc_endpoint_url( 'view-order' ) ) {
        // 给订单容器添加订单状态类，例如order-pending
        $classes[] = 'order-' . $order->get_status();
    }
    return $classes;
}

步骤2：添加CSS规则 #

将以下CSS添加到主题自定义CSS或样式文件：

/* 仅在我的账户查看订单页，隐藏pending状态订单的商品元数据 */
.woocommerce-MyAccount-content.order-pending .wc-item-meta {
    display: none;
}

代码说明： #

• PHP代码给「查看订单」页面的订单容器添加了订单状态对应的类
• CSS通过精准的选择器，仅隐藏待处理订单的商品元数据，其他场景保持显示

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