JavaScript reverts custom checkout form placeholder

  • Resolved gavsiu

    (@gavsiu)


    6 years, 8 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 6 years, 8 months ago by gavsiu.
Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Support John Coy a11n

    (@johndcoy)

    Automattic Happiness Engineer

    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)

    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

    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)

    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

    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

    How can I disable JavaScript in my browser?

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘JavaScript reverts custom checkout form placeholder’ is closed to new replies.