Question

我正在尝试修改WooCommerce签出字段。我想要达到两点。

条件字段

我想在发货部分为不同的运输类型制作条件字段。为了达到这一点，使用了Javascript。
管理员可以按照后端

结果，我编写如下代码。

然而，我遇到了一个问题。我的javascript无法在前端工作。

有人可以帮助我吗？

    //修改check out shipping field
    add_action( 'woocommerce_before_checkout_shipping_form', 'add_shipping_type' );
    function add_shipping_type( $checkout ) {
        woocommerce_form_field( 'shipping_type', array(
            'type' => 'radio',
            'class' => array( 'form-row-wide' ),
            'label' => '收件方式',
            'options' => array(
                'shipping_1'    => '全家店到店',
                'shipping_2'    => '指定地址',
                'shipping_3' => '自行取貨',
        )
     ),$checkout->get_value( 'shipping_type' ));
    }

    add_filter( 'woocommerce_shipping_fields', 'custom_name_field_2' );
    function custom_name_field_2($fields) {
        $fields['shipping_first_name'] = array(
            'label'=>"取件者 *",
            'id' => 'shipping_first_name'
        );
        $fields['shipping_last_name'] = array(
            'label'=>"手機號碼 *",
            'id' => 'shipping_last_name'
        );
        $fields['shipping_company'] = array(
            'label'=>"店名 *",
            'id' => 'shipping_company'
        );
        $fields['shipping_city'] = array(
            'label'=>"服務編號 *",
            'id' => 'shipping_city'
        );
        $fields['shipping_address_1'] = array(
            'label'=>"收件地址 *",
            'id' => 'shipping_address_1'
        );
        $fields['shipping_address_2'] = array(
            'label'=>"預計來訪時間 *",
            'id' => 'shipping_address_2'
        );
        return $fields;
    }

    add_filter( 'woocommerce_shipping_fields', 'remove_shipping_company' );
    function remove_shipping_company($fields){
        unset($fields['shipping_country']);
        unset($fields['shipping_state']);
        return $fields;
    }


    add_filter("woocommerce_shipping_fields", "shipping_container");
    function shipping_container(){
        $output = '
        <style>label.radio{display:inline-block;margin-right:1rem;}</style>
        <script>
        var $ = jQuery.noConflict();
        $(document).ready(function(){
        $("input[name=shipping_type]").on("change",function(){
            if($("#shipping_type_shipping_1").is(":checked")) {
                    $("#shipping_first_name,#shipping_last_name,#shipping_city,#shipping_company").fadeIn();
            } else {
            $("#shipping_first_name,#shipping_last_name,#shipping_city,#shipping_company").fadeOut();
            }
            if($("#shipping_type_shipping_2").is(":checked")) {
            $("#shipping_postcode,#shipping_address_1").fadeIn();
            } else {
            $("#shipping_postcode,#shipping_address_1").fadeOut();
            }
            if($("#shipping_type_shipping_3").is(":checked")) {
            $("#shipping_address_2_field_2").fadeIn();
            } else {
            $("#shipping_address_2_field_2").fadeOut();
            }
        })
        });
        </script>
        ';
        echo $output;
    }

Answer 1

首先你可以在涉及相同的钩子时合并一些函数...然后你的jQuery脚本最好像下面的代码一样设置它（你的jQuery脚本中也有很多小错误） ：

    <script type="text/javascript">
        jQuery(function($){
            $("input[name=shipping_type]").on("change",function(){
                if($("#shipping_type_shipping_1").is(":checked")) {
                    $("#shipping_first_name_field,#shipping_last_name_field,#shipping_city_field,#shipping_company_field").fadeIn();
                } else {
                    $("#shipping_first_name_field,#shipping_last_name_field,#shipping_city_field,#shipping_company_field").fadeOut();
                }
                if($("#shipping_type_shipping_2").is(":checked")) {
                    $("#shipping_postcode_field,#shipping_address_1_field").fadeIn();
                } else {
                    $("#shipping_postcode_field,#shipping_address_1_field").fadeOut();
                }
                if($("#shipping_type_shipping_3").is(":checked")) {
                    $("#shipping_address_2_field_2").fadeIn();
                } else {
                    $("#shipping_address_2_field_2").fadeOut();
                }
            });
        });
    </script>

代码进入活动子主题（或活动主题）的function.php文件。

经过测试和工作。

现在，如果您想隐藏带标签的字段，您的jQuery脚本将是：

tosql()

经过测试并且也有效......

但您需要将字段设置为不需要，因为在提交数据时您将遇到一些问题......这将迫使您进行一些其他更改以获得功能。 但这将是一个新问题 ......

Answer 2

@LoicTheAztec感谢您的回复，您给了我很大的帮助。如您所述，必填字段是问题所在。因此，我尝试使用下面的代码来解决问题。虽然它解决了所需字段的问题，但却导致字段标签无法显示。

add_filter( 'woocommerce_shipping_fields', 'customizing_shipping_fields_required' );
function customizing_shipping_fields_required($fields) {
    $fields['shipping_first_name'] = array(
    'required'=>false
    );
    $fields['shipping_last_name'] = array(
    'required'=>false
    );
    $fields['shipping_company'] = array(
    'required'=>false
    );
    $fields['shipping_city'] = array(
    'required'=>false
    );
    $fields['shipping_address_1'] = array(
    'required'=>false
    );
    $fields['shipping_address_2'] = array(
    'required'=>false
    );
    $fields['shipping_postcode'] = array(
    'required'=>false
    );
    return $fields;
}

Answer 3

你在这一行上错过了“shipping_type”的引用：

$("input[name='shipping_type'").on("change",function(){

如果此修复程序无效：您是否在javascript控制台中出错？

有条件地定制WooCommerce结帐字段

3 个答案: