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 purchase. In this blog post, I will guide you through the steps of adding county calling code prefix in Woocommerce billing phone field.
Step 1: Install and Activate the Code Snippets plugin
So, if you would like to remove site healt widget from the WordPress dashboard, 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 will need to 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 choos “Save and activate”
// Add country calling code prefix in woocommerce billing phone
add_action( 'wp_footer', 'wpsh_add_callback' );
function wpsh_add_callback(){
?>
<script type="text/javascript">
( function( $ ) {
$( document.body ).on( 'updated_checkout', function(data) {
var ajax_url = "<?php echo admin_url('admin-ajax.php'); ?>",
country_code = $('#billing_country').val();
var ajax_data = {
action: 'append_country_prefix_in_billing_phone',
country_code: country_code
};
$.post( ajax_url, ajax_data, function( response ) {
$('#billing_phone').val(response);
});
} );
} )( jQuery );
</script>
<?php
}
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' );
function wpsh_add_phone_prefix() {
$calling_code = '';
$country_code = isset( $_POST['country_code'] ) ? sanitize_text_field( $_POST['country_code'] ) : '';
if( $country_code ){
$calling_code = WC()->countries->get_country_calling_code( $country_code );
$calling_code = is_array( $calling_code ) ? $calling_code[0] : $calling_code;
}
echo $calling_code;
die();
}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 tome 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 wan 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 on 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.
