将结帐邮政编码字段自定义为自定义下拉菜单

Question

I am building a WooCommerce based store. I have a list of postcodes , each one has a different shipping cost attached through Shipping Zones (some provide free shipping, some have a flat rate).

When the customer goes to the checkout page, he needs to type his postcode number in the input field. Depending on postcode, an order preview will show different shipping total (free or flat rate).

Here's how the input field looks like in class-wc-countries.php :

public function get_default_address_fields() {
    $fields = array(
    'postcode' => array(
            'label'        => __( 'Postcode/ZIP', 'woocommerce' ),
            'required'     => true,
            'class'        => array( 'form-row-first', 'address-field' ),
            'clear'        => true,
            'validate'     => array( 'postcode' ),
            'autocomplete' => 'postal-code',
        ),
    );

However, what I want to do is to turn this field into a drop-down menu, so the customer could just select his postcode option rather than type it.

I managed to make it drop-down, but whenever I choose any option it doesn't seem to change shipping total as it would with input field.

Here's what I did:

public function get_default_address_fields() {
    $fields = array(
        'postcode' => array(
            'label'        => __( 'Postcode/ZIP', 'woocommerce' ),
            'required'     => true,
            'class'        => array( 'form-row-first', 'address-field' ),
            'clear'        => true,
            'validate'     => array( 'postcode' ),
            'autocomplete' => 'postal-code',
            'type' => 'select',
            'options' => array(
                              'opt1' => "001122", "112200", "334400")
        ),
    );

But this don't work.

Am I missing something?
How do I make these drop-down options change shipping total?

Thanks

Answer 1

This will answer very partially to your question, and just show you the way to customize checkout fields.

Overriding core files is not really something to do, as you will loose everithing each time Woocommerce is going to be updated and is not recommended.

To override checkout fields in a clean way, first you need to use a custom function hooked in one of that 2 filter hooks:

• woocommerce_default_address_fields (when customizing billing and shipping address default fields)
• woocommerce_checkout_fields (when customizing billing or shipping address fields and also others fields).

Related official documentation: Customizing checkout fields using actions and filters

So here I have chose the first hook, and I have corrected your post codes array. You will get that:

Here is that functional and tested code:

add_filter( 'woocommerce_default_address_fields' , 'custom_override_default_postcode_field' );
function custom_override_default_postcode_field( $address_fields ) {
    // Your postcodes array
    $postcode_array = array(
        'opt1' => "001122",
        'opt2' => "112200",
        'opt3' => "334400"
    );
    $address_fields['postcode']['type'] = 'select';
    $address_fields['postcode']['options'] = $postcode_array;

    return $address_fields;
}

Code goes in function.php file of your active child theme (or theme) or also in any plugin file.

As selecting a post-code is a live front-end event, you will need to use a complex javascript/ajax script with some remote php function to achieve what you want to do, and this is a real development... It also depends on your settings and is complex to handle as there is already some woocommerce ajax scripts operating in that checkout page.