Checkout - Limit the Countries in Billing & Shipping based on Geolocation

Question

WordPress version: 5.0.3 WooCommerce version: 3.5.4

I have a multi country store and during checkout, I want to limit the Countries billing & shipping to the User IP Address location using geolocation.

I managed to do this taking help of the amazing code from: Shipping Location based on IP (Geolocation) & removal of (optional) text by using code from Remove “(optional)” text from checkout fields in Woocommerce 3.4+

My final code is:

        function wpse_287199_woo_checkout_country( $fields ) {
            $geoData = WC_Geolocation::geolocate_ip();
            $countries = WC()->countries->get_countries();

            $fields['billing']['billing_country'] = array(
                'type' => 'select',
                'label'     => __('Country', 'woocommerce'),
                'options' => array(
                    $geoData['country'] => $countries[$geoData['country']]
                ),
                'class' => array(
                    'form-row-wide',
                    'address-field',
                    'update_totals_on_change'
                )
            );

            $fields['shipping']['shipping_country'] = array(
                'type' => 'select',
                'label'     => __('Country', 'woocommerce'),
                'options' => array(
                    $geoData['country'] => $countries[$geoData['country']]
                ),
                'class' => array(
                    'form-row-wide',
                    'address-field',
                    'update_totals_on_change'
                )
            );

            return $fields;
        }
        add_filter( 'woocommerce_checkout_fields' , 'wpse_287199_woo_checkout_country' );
        add_filter( 'wp_footer' , 'remove_checkout_optional_fields_label_script' );
        function remove_checkout_optional_fields_label_script() {
            // Only on checkout page
            if( ! ( is_checkout() && ! is_wc_endpoint_url() ) ) return;

            $optional = '&nbsp;<span class="optional">(' . esc_html__( 'optional', 'woocommerce' ) . ')</span>';
            ?>
            <script>
            jQuery(function($){
                // On "update" checkout form event
                $(document.body).on('update_checkout', function(){
                    $('#billing_country_field label > .optional').remove();
                    $('#shipping_country_field label > .optional').remove();
                });
            });
            </script>
            <?php
        }

However, with this code, the customer sees the field with a select box which is not selectable. This would annoy a customer. Please see screenshot below:

Can someone please guide me on changes to be made to the code so that the select option is removed. Customer should see the country field as shown in the screenshot below:

Thanks a lot

score 0 · Accepted Answer · answered May 15 '19 at 09:28

OK, I could not get exactly what I was hoping to achieve but got something close

My final code:

/** Restrict Change in Checkout Country based on Geo IP (geolocation)*/
function wpse_287199_woo_checkout_country( $fields ) {
    $geoData = WC_Geolocation::geolocate_ip();
    $countries = WC()->countries->get_countries();
$fields['billing']['billing_country'] = array(
        'type' => 'select',
        'label'     => __('Country', 'woocommerce'),
        'options' => array(
            $geoData['country'] => $countries[$geoData['country']]
        ),
        'class' => array(
            'form-row-wide',
            'address-field',
            'update_totals_on_change'
        )
    );
$fields['shipping']['shipping_country'] = array(
        'type' => 'select',
        'label'     => __('Country', 'woocommerce'),
        'options' => array(
            $geoData['country'] => $countries[$geoData['country']]
        ),
        'class' => array(
            'form-row-wide',
            'address-field',
            'update_totals_on_change'
        )
    );
return $fields;
}
add_filter( 'woocommerce_checkout_fields' , 'wpse_287199_woo_checkout_country' );
/** Remove (optional) from country fields and make it non selectable*/
function remove_checkout_optional_fields_label_script() {
    // Only on checkout page
    if( ! ( is_checkout() && ! is_wc_endpoint_url() ) ) return;

    $optional = '&nbsp;<span class="optional">(' . esc_html__( 'optional', 'woocommerce' ) . ')</span>';
    ?>
    <script>
    jQuery(function($){
        // On "update" checkout form event
        $(document.body).on('update_checkout', function(){
            $('#billing_country_field label > .optional').remove();
    $('.woocommerce-checkout #billing_country_field').css('pointer-events', 'none');
            $('#shipping_country_field label > .optional').remove();
    $('.woocommerce-checkout #shipping_country_field').css('pointer-events', 'none');
        });
    });
    </script>
    <?php
}
add_filter( 'wp_footer' , 'remove_checkout_optional_fields_label_script' );
// End of above code

This would make the country field auto populate with Geolocation data and make it non selectable is there such a word? ;)

Any improvement suggestion is very welcome.

Thanks

Checkout - Limit the Countries in Billing & Shipping based on Geolocation

1 Answers1