JavaScript reverts custom checkout form placeholder

Resolved gavsiu
(@gavsiu)

8 years, 3 months ago
So the docs say I can modify the placeholder for form inputs.

I’m trying to remove “(optional)” from the second address line and move it from the placeholder to the description.
```
function wc_checkout_fields( $fields ) {

	$fields[ 'billing' ][ 'billing_address_2' ][ 'placeholder' ] = 'Apartment, suite, unit etc.';

	return $fields;
}
add_filter( 'woocommerce_checkout_fields', 'wc_checkout_fields', 10, 1 );
```
Some JavaScript keeps reverting it back when the page loads. When I disable JavaScript in my browser, it works.

It seems to only affect fields that rely on the country <select> including Street Address, City, State, Zip, etc.
- This topic was modified 8 years, 3 months ago by gavsiu.

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

Plugin Support John Coy a11n
(@johndcoy)

Automattic Happiness Engineer

8 years, 3 months ago

Hi @gavsiu

Can you tell me what JavaScript you have running and where you’re applying the code. I tested this on my site and had no issues.

Thread Starter gavsiu
(@gavsiu)

8 years, 3 months ago

I can’t show you the test site because I’m developing it on my internal network and it has no internet access.

In trying to resolve this, I have commented out all my wp_enqueue_script, so the only JavaScript loaded should be WordPress and plugins. The code above was inserted into functions.php.

The main thing I wanted was to change the placeholder and remove all * on required fields (not removing the requirement) and just put “Optional” under the few fields in the description.

I have found that to remove the asterixes, I had to duplicate the function woocommerce_form_field and modify it.

If I use the original function, the problem with the 2nd address line placeholder persists (also would be the only thing changed).

This is what I see without JavaScript.

This is what I see with JavaScript.

Caleb Burks
(@icaleb)

Automattic Happiness Engineer

8 years, 2 months ago

The optional text is there by default: https://github.com/woocommerce/woocommerce/blob/c98e0ac43b98f87845364187714b4504a2239a58/includes/class-wc-countries.php#L657

I think you might be fighting against the localization script. It changes field labels and placement based on the selected country.

If you filter the placeholder text with woocommerce_default_address_fields filter, does that help solve the second problem?

Thread Starter gavsiu
(@gavsiu)

8 years, 2 months ago

That worked for the placeholder. Thanks. I read that part of the docs but forgot about it.

The asterixes, however, were unaffected. Is there a way around this? I basically copied and renamed woocommerce_form_field and removed the asterixes for the required fields and put that in functions.php.

Caleb Burks
(@icaleb)

Automattic Happiness Engineer

8 years, 2 months ago

Eh, don’t think so sadly. The $required variable doesn’t look to be filtered and is put straight into the input.

I’d recommend opening an issue in Github asking for a filter there, else even better, submitting a pull request for one 🙂 https://github.com/woocommerce/woocommerce/issues

Ramon Olivencia
(@ramonolivencia)

8 years ago

How can I disable JavaScript in my browser?