WooCommerce签出邮编字段顺序

Question

我在尝试修改结账页面。使用插件，我能够用街道、房屋号和“额外”字段替换两个默认的地址行(它们都在一行上)。在下面，你可以找到邮政编码和城市字段。

但是，当用户输入邮政编码和住房号时，我想生成街道和城市，所以我想切换字段。

就像这样：

街道-豪森号码-额外 邮政编码-城市

我希望它是：

邮编-豪斯号码-额外 街道-城市

我用的是普通钩子：

add_filter("woocommerce_checkout_fields", "order_fields");

function order_fields($fields) {

    $order = array(
        "billing_first_name", 
        "billing_last_name", 
        "billing_company", 
        "billing_street",                       
        "billing_house_number",
        "billing_house_number_extra",
        "billing_postcode",
        "billing_city",
        "billing_country", 
        "billing_email", 
        "billing_phone"

    );
    foreach($order as $field)
    {
        $ordered_fields[$field] = $fields["billing"][$field];
    }

    $fields["billing"] = $ordered_fields;
    return $fields;

}

然而..。试图移动邮政编码字段是不成功的。如果我将邮政编码和city字段一起移动，我就可以移动它们，但只需将邮政编码字段单独移动就会显示出奇怪的行为(例如:切换街道和邮政编码字段)。

我遗漏了什么？

Answer 1

正如@XciD所说的在他的回答中，问题不在于实际的字段排序，因为您的woocommerce_checkout_fields钩子重新订购它们很好。问题在于WooCommerce的排队address-i18n.js脚本，它检查商店的区域设置，并在此基础上动态重新订购结账(和帐户地址)字段(这很烦人，因为表面上给了您一个钩子重新订购它们.)。

警告

不幸的是，没有非常简单的方法来解决这一问题；最后，我提出了一个相当讨厌的内联jQuery shiv，将字段移回我最初设定的顺序；但是值得注意的是，WooCommerce团队可能完全是用2.7版本重构所有这些，所以我不知道这将需要多长时间。

用那句话说:继续黑客攻击！

function vnmTheme_addressFieldsOverride() {
    if (is_wc_endpoint_url('edit-address') || is_checkout()) {
        ?>

        <script>
            jQuery(document).ready(function($) {

                $(document.body).on('country_to_state_changing', function(event, country, wrapper) {

                    var $postcodeField = wrapper.find('#billing_postcode_field, #shipping_postcode_field');
                    var $housenoField = wrapper.find('#billing_house_number_field, #shipping_house_number_field' );

                    var fieldTimeout = setTimeout(function() {
                        $postcodeField.insertBefore($housenoField);
                    }, 50);
                });

            });
        </script>

        <?php
    }
}

add_action('wp_footer', 'vnmTheme_addressFieldsOverride', 999);

使用wp_footer (并假设我们只想在结帐或我帐户下的“编辑地址”页面上运行此操作)，这将插入一些内联jQuery来侦听与address-18n.js ('country_to_state_changing')中相同的事件。当触发该事件时，它将等待50 is才能重新设置字段，并将postcode置于自定义house_number字段之前。延迟是因为两个侦听器将同时被触发，而且address-i18n.js似乎具有优先权，因此setTimeout确保我们的自定义监听器稍后才能完成它的工作。

我在常规的state字段中使用了这个解决方案，它运行得很好。确保检查您的house_number字段ID以确保选择器是正确的，但这也会解决您的问题。

哦！还有一点值得注意的是，只有在不推迟jQuery加载的情况下才能工作，但是所有内联jQuery都是这样，包括WooCommerce插入到结帐页面中的所有内容。

Answer 2

这将是困难的。这是因为输入的类。

首先，你必须这样做：

add_filter("woocommerce_checkout_fields", "order_fields");

function order_fields($fields) {

    $order = array(
        "billing_first_name" => [],
        "billing_last_name" => [],
        "billing_company" => [],
        "billing_street" => [],
        "billing_postcode" => ["custom-css"],
        "billing_house_number" => [],
        "billing_house_number_extra" => [],
        "billing_city" => [],
        "billing_country" => [],
        "billing_email" => [],
        "billing_phone" => []
    );

    foreach($order as $key => $class)
    {
        $field = $fields["billing"][$key];

        if(sizeof($class) > 0){
            $field['class'] = $class;
        }

        $ordered_fields[$key] = $field;
    }

    $fields["billing"] = $ordered_fields;
    return $fields;
}

然后，您必须找到一种方法来覆盖WooCommerce地址-i18njs或编写您自己的js。

https://github.com/woothemes/woocommerce/blob/2.6.1/assets/js/frontend/address-i18n.js#L47

问题是在输入中添加一些浮点数的form-row-first form-row-last辅助类。