Woocommerce将邮政编码更改为下拉菜单

时间:2018-02-05 22:16:11

标签: javascript php woocommerce

我尝试更改结帐页面中的邮政编码并将其限制为特定选项,因此我使用此代码

// Hook in
add_filter('woocommerce_default_address_fields','custom_override_default_address_fields');

// Our hooked in function - $fields is passed via the filter! function custom_override_default_address_fields($address_fields) {

// Just changing what is needed to turn it into a select.
// Modify other options if you need.
$address_fields['postcode']['type'] = 'select';
$address_fields['postcode']['options'] = array('12652' => "Area 1",
                                               '21511' => "Area 2",
                                               '42511' => "Area 3");

$address_fields['postcode']['default'] =12652;

return $address_fields;

实际上一切都还可以,但主要的问题是选项的价值我用它来计算运费但没有更新..我正在寻找js的东西来获得邮政编码的选择器但是我无法找到或解决这个问题..任何帮助?

1 个答案:

答案 0 :(得分:0)

#[ FIXED ]
Here is what i did and it worked fine with me..


Step 1 => add this filter in order to add new field in checkout form.

    add_filter( 'woocommerce_checkout_fields' , 'add_address_type_field' );
    function add_address_type_field( $fields ) {

     $address_type_field = array(
        'type'      => 'select',
        'required'  => false,
        'class'     => array('address-field', 'form-row-wide', 'validate-addresstype'),
        'clear'     => true,
        'options'   => array(
                        'postCode' => 'Area 1',
                        'postCode' => 'Area 2',
                    ),
     );

     $fields['billing']['billing_address_type']   = $address_type_field;

     return $fields;
    }



Step 2 => using css to hide default postal code input 



#billing_postcode{
   display:none;    
}


Step 3 => using JavaScript Events to make eventlistener 'Change' .. once the select value change event assign this value to default post code input by adding this code in form-billing.php


document.querySelector('#billing_address_type').addEventListener("change", function(){
        document.querySelector('input#billing_postcode').value = 
        document.querySelector('#billing_address_type').value;
        jQuery('body').trigger('update_checkout');
    });