Phone number issue

Installed yesterday, so versjon 1.1.51

No, and same problem in plain Storefront

Yeah, it’s interesting. I can confirm it seems to work somewhat in a new clean install. Though; t.ex. the error message is only displayed when there is no other validation errors (other fields), and the field is not marked with red – it’s always green (validated). The error message also doesn’t match the others in formatting, nor their normal sorting.

I can’t share any links here, nor do I actually have time or paid to debug this, so I think I’m just adding an improved custom validation snippet for it, and move on.

BTW! The missing phone validation might be a JS issue, as it seems like you have added your own validation in JS scripts in this plugin, which might be an issue for sites using caching and optimisations.

/**
 * Validate Nordic mobile phone numbers on WooCommerce checkout.
 *
 * - Accepts both "+" and "00" international prefixes.
 * - Per-country digit length rules (subscriber number, i.e. after country code).
 * - Falls back to billing_country when no prefix is supplied.
 * - Uses Woo's native error string so translations stay consistent.
 * - Marks the billing_phone field invalid (red border + inline message).
 * - Re-sorts checkout errors to match the field order on the form.
 */
add_action( 'woocommerce_after_checkout_validation', 'wc_validate_nordic_phone', 10, 2 );

function wc_validate_nordic_phone( $data, $errors ) {

    if ( empty( $data['billing_phone'] ) ) {
        return; // Let Woo's own "required" validation handle empties.
    }

    // Nordic rules: country code => [ min digits, max digits ] of subscriber number.
    $rules = array(
        '47'  => array( 8, 8 ),   // Norway
        '45'  => array( 8, 8 ),   // Denmark
        '46'  => array( 9, 9 ),   // Sweden (mobile, leading 0 stripped)
        '358' => array( 9, 10 ),  // Finland
        '354' => array( 7, 7 ),   // Iceland
        '298' => array( 6, 6 ),   // Faroe Islands
        '299' => array( 6, 6 ),   // Greenland
    );

    // Map billing_country (ISO) to dial code for fallback.
    $country_to_cc = array(
        'NO' => '47', 'DK' => '45', 'SE' => '46',
        'FI' => '358', 'IS' => '354', 'FO' => '298', 'GL' => '299',
    );

    $raw = trim( (string) $data['billing_phone'] );

    // Normalize: keep leading "+" if present, strip everything non-digit.
    $has_plus = ( strpos( $raw, '+' ) === 0 );
    $digits   = preg_replace( '/\D+/', '', $raw );

    if ( '' === $digits ) {
        return;
    }

    // Resolve country code from input or fall back to billing_country.
    $cc         = '';
    $subscriber = '';

    if ( $has_plus || strpos( $digits, '00' ) === 0 ) {
        // Strip "00" international prefix if present.
        if ( ! $has_plus && strpos( $digits, '00' ) === 0 ) {
            $digits = substr( $digits, 2 );
        }
        // Try matching the longest country code first (3 then 2 digits).
        foreach ( array( 3, 2 ) as $len ) {
            $candidate = substr( $digits, 0, $len );
            if ( isset( $rules[ $candidate ] ) ) {
                $cc         = $candidate;
                $subscriber = substr( $digits, $len );
                break;
            }
        }
    } else {
        // No international prefix — use billing_country as the fallback.
        $country = isset( $data['billing_country'] ) ? $data['billing_country'] : '';
        if ( isset( $country_to_cc[ $country ] ) ) {
            $cc         = $country_to_cc[ $country ];
            $subscriber = $digits;
            // Allow national trunk "0" prefix (e.g. SE: 070...).
            if ( '46' === $cc && strpos( $subscriber, '0' ) === 0 ) {
                $subscriber = ltrim( $subscriber, '0' );
            }
        }
    }

    // If we can't resolve to a Nordic country, don't block — let other plugins decide.
    if ( '' === $cc || ! isset( $rules[ $cc ] ) ) {
        return;
    }

    list( $min, $max ) = $rules[ $cc ];
    $len = strlen( $subscriber );

    if ( $len < $min || $len > $max ) {

        // Get the field label so the message matches Woo's other field errors.
        $fields = WC()->checkout()->get_checkout_fields( 'billing' );
        $label  = isset( $fields['billing_phone']['label'] )
            ? $fields['billing_phone']['label']
            : __( 'Phone', 'woocommerce' );

        // Prefix with "Billing" exactly like WC core (class-wc-checkout.php L866).
        /* translators: %s: field name */
        $label = sprintf( _x( 'Billing %s', 'checkout-validation', 'woocommerce' ), $label );

        // Use Woo's native translation string — translates automatically per locale.
        /* translators: %s: field name */
        $message = sprintf(
            __( '%s is not a valid phone number.', 'woocommerce' ),
            '<strong>' . esc_html( $label ) . '</strong>'
        );

        $errors->add(
            'billing_phone_validation',
            $message,
            array( 'id' => 'billing_phone' )
        );

        // Re-sort all checkout errors to follow the on-screen field order.
        wc_reorder_checkout_errors_by_field_order( $errors );
    }
}

