有条件地自定义 WooCommerce 结帐字段

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

您错过了此行中 "shipping_type" 周围的引用：

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

如果此修复不起作用：javascript 控制台是否有错误？

Answer 2

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

// Customizing default checkout shipping fields
add_filter( 'woocommerce_shipping_fields', 'customizing_shipping_fields' );
function customizing_shipping_fields($fields){

    # 1. Remove shipping fields
    unset($fields['shipping_country']);
    unset($fields['shipping_state']);

    # 2. Customize shipping fields
    $label_fields = array(
        'first_name' => __('取件者 *'),  'last_name'  =>   __('手機號碼 *'),
        'company'    => __('店名 *'),    'city'        => __('服務編號 *'),
        'address_1'  => __('收件地址 *'), 'address_2' => __('預計來訪時間 *'),
    );
    foreach( $label_fields as $key => $value ){
        $fields['shipping_'.$key]['label'] = $value;
        $fields['shipping_'.$key]['id'] = 'shipping_'.$key;
    }

    # 3. Customize shipping fields required
    $required_fields = array( 'first_name', 'last_name', 'company', 'city', 
        'address_1', 'address_2', 'postcode');
    foreach( $required_fields as $key => $value )
        $fields['shipping_'.$key]['required'] = false;

    return $fields;
}

// Add a Custom radio field for shipping options
add_action( 'woocommerce_before_checkout_shipping_form', 'custom_shipping_radio_button', 10, 1 );
function custom_shipping_radio_button( $checkout ) {
    # 1. CSS styling
    ?>
    <style>label.radio{ display:inline-block; margin-right:1em; }</style>
    <?php

    # 2. Add a custom radio field
    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' ) );

    # 3. jQuery Script
    ?>
    <script type="text/javascript">
        jQuery(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>
    <?php
}

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

已测试并有效。

现在，如果您想隐藏带有标签的字段，您的 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>

经过测试并且也有效……

But you should need to set the fields to be not required as you will face some problems when submitting data… This will oblige you to make some other changes in order to get something functional. But this will be a new question…

Answer 3

@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;
}

有条件地自定义 WooCommerce 结帐字段

Conditionally customizing WooCommerce checkout fields

php

jquery

wordpress

woocommerce

checkout