Hook for Woocommerce checkout fields

Question

I need to add some info after each required fieds in Woocommerce checkout form. I'm using Wordpress 6.2.2 and WooCommerce 7.3.0 With this code I can add my info, but not for all required fields, e.g. 'billing_postcode', 'billing_city' still unchanged.

add_filter('woocommerce_form_field','wphelp_error_tag', 10, 4 );
function wphelp_error_tag( $field, $key, $args, $value ) {
    if ( strpos( $field, '</label>' ) !== false && $args['required']) {
$error = '<span class="error" id="'.$key.'" style="display:none">';
$error .= sprintf( __( '%s is a required field.', 'woocommerce' ), $args['label'] );

$error .= '</span>';
$field = substr_replace( $field, $error, strpos( $field, '</label>' ), 0);
}
return $field;
}

I want to achieve this code

    <label for="billing_postcode" class="">Postleitzahl
    <abbr class="required" title="erforderlich">*</abbr> 
<span class="error" style="display:none">
Vorname ist ein Pflichtfeld.</span></label>

Instead of standard:

<label for="billing_postcode" class="">Postleitzahl
<abbr class="required" title="erforderlich">*</abbr></label>

I found similar question here How to hook on a WooCommerce checkout field?, but I think that this info is obsolete.

Answer 1

Finally I made it when I override file wc-address-i18n.js; in functions.php I added this code:

function override_woo_frontend_scripts1() {
    wp_deregister_script( 'wc-address-i18n' );
    wp_enqueue_script( 'wc-address-i18n', get_stylesheet_directory_uri() . '/woocommerce/js/address-i18n.js', array( 'jquery', 'wc-country-select' ), null, true );
}
add_action( 'wp_enqueue_scripts', 'override_woo_frontend_scripts1' );

In next step I cloned a file wp-content/plugins/woocommerce/assets/js/frontend/wc-address-i18n.js to themes/my-site/woocommerce/js/wc-address-i18n.js. And finally I added my code in themes/my-site/woocommerce/js/wc-address-i18n.js from line 16:

if ( field.find( 'label .required' ).length === 0 ) {
    field.find( 'label' ).append(
        '&nbsp;<abbr class="required" title="' +
        wc_address_i18n_params.i18n_required_text +
        '">*</abbr> <span class="error" id="billing_last_name" style="display:none">' +
        wc_address_i18n_params.i18n_required_text +
        ' ist ein Pflichtfeld.</span>'
    );
}

Answer 2

Your code seems to be correct and should generally work for all fields. However, the 'billing_postcode' and 'billing_city' fields may be processed differently or not be considered required based on the customer's country or other settings, which could explain why they're not being modified.

If you want to ensure a message appears for all fields, you might need to use JavaScript to achieve this.

Here's a jQuery snippet that will append a custom error message to all required WooCommerce checkout fields:

add_action( 'wp_footer', 'custom_required_field_error_message' );
function custom_required_field_error_message() {
    if( is_checkout() && ! is_wc_endpoint_url( 'order-received' ) ) :
    ?>
    <script type="text/javascript">
    jQuery(function($){
        var required_fields = $('form.checkout .validate-required');
        required_fields.each(function(){
            var label = $(this).find('label');
            var error_message = '<span class="error" style="display:none">' + label.text().replace('*', '') + ' <?php echo __("is a required field.", "woocommerce"); ?></span>';
            label.append(error_message);
        });
    });
    </script>
    <?php
    endif;
}

The jQuery script targets the form.checkout .validate-required selector which should include all required fields on the checkout page, regardless of whether they're billing, shipping or account fields. The error message is initially hidden (style="display:none") and can be made visible using additional scripts or CSS rules.

Remember to replace "woocommerce" in the __() function with your actual text domain if it's different.