/**
 * Reorder a WP_Error bag so checkout field errors appear in the same order
 * as the fields on the form. Errors not tied to a field keep their position
 * at the end.
 */
function wc_reorder_checkout_errors_by_field_order( $errors ) {

    if ( ! is_wp_error( $errors ) || empty( $errors->errors ) ) {
        return;
    }

    // Build the canonical field order across all checkout fieldsets.
    $checkout      = WC()->checkout();
    $all_fieldsets = $checkout->get_checkout_fields();
    $field_order   = array();
    $i             = 0;
    foreach ( $all_fieldsets as $fieldset ) {
        foreach ( array_keys( $fieldset ) as $field_key ) {
            $field_order[ $field_key ] = $i++;
        }
    }

    // Snapshot current errors with their data, then sort by field position.
    $entries = array();
    foreach ( $errors->errors as $code => $messages ) {
        $error_data = $errors->error_data[ $code ] ?? array();
        $field_id   = isset( $error_data['id'] ) ? $error_data['id'] : '';
        $pos        = isset( $field_order[ $field_id ] ) ? $field_order[ $field_id ] : PHP_INT_MAX;

        $entries[] = array(
            'code'     => $code,
            'messages' => $messages,
            'data'     => $error_data,
            'pos'      => $pos,
        );
    }

    usort( $entries, function ( $a, $b ) {
        return $a['pos'] <=> $b['pos'];
    } );

    // Rebuild the WP_Error bag in the new order.
    $errors->errors     = array();
    $errors->error_data = array();
    foreach ( $entries as $entry ) {
        foreach ( $entry['messages'] as $msg ) {
            $errors->add( $entry['code'], $msg, $entry['data'] );
        }
    }
}

/**
 * Mark fields invalid client-side based on server validation errors.
 * Woo emits <li data-id="<field_key>"> for errors that carry an 'id' in their
 * error_data; we use that to add the woocommerce-invalid class on the field
 * wrapper so it gets the red border, matching native field validation.
 */
add_action( 'wp_footer', 'wc_mark_server_invalid_fields_js', 99 );

function wc_mark_server_invalid_fields_js() {

    if ( ! function_exists( 'is_checkout' ) || ! is_checkout() ) {
        return;
    }
    ?>
    <script>
    (function ($) {
        $( document.body ).on( 'checkout_error', function () {
            $( '.woocommerce-error li[data-id]' ).each( function () {
                var fieldId = $( this ).data( 'id' );
                if ( ! fieldId ) {
                    return;
                }
                var $row = $( '#' + fieldId + '_field' );
                if ( ! $row.length ) {
                    return;
                }
                $row
                    .removeClass( 'woocommerce-validated' )
                    .addClass( 'woocommerce-invalid woocommerce-invalid-phone' );
            } );
        } );
    })( jQuery );
    </script>
    <?php
}

• This reply was modified 3 weeks, 2 days ago by Rune Rasmussen.
• This reply was modified 3 weeks, 2 days ago by threadi.

Block based checkout is probably still not the norm in the Nordic, as there are lot of old stores still using shortcodes. Both because that was what they was built with back in time, but also since several of the available payment plugins still doesn’t support it. Anyhow most optimisation/caching plugins and server side handling most likely would handle core js automatically, but not your extra added js.

Anyhow your validation isn’t solid enough when customers can add orders without phone number in some setups, whatever the reason is. Nor do I think it’s right of you to manipulate the core checkout fields, even if you can do it with js – also other shipping plugins is mostly working fine without doing so (like Wildrobot and other Posten Bring plugins available). You should probably better handle your country code requirements other places, or in a better way …

Thank you for your detailed reply and view, and also for looking into an improving the validation handling. I still don’t agree on this being the best way to deal with it, but I’ll just have to respect that it’s your chosen way to deal with it at the moment. Also I sadly have no time to try to find how and why several customers have been able to checkout without adding the phone number, but hopefully next month if the issue still is there then.

I looked at that soon two year old and forgotten issue, great initiative. But it seems like this has went into the same black hole as most of the international requirements, Woo is sadly still a bit US orientated in many ways. Anyhow it could probably need some active following up, and some code proposals (PR – Pull Request), to make it more understandable for those deciding about the core features – and pushing it forward.