Commit 9d019d50d98 for woocommerce
commit 9d019d50d98fe9cd1d9d7e13fbb3a5630f1e5a7b
Author: Oleksandr Aratovskyi <79862886+oaratovskyi@users.noreply.github.com>
Date: Tue Jun 30 23:41:33 2026 +0300
Fix oversized heading on offline payment settings pages (#66044)
* Fix oversized heading on offline payment settings pages
The offline payment settings header — the page title on the offline
methods list and on each gateway's settings page — renders as an inline
<h1.woocommerce-layout__header-heading> in the page content, not inside
the floating header. PR #64885 consolidated heading typography into the
`.woocommerce-layout__header`-scoped rule and dropped the per-page size
overrides, so this inline title stopped matching any size rule and fell
back to the default wp-admin h1 (23px), including its 9px top padding.
Set font-size/weight explicitly (16px/500) and trim the top padding to
4px so the title is correctly sized and vertically centred against the
back button.
* Add changelog entry for offline payments header fix
* Fix offline payments header to match shared settings typography
The shared settings header was reduced to 15px / 500 / 24px / $gray-900
in trunk (#64885), but this offline override still restated the older
16px / 38px / #3c434a values, so the heading drifted from the other
settings headers after merging trunk. Restate the current shared values
and move line-height onto the title span so both offline pages render in
lockstep with the floating Payments settings header.
Refs WOOPRD-3552
diff --git a/plugins/woocommerce/changelog/fix-wooprd-3552-offline-payments-header-font-size b/plugins/woocommerce/changelog/fix-wooprd-3552-offline-payments-header-font-size
new file mode 100644
index 00000000000..87cd6b6df65
--- /dev/null
+++ b/plugins/woocommerce/changelog/fix-wooprd-3552-offline-payments-header-font-size
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix oversized heading on the offline payment settings pages by setting the header font size explicitly instead of relying on the floating-header-scoped rule.
diff --git a/plugins/woocommerce/client/admin/client/settings-payments/settings-payments-main.scss b/plugins/woocommerce/client/admin/client/settings-payments/settings-payments-main.scss
index 73739d7c358..9edacad996f 100644
--- a/plugins/woocommerce/client/admin/client/settings-payments/settings-payments-main.scss
+++ b/plugins/woocommerce/client/admin/client/settings-payments/settings-payments-main.scss
@@ -531,10 +531,18 @@
h1 {
padding-left: $gap-smaller * 2;
- // This is the same as the Payments settings header.
- // This is used to keep the UI consistent across when navigating to the offline payments settings page.
- line-height: 38px;
- color: #3c434a;
+ // This heading renders outside the floating header, so the shared
+ // header typography doesn't reach it — restate it to match the other
+ // settings headers. padding-top trims wp-admin's default h1 padding
+ // so the title centers against the back button.
+ padding-top: 4px;
+ font-size: 15px;
+ font-weight: 500;
+ color: $gray-900;
+
+ .woocommerce-settings-payments-header__title {
+ line-height: 24px;
+ }
}
}
}