How to add morocco Country code to phone numbers in wp woocomerce after checkout?

Solution:

You can rewrite code country after complete typing number like this:
This is work only for morocco numbers 06 or 07

 

    document.querySelector('input[name="phone_number"]').addEventListener('keyup',function(e){
        let value = this.value;
        if (value.length == 10 && ['06','07'].includes(value.slice(0, 2))) {
            this.value = '+212'+ value.slice(1);
        }
    });
<input type="text" name="phone_number">

The second solution is make another input to fix the code country
try it:

 

    let ph_input = document.querySelector('input[name="phone_number"]');
    //ph_input.setAttribute('type', 'hidden');
    let clone = ph_input.cloneNode(true);
    ph_input.parentElement.appendChild(clone).setAttribute('type', 'hidden');
    let name = ph_input.getAttribute('name') + '_fix_code';
    ph_input.setAttribute('default_name', ph_input.getAttribute('name'));
    ph_input.setAttribute('name', name);


    document.querySelector(`input[name="${name}"]`).addEventListener('keyup',function(e){
        let value = this.value;
        let name = this.getAttribute('default_name');
        let default_input = document.querySelector(`input[name="${name}"]`);
        default_input.value = value;
        if (value.length == 10 && ['06','07'].includes(value.slice(0, 2))) {
            default_input.value = '+212'+ value.slice(1);
        }
    });


    // Button For Test
    document.querySelector(`.test`).addEventListener('click', function (e) {
        let value = document.querySelector('input[name="phone_number"]').value;
        alert(value);
    });
<input type="text" name="phone_number">
<button class="test">Test</button>

To add the code into wordpress go to your active theme edit file functions.php and put this code at the end of the functions.php

add_action('wp_footer', 'fix_code_country');
function fix_code_country()
{
?>
    <script type="text/javascript">
        try {
            let ph_input = document.querySelector('input[name="phone_number"]');
            //ph_input.setAttribute('type', 'hidden');
            let clone = ph_input.cloneNode(true);
            ph_input.parentElement.appendChild(clone).setAttribute('type', 'hidden');
            let name = ph_input.getAttribute('name') + '_fix_code';
            ph_input.setAttribute('default_name', ph_input.getAttribute('name'));
            ph_input.setAttribute('name', name);

            document.querySelector(`input[name="${name}"]`).addEventListener('keyup', function(e) {
                let value = this.value;
                let name = this.getAttribute('default_name');
                let default_input = document.querySelector(`input[name="${name}"]`);
                default_input.value = value;
                if (value.length == 10 && ['06', '07'].includes(value.slice(0, 2))) {
                    default_input.value = '+212' + value.slice(1);
                }
            });
        } catch {}
    </script>
<?php
};