0

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.

2 Answers 2

0

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.

1
  • Thanks for your comment. I've checked your JS code - but it's added code exactly for these fields which I can add it with my initial code! E.g. this field still is not handled <p class="form-row address-field validate-required form-row-wide woocommerce-invalid woocommerce-invalid-required-field" id="billing_address_1_field" data-priority="50"><label for="billing_address_1" class="">Via e numero&nbsp;<abbr class="required" title="obbligatorio">*</abbr></label><span class="woocommerce-input-wrapper"><input type="text" class="input-text " name="billing_address_1"></span></p>
    – Pekkonen
    Jun 8, 2023 at 14:00
0

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>'
    );
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.