Adding row numbers and distinguishing lines of order items to the order editing page in WooCommerce for a better order editing experience

better-order-editing-page.php

<?php
/**
 * Add row numbers to order items in admin edit order page
 */
function ywp_better_admin_order_editing_items() {
	$current_screen = get_current_screen();

	if ( empty( $current_screen ) || ! property_exists( $current_screen, 'id' ) ) {
		return;
	}

	if ( 'shop_order' !== $current_screen->id ) {
		return;
	}

	echo '<style>
            #woocommerce-order-items .woocommerce_order_items_wrapper table.woocommerce_order_items {
			  counter-reset: rowNumber;
			}
			
			#woocommerce-order-items .woocommerce_order_items_wrapper table.woocommerce_order_items #order_line_items tr {
			  counter-increment: rowNumber;
			}
			
			#woocommerce-order-items .woocommerce_order_items_wrapper table.woocommerce_order_items #order_line_items tr:nth-child(even) {
			  background: #f8f8f8;
			}
			
			#woocommerce-order-items .woocommerce_order_items_wrapper table.woocommerce_order_items #order_line_items tr td:first-child::before {
			  content: counter(rowNumber);
			  width: 17px;
			  margin-right: 0.5em;
			  position: absolute;
			  z-index: 1;
			  right: -3px;
			  margin-top: 10px;
			  text-align: center;
			  border-radius: 50%;
			  background: #eae9e9;
			  padding: 2px 2px 0;
			  border: 1px solid #ccc;
			}
			
			body:not(.rtl) #woocommerce-order-items .woocommerce_order_items_wrapper table.woocommerce_order_items #order_line_items tr td:first-child::before {
			  margin-left: 0.5em;
			  left: -3px;
			}
        </style>';
}

add_action( 'admin_head', 'ywp_better_admin_order_editing_items' );