City label not appearing during checkout

There is no placeholder for city – the labels have been hidden with CSS. Unhide the form labels.

how do I unhide the form labels?

The html placeholder seems to not be there.

https://github.com/woothemes/woocommerce/blob/f95ffe16d034a8019f8fe0355d41998b84560182/includes/class-wc-countries.php

'city' => array(
				'label'        => __( 'Town / City', 'woocommerce' ),
				'required'     => true,
				'class'        => array( 'form-row-wide', 'address-field' ),
				'autocomplete' => 'address-level2',
			),

on your website:

<input class="input-text " name="billing_city" id="billing_city" placeholder="" value="" type="text">

It should be possible to use JS to just put it in there. Try adding this to functions.php

EDIT 28 mins ago. I just noticed yet another typo. Try the code below:

function add_jscript() {
echo '<script>document.getElementById("billing_city").placeholder = "Town / City";</script>'
}

add_action( 'woocommerce_after_checkout_form', 'add_jscript');

Be sure you have alternative access (ssh or ftp) to functions.php to revert changes incase something goes wrong.

.woocommerce form.checkout .col2-set p.form-row label {
display:block !important;
}

I am sorry I am a little confused.

Can you kind of break it down exactly where I need to place this code?

And also, will I have to do this everytime woo-commerce is updated?

On WP you go to appearance > editor > select theme to edit (your theme) > functions.php.

If there is bad code in functions.php your site won’t work so you’ll need to get in ssh/ftp and change it back. I think you need to update it everytime your theme is updated. If WooCommeerce updates the functions.php file remains untouched.

For Mike Jolley’s code you’d place it in stylesheet (styles.css) in your theme but I don’t know if it’s going to fix the problem.

Hi,

I installed woo commerce and on checkout, none of the field labels are displaying. Can someone please help me out?

https://www.bperrydesign.com/backstage/KD/checkout/

I am thinking it is a stylesheet issue?

I had this issue too. I was able to re-add the placeholders by following this guide:
https://docs.woocommerce.com/document/tutorial-customising-checkout-fields-using-actions-and-filters/

…so in my child theme’s functions.php I added:

// Hook in
add_filter( ‘woocommerce_default_address_fields’ , ‘custom_override_default_address_fields’ );

// Our hooked in function – $address_fields is passed via the filter!
function custom_override_default_address_fields( $address_fields ) {
$address_fields[‘city’][‘placeholder’] = ‘City / Town’;
$address_fields[‘state’][‘placeholder’] = ‘State / County’;

return $address_fields;
}

Yes, this is not just a problem for him… it’s happening on all my sites that use WooCommerce, and there’s a lot of them. One client called yesterday and had lost sales because of it.

The fix above (in functions.php) did not work for me.

ALSO… there are no borders around the fields, have been fixing that with CSS for a few weeks now…

• This reply was modified 8 years ago by czeller.
• This reply was modified 8 years ago by czeller.

@czeller I fixed the characters in the solution code by @pepsimxm, try copy/pasting the following code into your functions.php file. It worked for me. The ‘single quote’ marks were the wrong kind in @pepsimxm’s original solution.

Thank you @pepsimxm!

// Hook in
add_filter( 'woocommerce_default_address_fields' , 'custom_override_default_address_fields' );

// Our hooked in function - $address_fields is passed via the filter!
function custom_override_default_address_fields( $address_fields ) {
$address_fields['city']['placeholder'] = 'City / Town';
$address_fields['state']['placeholder'] = 'State / County';

return $address_fields;
}

Or you can hook into woocommerce_checkout_fields filter and change/add props to all of the checkout fields.

function checkout_city_placeholder( $forms_fields ) {
	if ( ! $forms_fields ) {
		return $forms_fields;
	}

	foreach ( $forms_fields as $fields_key => $fields ) {
		foreach ( $fields as $field => $props ) {
			if ( 'billing_city' == $field || 'shipping_city' == $field ) {
				$forms_fields[ $fields_key ][ $field ]['placeholder'] = 'Town / City';
				continue;
			}
		}
	}
	return $forms_fields;
}
add_filter( 'woocommerce_checkout_fields', 'checkout_city_placeholder', 10 );

• This reply was modified 7 years, 12 months ago by kuliraj.