How can I add a title to a field in the checkout page?

Question

I am wondering if there is a simple way (dropdown option or checkbox) to add a title to a field in the Drupal Commerce checkout page. Specifically, I want the second field for Street Address to have the label: Address line 2.

I was unable to find this field in Admin > Structure > View that allows the option to "Manage Display" or "Manage Form Display" and make a label for a field "Hidden" or otherwise.

I also looked in the Commerce sections to no avail.

Next step is to find out if there is a Billing Information > "Manage Form Display menu somewhere.

Not in Home > Administration > Configuration > People > Profiles > Profile types > Edit Customer > Manage fields either.

Answer 1

Not possible in User Interface (via link or menu or whatever). But if you use the following code in a module, you can add a title to your form element:

<?php
function CUSTOM_form_alter($form, $form_state, $form_id) {
  // You should probably check for a form_id in here, as this runs on every form.
  // Below you will need to find the part of the $form array that has the billing address.
  $form['[see note above]']['widget'][0]['address']['address_line2']['#title'] = t('Address 2');
}

Answer 2

The second line of the address field has an invisible title. It's explicitly set by the Address module.

You can see that in action here: cgit.drupalcode.org/address/tree/src/Element/Address.php?h=272a7ce#n231

// Hide the label for the second address line.
if (isset($element['address_line2'])) {
  $element['address_line2']['#title_display'] = 'invisible';
}

You could use hook_element_info_alter() to define new process or after_build callbacks.

function mytheme_element_info_alter(array &$types) {
  $types['address']['#process'][] = ['\Drupal\mytheme\Element\Address', 'processAddress'];
}

Overriding the element:

namespace Drupal\mytheme\Element;

use \Drupal\address\Element\Address as DefaultAddress;
use \Drupal\Core\Form\FormStateInterface;

/**
 * {@inheritdoc}
 */
class Address extends DefaultAddress {

  /**
   * {@inheritdoc}
   */
  public static function processAddress(array &$element, FormStateInterface $form_state, array &$complete_form) {
    $element = parent::processAddress($element, $form_state, $complete_form);
    unset($element['address_line2']['#title_display']);
    return $element;
  }

}

Answer 3

This answer is clumsy as it makes all form element labels visible, but ultimately gets the job done.

Using this theme and modifying specifically this template: DOrange_form-element-label.html.twig with an additional conditional before the set classes statment:

{%- if title_display == 'invisible'-%}
  {%-
    set title_display = [
      'visible',
    ]
  -%}
{%- endif -%}

Answer 4

This is a solution that works on Commerce 2 and Drupal 10. We have to use a process because these are custom fields. In this example, I display a label for field address_line2, modify the address_line1 label ans alter order of family_name

/**
 * Implementation of hook_element_info_alter
 */
function custom_module_element_info_alter(array &$types) {

  if (isset($types['address'])) {
    $types['address']['#process'][] = '_custom_module_add_adress_label';
  }
}

/**
 * Process callback for address element.
 */
function _custom_module_add_adress_label(array &$element, FormStateInterface $form_state, array &$complete_form) {
  $element['address_line1']['#title'] = t('Address');
  $element['address_line2']['#title_display'] = 'before';
  $element['address_line2']['#title'] = t('Building / Floor / Apt');
  $element['family_name']['#weight'] = -10;
  return $element;
}