Commit 2d2ece64ca6 for woocommerce
commit 2d2ece64ca6bb1164d80695c3265dc8539b0fa78
Author: Ann <annchichi@users.noreply.github.com>
Date: Wed Apr 29 00:19:46 2026 +0800
Align Product / Coupon Data panel labels and help-tips with 40px inputs (WP 7.0) (#64327)
Align Product/Coupon Data panel labels and help-tips with 40px inputs
diff --git a/plugins/woocommerce/changelog/tweak-product-coupon-data-label-align-wp7 b/plugins/woocommerce/changelog/tweak-product-coupon-data-label-align-wp7
new file mode 100644
index 00000000000..9cea86f78c4
--- /dev/null
+++ b/plugins/woocommerce/changelog/tweak-product-coupon-data-label-align-wp7
@@ -0,0 +1,4 @@
+Significance: patch
+Type: tweak
+
+Vertically centre Product / Coupon Data panel labels and help-tip icons with 40px inputs on WordPress 7.0.
diff --git a/plugins/woocommerce/client/legacy/css/admin.scss b/plugins/woocommerce/client/legacy/css/admin.scss
index 79c13d6056c..68e82de4a2e 100644
--- a/plugins/woocommerce/client/legacy/css/admin.scss
+++ b/plugins/woocommerce/client/legacy/css/admin.scss
@@ -8644,6 +8644,26 @@ table.bar_chart {
#wc-shipping-zone-region-picker-root .woocommerce-tree-select-control .components-base-control {
border-radius: 2px;
}
+
+ // Product / Coupon Data panel labels: vertically centre with 40px inputs.
+ // Skip checkbox and radio rows — their controls are ~16px, so the taller
+ // line-height pushes the label below them instead of aligning with it.
+ .woocommerce_options_panel .form-field:not(:has(input[type="checkbox"], input[type="radio"])) label,
+ .woocommerce_options_panel .form-field:not(:has(input[type="checkbox"], input[type="radio"])) legend {
+ line-height: 40px;
+ }
+
+ // Help-tip icon: vertical-align middle aligns to text baseline, not line-box middle,
+ // so it lands near the top of the 40px row. Push down to visual centre — but
+ // skip checkbox/radio rows, whose inputs are still ~16px and don't need the offset.
+ .woocommerce_options_panel .form-field:not(:has(input[type="checkbox"], input[type="radio"])) .woocommerce-help-tip {
+ margin-top: 12px;
+ }
+
+ // Checkbox/radio rows: small nudge so the help-tip visually centres with the control.
+ .woocommerce_options_panel .form-field:has(input[type="checkbox"], input[type="radio"]) .woocommerce-help-tip {
+ margin-bottom: 3px;
+ }
}
/**