在 WooCommerce 结帐中选中复选框时显示必填文本字段

Question

我正在使用自定义复选框开发 woocommerce 注册解决方案。

计划是当有人选择自定义复选框时，会打开一个额外的文本字段并且必须是必需的。

起作用的部分：

// add the special customer role
add_action('admin_init', 'uiwc_new_role');
function uiwc_new_role() {  
    add_role(
        'kundenkarte',
        "Kundenkarte",
        array(
            'read'         => true,
            'delete_posts' => false
        )
    );
}

add_action( 'woocommerce_after_order_notes', 'custom_checkout_field_with_wholesale_option' );
function custom_checkout_field_with_wholesale_option( $checkout ) {

    if( current_user_can( 'wholesale_customer' ) ) return; // exit if it is "wholesale customer"

    echo '<div id="wholesale_checkbox_wrap">';
    woocommerce_form_field('wholesale_checkbox', array(
        'type' => 'checkbox',
        'class' => array('input-checkbox'),
        'label' => __('Do you have a Customer Card?'),
        'placeholder' => __('card'),
        'required' => false,
        'value'  => true
    ), '');
    echo '</div>';

}

// Conditionally change customer user role
add_action( 'woocommerce_checkout_update_order_meta', 'wholesale_option_update_user_meta' );
function wholesale_option_update_user_meta( $order_id ) {
    if ( isset($_POST['wholesale_checkbox']) ) {
        $user_id = get_post_meta( $order_id, '_customer_user', true ); // Get user ID
        if( $user_id > 0 ){
            $user = new WP_User($user_id);
            $user->remove_role('customer');
            $user->add_role('kundenkarte');
        }
    }
}

我的PHP知识很低。

Answer 1

已更新（已测试且有效）

使用下面的代码，当您的复选框被选中时，一个自定义的必填文本字段是可见的（带有验证并保存为用户元数据和订单元数据）：

add_action( 'woocommerce_after_order_notes', 'custom_checkout_field_with_wholesale_option' );
function custom_checkout_field_with_wholesale_option( $checkout ) {

    if( current_user_can( 'wholesale_customer' ) ) return; // exit if it is "wholesale customer"

    echo '<style> #wholesale_card_field.hidden { display:none; }</style>
    <div id="wholesale_checkbox_wrap">';

    woocommerce_form_field('wholesale_checkbox', array(
        'type' => 'checkbox',
        'class' => array('input-checkbox'),
        'label' => __('Do you have a Customer Card?'),
        'placeholder' => __('card'),
        'required' => false,
        'value'  => true
    ), '');

    woocommerce_form_field('wholesale_card', array(
        'type' => 'text',
        'class' => array('hidden'),
        'placeholder' => __('Customer card Id'),
        'required' => true,
    ), '');

    echo '</div>';

    ?>
    <script>
    jQuery(function($){
        $('#wholesale_checkbox_field input').click(function(){
            if( $(this).is(':checked')) {
                $('#wholesale_card_field').css('display', 'none').removeClass('hidden').show();
            } else if ( ! $(this).is(':checked') && $('#wholesale_card_field').css('display') !== 'none' ) {
                $('#wholesale_card_field').hide();
            }
        });
    });
    </script>
    <?php

}

// Validation
add_action( 'woocommerce_checkout_process', 'wholesale_option_validation' );
function wholesale_option_validation() {
    if ( isset($_POST['wholesale_checkbox']) && isset($_POST['wholesale_card']) && empty($_POST['wholesale_card']) ) {
        wc_add_notice( __("Please fill in your customer card Id"), "error" );
    }
}

// Conditionally change customer user role and add customer card as order and user meta
add_action( 'woocommerce_checkout_update_order_meta', 'wholesale_option_update_meta' );
function wholesale_option_update_meta( $order_id ) {
    if ( isset($_POST['wholesale_checkbox']) ) {
        $user_id = get_post_meta( $order_id, '_customer_user', true ); // Get user ID
        if( $user_id > 0 ){
            $user = new WP_User($user_id);
            $user->remove_role('customer');
            $user->add_role('kundenkarte');
        }

        // Add customer card Id as order metadata
        if ( isset($_POST['wholesale_card']) ) {
            update_post_meta( $order_id, 'wholesale_card', sanitize_text_field( $_POST['wholesale_card'] ) );

            if( $user_id > 0 )
                update_user_meta( $user_id, 'wholesale_card', sanitize_text_field( $_POST['wholesale_card'] ) );
        }
    }
}

// Display customer card on admin order edit page under billing address
add_action( 'woocommerce_admin_order_data_after_billing_address', 'display_wholesale_option_admin_order', 10, 1 );
function display_wholesale_option_admin_order( $order ){
    echo '<p><strong>'.__('Card Id').':</strong> ' . $order->get_meta( 'wholesale_card' ) . '</p>';
}

代码在您的活动子主题（或活动主题）的functions.php 文件中。经过测试并且可以工作。