Commit 8fc7cafab81 for woocommerce
commit 8fc7cafab81c6854d833a7ffe1a298610d30b901
Author: Thomas Roberts <5656702+opr@users.noreply.github.com>
Date: Tue Mar 24 09:51:27 2026 +0000
Fix styling issues with WordPress 7.0 (#63779)
diff --git a/plugins/woocommerce/changelog/fix-7.0-issues b/plugins/woocommerce/changelog/fix-7.0-issues
new file mode 100644
index 00000000000..64089aaf659
--- /dev/null
+++ b/plugins/woocommerce/changelog/fix-7.0-issues
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix styling issues with WP 7.0
diff --git a/plugins/woocommerce/client/legacy/css/admin.scss b/plugins/woocommerce/client/legacy/css/admin.scss
index 89a036e870c..4631b1354f9 100644
--- a/plugins/woocommerce/client/legacy/css/admin.scss
+++ b/plugins/woocommerce/client/legacy/css/admin.scss
@@ -8281,6 +8281,177 @@ table.bar_chart {
}
}
+/**
+ * WP 7.0+ compatibility.
+ * WP 7.0 increased default form element sizing from 30px to 40px min-height.
+ */
+.wc-wp-version-gte-70 {
+ // Select2 single: match WP 7.0 native select height (40px).
+ .select2-container {
+ .select2-selection--single {
+ height: 40px; // Match WP 7.0 native select height.
+ border-radius: 2px; // Match WP 7.0 native select border-radius.
+
+ .select2-selection__rendered {
+ line-height: 38px;
+ }
+
+ .select2-selection__arrow {
+ height: 38px;
+ }
+ }
+
+ .select2-selection--multiple {
+ min-height: 40px;
+ height: 38px;
+
+ .select2-selection__rendered li {
+ margin-top: 0; // Prevent extra spacing inside multi-select.
+ }
+ }
+
+ .select2-search--inline .select2-search__field {
+ min-height: 38px;
+ }
+ }
+
+ // Table action icon buttons: prevent WP 7.0 min-height from stretching them.
+ .widefat {
+ .column-wc_actions {
+ a.button {
+ min-height: 0 !important;
+ line-height: 1 !important;
+
+ &::after {
+ line-height: 1.85;
+ margin-top: 0;
+ }
+ }
+ }
+ }
+
+ // Order preview action buttons.
+ .wc-order-preview footer {
+ .button.button-large {
+ min-height: 0;
+ }
+ }
+
+ // Action button groups.
+ .wc-action-button-group .wc-action-button {
+ min-height: 0 !important;
+ }
+
+ // Order actions: select + button overflow container due to WP 7.0 select margins.
+ .order_actions #actions select {
+ width: calc(100% - 32px);
+ }
+
+ // Order actions reload button: icon line-height must match WP 7.0 button height.
+ .button.wc-reload {
+ &::after {
+ line-height: 40px;
+ }
+ }
+
+ // Order actions button margin causes overflow with WP 7.0 sizing.
+ #poststuff #woocommerce-order-actions .inside button {
+ margin: 0;
+ }
+
+ // Order date hour/minute inputs: WP 7.0 padding pushes stepper controls inward.
+ #order_data .order_data_column .form-field-wide {
+ input.hour,
+ input.minute {
+ padding-right: 0;
+ }
+ }
+
+ // Publish box: WP 7.0 flex-row breaks layout when #duplicate-action is present.
+ // Revert to block + float to stack copy/trash links on the left, button on the right.
+ #major-publishing-actions {
+ display: block;
+ overflow: hidden;
+
+ #delete-action {
+ float: left;
+ }
+ }
+
+ // Product data panel labels: vertically center with taller WP 7.0 inputs.
+ .woocommerce_options_panel p.form-field label,
+ .woocommerce_options_panel fieldset.form-field label,
+ .woocommerce_options_panel fieldset.form-field legend {
+ padding-top: 8px;
+ }
+
+ // Help tips: vertically center with taller WP 7.0 inputs.
+ .woocommerce_options_panel .form-field .woocommerce-help-tip {
+ margin-top: 12px;
+ }
+
+ // Search box select: match WP 7.0 compact search-box sizing (32px).
+ .search-box select {
+ min-height: 32px;
+ line-height: 2.14285714; /* 30px for 32px height */
+ padding: 0 24px 0 8px;
+ }
+
+ // Short inputs are wider to compensate for WP 7.0 increased padding.
+ .woocommerce_options_panel {
+ .short,
+ input[type="text"].short,
+ input[type="number"].short,
+ input[type="email"].short,
+ input[type="password"].short {
+ width: 55%;
+ }
+
+ input[type="number"] {
+ padding-right: 0; // Keep stepper controls flush right.
+ }
+
+ .dimensions_field .wrap {
+ width: 55%; // Wider to compensate for increased padding.
+ border-radius: 2px; // Match WP 7.0 input border-radius.
+ }
+ }
+
+ // Variable product selects need more height to accommodate WP 7.0 padding.
+ #variable_product_options .form-row select {
+ height: 50px;
+ }
+
+ // Variable product low stock row: clear preceding floats to prevent vertical stretching.
+ #variable_product_options .form-row[class*="variable_low_stock_amount"] {
+ clear: both;
+ }
+}
+
+// Tablenav: WP 7.0 tablenav uses compact 32px sizing for native selects.
+// Match Select2 to 32px here (not the global 40px).
+// These page classes are on the body alongside wc-wp-version-gte-70, so use compound selectors.
+.wc-wp-version-gte-70.woocommerce_page_wc-customer-stock-notifications .tablenav,
+.wc-wp-version-gte-70.woocommerce_page_wc-orders .tablenav,
+.wc-wp-version-gte-70.post-type-product .tablenav,
+.wc-wp-version-gte-70.post-type-shop_order .tablenav {
+ .select2-container {
+ margin-top: 0; // Align with other tablenav elements.
+ }
+
+ .select2-container .select2-selection--single {
+ height: 32px; // WP 7.0 tablenav uses compact 32px, not 40px.
+
+ .select2-selection__rendered {
+ line-height: 30px;
+ }
+
+ .select2-selection__arrow {
+ height: 30px;
+ }
+ }
+}
+
/**
* Select2 colors for built-in admin color themes.
*/
diff --git a/plugins/woocommerce/includes/admin/class-wc-admin.php b/plugins/woocommerce/includes/admin/class-wc-admin.php
index da9cc97febb..829c938b72d 100644
--- a/plugins/woocommerce/includes/admin/class-wc-admin.php
+++ b/plugins/woocommerce/includes/admin/class-wc-admin.php
@@ -409,22 +409,27 @@ class WC_Admin {
* @return string
*/
public function include_admin_body_class( $classes ) {
- if ( in_array( array( 'wc-wp-version-gte-53', 'wc-wp-version-gte-55' ), explode( ' ', $classes ), true ) ) {
+ $raw_version = get_bloginfo( 'version' );
+
+ if ( ! $raw_version ) {
return $classes;
}
- $raw_version = get_bloginfo( 'version' );
$version_parts = explode( '-', $raw_version );
$version = count( $version_parts ) > 1 ? $version_parts[0] : $raw_version;
+ $class_list = explode( ' ', $classes );
- // Add WP 5.3+ compatibility class.
- if ( $raw_version && version_compare( $version, '5.3', '>=' ) ) {
- $classes .= ' wc-wp-version-gte-53';
- }
+ // WP version compatibility classes.
+ $version_classes = array(
+ '5.3' => 'wc-wp-version-gte-53',
+ '5.5' => 'wc-wp-version-gte-55',
+ '7.0' => 'wc-wp-version-gte-70',
+ );
- // Add WP 5.5+ compatibility class.
- if ( $raw_version && version_compare( $version, '5.5', '>=' ) ) {
- $classes .= ' wc-wp-version-gte-55';
+ foreach ( $version_classes as $min_version => $class_name ) {
+ if ( ! in_array( $class_name, $class_list, true ) && version_compare( $version, $min_version, '>=' ) ) {
+ $classes .= ' ' . $class_name;
+ }
}
return $classes;