Change field width in Woocommerce billing address field

Question

I have a WordPress site using a child theme, where I installed WooCommerce, but the billing/shipping forms just look weird, unaligned, and most of the fields are pretty small. The country field (for example) looks like this:

I tried to change the field class to make it larger, by using a function in the functions.php, but it does not seem to work. This is what I used:

function em_align_address_checkout_fields( $fields ) {
   $fields['billing_country']['class'][] = 'form-row-wide';

   return $fields;
}
add_filter( 'woocommerce_billing_fields', 'em_align_address_checkout_fields' );

Is there a way to change the width on the fields? and if you know how to solve the overall style, I would appreciate, I don't believe this is how it's supposed to look compared to other articles, and I'm not an expert on Woocommerce or Wordpress.

Thanks for the help!

webmatrix webmatrix · Accepted Answer · 2019-11-10T21:51:14

You can write custom css for those fields in the child theme css.

    .woocommerce-billing-fields__field-wrapper label{ width 50%;float:left;}/* Use this only if necessary.It may affect overall checkout fields layout */
    #billing_country_field label{ width:50%;}
    #billing_country_field select{ width:50%;}

Or you can use official extension for overriding checkout layout.

https://docs.woocommerce.com/document/checkout-field-editor/

Change field width in Woocommerce billing address field

1 Answers