What is the tutorial about?
WP Simple Hacks will show you how to add phone prefixes to WooCommerce checkout fields automatically. By default, WooCommerce does not include these prefixes, but with the help of this tutorial, you can enhance your online store’s user experience and provide a more efficient checkout process.
Use Cases for this Tutorial
- Streamlining the checkout process by automatically adding phone prefixes to the fields
- Ensuring a standardized format for phone numbers entered during the checkout process
- Reducing errors in customer’s contact information
- Enhancing the user experience and increasing conversions by simplifying the checkout process
Required Code
Original Post: https://wpsimplehacks.com/country-calling-code-prefix-in-woocommerce/
// 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();
}
