WooCommerce checkout labels can inherit empty form-label typography variables

[pirate-bot]

Summary

Neve’s WooCommerce checkout label styling uses the Form Label typography settings from the Customizer. When those settings are left at their default empty values, some label typography declarations do not have fallback values.

Expected behavior: checkout labels retain readable typography when Form Label settings are unset.

Actual behavior: reported checkout labels can receive unresolved or empty typography values, with line-height implicated in overlapping the terms-and-conditions text.

Impact: customers using WooCommerce checkout with default Form Label typography may see misaligned or overlapping checkout label text in the affected path.

Customer context

• Product / area: Neve theme, WooCommerce checkout label styling / Customizer Forms typography
• Version: Repository version inspected: 4.2.4. Customer version not provided.
• Environment: WooCommerce checkout using a Gutenberg checkout-related flow, per report. Exact WooCommerce and WordPress versions not provided.
• Integration / third party: WooCommerce checkout.
• Reported error / symptom: Label CSS includes line-height: var(--formlabellineheight); and other form-label variables without fallbacks; terms-and-conditions text can overlap.
• Impact: Checkout label readability/layout issue in the reported checkout area.

Reproduction notes

Reported workflow:

1. Use Neve with WooCommerce checkout in a Gutenberg checkout-related flow.
2. Leave Appearance > Customizer > Forms label typography options at their default empty values.
3. Inspect checkout label CSS and observe declarations such as line-height: var(--formlabellineheight); without a fallback.
4. Reported result: the terms-and-conditions label text can appear as a single line and overlap adjacent text.

Reproduction status: not runtime-reproduced locally. Source inspection confirms the reported CSS path and empty-default condition. Missing details: exact Neve, WooCommerce, WordPress, browser versions, and whether the affected checkout is WooCommerce classic checkout, Checkout Block, or both.

Diagnosis

Conclusion

The report is a confirmed Neve theme styling defect for the inspected WooCommerce checkout label path. Facts from source: the Form Label typography control is configured with empty defaults, the generated dynamic CSS variables for form labels have no META_DEFAULT values for line-height, letter-spacing, font-weight, or text-transform, and the checkout label SCSS consumes several of those variables without declaration-level fallbacks. Inference: when the relevant Customizer values remain unset or empty, checkout labels can receive invalid/inherited typography behavior matching the reported overlap.

Where this likely occurs

• User-visible surface: WooCommerce checkout labels, including the reported terms-and-conditions label area.
• assets/scss/components/compat/woocommerce/_checkout.scss — .woocommerce-checkout label approx. lines 12–17: checkout labels extend %nv-form-labels, so the generic form-label typography rules apply to checkout labels.
• assets/scss/components/main/_extends.scss — %nv-form-labels lines 125–130: font-size and font-weight include fallbacks, while text-transform, letter-spacing, and line-height consume --formlabel... variables without fallbacks.
• inc/customizer/options/form_fields.php — Form_Fields::add_form_fields_controls() approx. lines 492–523 and 531–545: the neve_label_typeface control uses default_is_empty, with empty mobile/tablet/desktop defaults for font size, line-height, and letter-spacing, and maps those values to --formlabel... CSS variables for live refresh.
• inc/core/styles/frontend.php — Frontend::get_form_rules() approx. lines 625–644: dynamic CSS variable mappings for --formlabelfontsize, --formlabellineheight, --formlabelletterspacing, --formlabelfontweight, and --formlabeltexttransform do not define fallback defaults in the generated rule metadata.
• inc/core/styles/dynamic_selector.php — Dynamic_Selector::get_value() and Dynamic_Selector::__toString() lines 168–190 and 214–221: empty or missing values resolve to the metadata default and are skipped when false/null/empty; for the inspected form-label metadata, no non-empty default is present for the affected variables.
• Git history: git blame shows the no-fallback %nv-form-labels declarations and label variable mappings were introduced around commit 1e76856060 in May 2022; no narrower recent regression boundary was identified during this triage.

Engineering notes

The code path is in the free Neve theme. A sibling search in neve-pro-addon found only a duplicate %nv-form-labels placeholder in assets/scss/_extends.scss and no checkout-specific source path in the initial scan, so the issue is routed to Codeinwp/neve.

The dynamic selector behavior suggests empty defaults may produce omitted CSS custom properties in frontend-generated CSS, while the static checkout declaration still references those variables. Browser behavior for unresolved custom properties in inherited typography declarations was not runtime-tested in this session; the source evidence confirms the missing fallback contract for the inspected selector.

The report mentions Gutenberg checkout blocks, but the concrete CSS shown by the reporter is the .woocommerce-checkout label rule that maps directly to Neve’s WooCommerce checkout SCSS. Exact WooCommerce block markup compatibility was not reproduced locally.

Test coverage status

No relevant coverage was found during inspection. Searches in tests/ and e2e-tests/ did not find coverage for neve_label_typeface, formlabellineheight, %nv-form-labels, or WooCommerce checkout label typography. The Pro add-on e2e forms specs appeared unrelated to this checkout label path during the initial search.

What to verify or explore next

• May be worth verifying in a local WordPress install with Neve 4.2.4, WooCommerce active, and Form Label typography left at defaults.
• May be worth checking both classic checkout and WooCommerce Checkout Block markup to confirm which selectors receive .woocommerce-checkout label styles in current WooCommerce versions.
• If reproducible, checking compiled CSS output from the build pipeline may help confirm the exact frontend declaration emitted from the SCSS source.
• May be worth running the existing SCSS build and any WooCommerce-related visual/e2e checks if available in the project setup.

Unknowns / follow-up

• Customer’s Neve, WooCommerce, WordPress, and browser versions were not provided.
• The exact page markup and whether the issue appears only in the Checkout Block path or also classic checkout was not verified.
• Runtime browser computed-style behavior for the empty/unset variables was not directly reproduced during this triage.

Confidence

Confidence: 88/100

The transcript’s CSS matches Neve source, and repo inspection confirms the checkout label rule consumes empty/omitted form-label typography variables without fallbacks for several inherited text properties.

---

Source: HelpScout #3347836045
Generated by bug-report-triage workflow (ID: bug-report-triage_6a260616e0d1e1.63473421)