WooCommerce - Overriding billing state and post code on existing checkout fields

寵の児 提交于 2019-11-28 11:47:55

This is the complete way for billing state and billing post code override, keeping the billing selector with options.

Here is the code the fully functional and tested code:

  1. Unsetting billing state and post code checkout fields
add_filter( 'woocommerce_checkout_fields' , 'partial_unsetting_checkout_fields' );
function partial_unsetting_checkout_fields( $fields ) {
     unset($fields['billing']['billing_state']);
     unset($fields['billing']['billing_postcode']);

     return $fields;
}
  1. Reinserting custom billing state and post code checkout fields
add_filter( 'woocommerce_default_address_fields' , 'art_override_default_address_fields' );
function art_override_default_address_fields( $address_fields ) {

  // @ for state
    $address_fields['billing_state']['type'] = 'select';
    $address_fields['billing_state']['class'] = array('form-row-wide');
    $address_fields['billing_state']['required'] = true;
    $address_fields['billing_state']['label'] = __('State', 'my_theme_slug');
    $address_fields['billing_state']['placeholder'] = __('Enter state', 'my_theme_slug');
    $address_fields['billing_state']['default'] ='Choice 1';
    $address_fields['billing_state']['options'] = array(
        'option_1' => 'Choice 1',
        'option_2' => 'Choice 2',
        'option_3' => 'Choice 3'
    );

    // @ for postcode
    $address_fields['billing_postcode']['type'] = 'text';
    $address_fields['billing_postcode']['class'] = array('form-row-wide');
    $address_fields['billing_postcode']['required'] = true;
    $address_fields['billing_postcode']['label'] = __('Postcode', 'my_theme_slug');
    $address_fields['billing_postcode']['placeholder'] = __('Enter your postcode', 'my_theme_slug');


    return $address_fields;
}

Naturally this goes on function.php file of your active child theme or theme

Official reference: WooThemes - Customizing checkout fields using actions and filters


Note concerning the 'class' property

There is 2 ways to handle it:

  • The field is alone in one line (width 100%), you use: 'form-row-wide'
  • There is 2 fields side by side on the same line, you use:
    • 'form-row-first' for the first field
    • 'form-row-last' for the second field
art
//-------------------------- OVERRIDING BILLING STATE FIELD -------------------------------// 

    <?php
    //Removing previous one by using unset
            add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );

            // Our hooked in function - $fields is passed via the filter!
            function custom_override_checkout_fields( $fields ) {
                 unset($fields['billing']['billing_state']);

                 return $fields;
            }


            add_filter( 'woocommerce_default_address_fields' , 'art_override_default_address_fields' );

            function art_override_default_address_fields( $address_fields ) {

              // @ for state
                $address_fields['Billing_State']['type'] = 'text';
                $address_fields['Billing_State']['class'] = array('form-row-wide');
                $address_fields['Billing_State']['required'] = true;
                $address_fields['Billing_State']['label'] = __('State', 'my_theme_slug');
                $address_fields['Billing_State']['placeholder'] = __('Enter state', 'my_theme_slug');


                $address_fields['Billing_State']['default'] =hgfdkda;

                 return $address_fields;
            }
        ?>
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!