Commit 4c7b4495a01 for woocommerce

commit 4c7b4495a0171a223d93c021706bac7a61239edc
Author: Jana Hernandez <71137829+JanaMW27@users.noreply.github.com>
Date:   Tue Jul 28 15:59:12 2026 +0200

    Fix Date and Status columns ignoring Screen Options on small screens (#66242)

diff --git a/plugins/woocommerce/changelog/fix-orders-list-hidden-columns b/plugins/woocommerce/changelog/fix-orders-list-hidden-columns
new file mode 100644
index 00000000000..a037fa93770
--- /dev/null
+++ b/plugins/woocommerce/changelog/fix-orders-list-hidden-columns
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Respect hidden Date and Status columns on the admin orders list below 782px, so the Columns menu (Screen Options) is honored at every screen width.
diff --git a/plugins/woocommerce/client/legacy/css/admin.scss b/plugins/woocommerce/client/legacy/css/admin.scss
index 345bd24d8f3..39c67a7746a 100644
--- a/plugins/woocommerce/client/legacy/css/admin.scss
+++ b/plugins/woocommerce/client/legacy/css/admin.scss
@@ -3618,6 +3618,15 @@ body.woocommerce_page_wc-orders {
 			}
 		}

+		// Hide the small-screen date/status copies when the corresponding column is hidden via Screen Options.
+		&:has( thead th.column-order_date.hidden ) .order_date.small-screen-only {
+			display: none;
+		}
+
+		&:has( thead th.column-order_status.hidden ) .order_status.small-screen-only {
+			display: none;
+		}
+
 	}
 }

diff --git a/plugins/woocommerce/tests/e2e/tests/order/order-list-hidden-columns-small-screen.spec.ts b/plugins/woocommerce/tests/e2e/tests/order/order-list-hidden-columns-small-screen.spec.ts
new file mode 100644
index 00000000000..0895d6eabe0
--- /dev/null
+++ b/plugins/woocommerce/tests/e2e/tests/order/order-list-hidden-columns-small-screen.spec.ts
@@ -0,0 +1,99 @@
+/**
+ * External dependencies
+ */
+import { WC_API_PATH } from '@woocommerce/e2e-utils-playwright';
+
+/**
+ * Internal dependencies
+ */
+import { tags, expect, test } from '../../fixtures/fixtures';
+import { ADMIN_STATE_PATH } from '../../playwright.config';
+
+// A narrow viewport below the 782px breakpoint that shows the duplicated
+// date/status copies inside the order-number cell.
+const SMALL_SCREEN = { width: 480, height: 900 };
+
+test.describe(
+	'WooCommerce Orders > Hidden columns on small screens',
+	{ tag: [ tags.HPOS ] },
+	() => {
+		test.use( { storageState: ADMIN_STATE_PATH } );
+
+		let orderId: number;
+
+		test.beforeAll( async ( { restApi } ) => {
+			// One order is enough to render a row with the copies.
+			await restApi
+				.post( `${ WC_API_PATH }/orders`, { status: 'processing' } )
+				.then( ( response: { data: { id: number } } ) => {
+					orderId = response.data.id;
+				} );
+		} );
+
+		test.afterAll( async ( { restApi } ) => {
+			if ( orderId ) {
+				await restApi.delete( `${ WC_API_PATH }/orders/${ orderId }`, {
+					force: true,
+				} );
+			}
+		} );
+
+		test( 'date/status copies follow the Columns menu below 782px', async ( {
+			page,
+		} ) => {
+			await page.setViewportSize( SMALL_SCREEN );
+			await page.goto( 'wp-admin/admin.php?page=wc-orders' );
+
+			const dateCopy = page
+				.locator(
+					'td.column-order_number .order_date.small-screen-only'
+				)
+				.first();
+			const statusCopy = page
+				.locator(
+					'td.column-order_number .order_status.small-screen-only'
+				)
+				.first();
+
+			// This test verifies the CSS contract of the fix: a small-screen
+			// copy is hidden whenever its real column header carries the
+			// `hidden` class. We toggle that class directly the way WordPress's
+			// Screen Options JS (wp-admin/js/common.js `columns`) does, because
+			// the Screen Options panel toggle is not reliably actionable in
+			// headless CI below 782px, and hiding a column is core behavior we
+			// only react to, not own.
+			const setColumnHidden = ( column: string, hidden: boolean ) =>
+				page.evaluate(
+					( { col, hide } ) => {
+						document
+							.querySelectorAll(
+								`.wp-list-table th.column-${ col }, .wp-list-table td.column-${ col }`
+							)
+							.forEach( ( cell ) =>
+								cell.classList.toggle( 'hidden', hide )
+							);
+					},
+					{ col: column, hide: hidden }
+				);
+
+			// Both copies visible by default (both columns shown).
+			await expect( dateCopy ).toBeVisible();
+			await expect( statusCopy ).toBeVisible();
+
+			// Hide the Date column -> its copy disappears.
+			await setColumnHidden( 'order_date', true );
+			await expect( dateCopy ).toBeHidden();
+			// Status copy is untouched.
+			await expect( statusCopy ).toBeVisible();
+
+			// Re-show the Date column -> its copy returns (both directions).
+			await setColumnHidden( 'order_date', false );
+			await expect( dateCopy ).toBeVisible();
+
+			// Hide the Status column -> its copy disappears.
+			await setColumnHidden( 'order_status', true );
+			await expect( statusCopy ).toBeHidden();
+			await expect( dateCopy ).toBeVisible();
+		} );
+	}
+);