Commit 7bed1ec3660 for woocommerce
commit 7bed1ec36608136d2a5f9b707479317273cf13ec
Author: Darren Ethier <darren@roughsmootheng.in>
Date: Mon Mar 30 10:12:53 2026 -0400
[WOOPRD-3157] Fix labels not vertically aligned on settings pages on WP 7.0 (#63812)
* Fix settings page label vertical alignment on WP 7.0
WordPress 7.0 increased form element min-height from 30px to 40px,
causing labels in table.form-table th on WooCommerce settings pages
to sit too high relative to their adjacent fields.
Add wc-wp-version-gte-70 body class following the existing pattern
for WP 5.3+ and 5.5+, and increase th padding-top from 20px to 25px
to vertically centre labels with the taller fields.
* Remove duplicate wc-wp-version-gte-70 class addition
The loop already adds this class via the $version_classes map.
The standalone block was a leftover from the pre-merge commit.
---------
Co-authored-by: Agent <agent@woocommerce.com>
Co-authored-by: Brandon Kraft <public@brandonkraft.com>
diff --git a/plugins/woocommerce/changelog/fix-settings-labels-alignment-wp70 b/plugins/woocommerce/changelog/fix-settings-labels-alignment-wp70
new file mode 100644
index 00000000000..3a2c56b8969
--- /dev/null
+++ b/plugins/woocommerce/changelog/fix-settings-labels-alignment-wp70
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix settings page label vertical alignment on WordPress 7.0 where increased form element height caused labels to sit too high relative to their fields.
diff --git a/plugins/woocommerce/client/legacy/css/admin.scss b/plugins/woocommerce/client/legacy/css/admin.scss
index 7f6e086de07..708be047ac7 100644
--- a/plugins/woocommerce/client/legacy/css/admin.scss
+++ b/plugins/woocommerce/client/legacy/css/admin.scss
@@ -8286,6 +8286,11 @@ table.bar_chart {
* WP 7.0 increased default form element sizing from 30px to 40px min-height.
*/
.wc-wp-version-gte-70 {
+ // Settings page labels: vertically centre with taller WP 7.0 fields.
+ .woocommerce table.form-table th {
+ padding-top: 25px;
+ }
+
// Colour picker swatch: match WP 7.0 input height (40px).
.woocommerce table.form-table .colorpickpreview {
height: 40px;