Unable to change woocommerce checkout field class

  • Resolved umutesen

    (@umutesen)


    4 years, 1 month ago

    I am trying to change the class attribute of billing_city and billing_postcode fields on the checkout page.

    This is located in my functions file:

    add_filter('woocommerce_checkout_fields', 'custom_override_checkout_fields', 30, 1);
function custom_override_checkout_fields($fields)
{
    $fields['billing']['billing_postcode']['class'][0] = 'form-row-first';
    $fields['billing']['billing_city']['class'][0] = 'form-row-last';
}

    The following is the markup produced in the checkout page for the postcode field. Note there is a data-o_class attribute which has the css class I am setting above.

    
<p class="form-row address-field validate-required validate-postcode form-row-wide" id="billing_postcode_field" data-priority="90" data-o_class="form-row form-row-first address-field validate-required validate-postcode">
<label for="billing_postcode" class="">Postcode&nbsp;<abbr class="required" title="required">*</abbr></label><span class="woocommerce-input-wrapper"><input type="text" class="input-text " name="billing_postcode" id="billing_postcode" placeholder="" value="" autocomplete="postal-code"></span>
</p>

    My code appears to work for other fields like first name but not city and post code.

    What am I doing wrong?

Viewing 2 replies - 1 through 2 (of 2 total)

  • The documentation tells us that:
    “In specific cases you need to use the woocommerce_default_address_fields filter.”

    I’ve not been able to get a grip on what those specific cases are, but sometimes woocommerce_default_address_fields works when woocommerce_checkout_fields doesn’t.

    Thread Starter umutesen

    (@umutesen)

    Many thanks for your response, woocommerce_default_address_fields works perfectly!

    add_filter('woocommerce_default_address_fields', 'custom_woocommerce_default_address_fields', 20);
function custom_woocommerce_default_address_fields($fields)
{    
    $fields['postcode']['class'][0] = 'form-row-first';
    $fields['city']['class'][0] = 'form-row-last';
    return $fields;
}
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Unable to change woocommerce checkout field class’ is closed to new replies.

Tags