If you have a Woocommerce store and sell products internationally, you may want to add phone prefixes to the checkout page. This can help ensure that customers from different countries can easily enter their phone numbers and complete their purchases. In this blog post, I will guide you through the steps of adding a county calling code prefix in the Woocommerce billing phone field.
Step 1: Install and Activate the Code Snippets plugin
So, if you would like to add a country calling code prefix in Woocommerce billing phone field, then use this snippet here below. If you don’t know where to add the code snippet, then add it either to your child theme’s functions.php file or better yet, use a snippet manager like Code Snippets
Step 2: Paste the snippet here below
After installing and activating the plugin, you must add a new snippet. So, go to Snippets >> Add new and give it a title. For example: “Add country calling code prefix in Woocommerce billing phone”. Next, paste the snippet here below inside the code box and choose “Run snippet everywhere”. Now choose “Save and activate”
// Add country calling code prefix in woocommerce billing phone
// Register WordPress hooks and callbacks for the WooCommerce checkout.
add_action( 'wp_footer', 'wpsh_add_callback_script' );
add_action( 'wp_ajax_nopriv_append_country_prefix_in_billing_phone', 'wpsh_add_phone_prefix' );
add_action( 'wp_ajax_append_country_prefix_in_billing_phone', 'wpsh_add_phone_prefix' );
add_action( 'woocommerce_checkout_process', 'wpsh_validate_phone' );
/* Outputs the JavaScript required for updating the billing phone with the country prefix. */
function wpsh_add_callback_script() {
// Securely pass data to JavaScript.
$ajax_url = admin_url('admin-ajax.php');
?>
<script type="text/javascript">
(function($) {
$(document.body).on('updated_checkout', function() {
var country_code = $('#billing_country').val();
var ajax_data = {
action: 'append_country_prefix_in_billing_phone',
country_code: country_code
};
$.post('<?php echo esc_js($ajax_url); ?>', ajax_data, function(response) {
$('#billing_phone').val(response);
});
});
})(jQuery);
</script>
<?php
}
/* Handles AJAX request to append the country calling code to the billing phone field. */
function wpsh_add_phone_prefix() {
$country_code = isset($_POST['country_code']) ? sanitize_text_field($_POST['country_code']) : '';
$calling_code = '';
if ($country_code) {
$calling_codes = WC()->countries->get_country_calling_code($country_code);
$calling_code = is_array($calling_codes) ? $calling_codes[0] : $calling_codes;
}
echo $calling_code;
wp_die();
}
/* Validates the phone number length during the WooCommerce checkout process. */
function wpsh_validate_phone() {
if (isset($_POST['billing_phone']) && strlen(preg_replace('/[^0-9]/', '', $_POST['billing_phone'])) < 6) {
wc_add_notice(__('Billing Phone must be at least 6 digits long.', 'woocommerce'), 'error');
}
}Pay attention that lines 37-46 are added because with this snippet phone number field is filled with the prefix and appears as completed in the Woocommerce checkout. This way the user can proceed with the order even without entering the rest of the number. To avoid this we add another small piece of code that won’t allow to enter phone numbers with less than 6 digits. You can modify this in line 42 and the message itself in line 43.
Step 3: Test the Checkout Page
Once you have configured the plugin settings, it is important to test the checkout page to ensure that the phone prefix is working correctly. To do this, add a product to your cart and proceed to the checkout page. You should now see a prefix next to the phone number field that changes every time you change your country. Make sure that the phone number is validated correctly and that the country code is included when the order is submitted.
Alternative method: Install “Country code selector” plugin
If the previous method seems too complicated for you then you may want to install and activate “Country code selector” plugin. This plugin allows you to add phone prefixes to the Woocommerce checkout page. You can find this plugin in the WordPress plugin directory and install it from there.
In conclusion, adding phone prefixes to the Woocommerce checkout page can be very beneficial for international customers. It can help them enter their phone numbers more easily and can reduce the risk of errors during checkout.
