在WooCommerce结帐中选中一个复选框时显示一个必填文本字段 [英] show a required text field when a checkbox is checked in WooCommerce checkout

问题描述

我正在研究带有自定义复选框的woocommerce注册解决方案。

I working on a solution in woocommerce registration with custom checkbox.

该计划是，当有人选择自定义复选框时，将打开一个附加文本字段，并且是必需的。

The plan is when somebody select the custom checkbox an additional textfield opens and have to be required.

起作用的部分：

// 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知识非常低。

My PHP knowledge is very low.

推荐答案

已更新（经过测试并可以正常工作）

Updated (tested and works)

使用以下代码，请选中您的复选框可见所需的自定义必填文本字段（带有验证并另存为用户元数据和订单元数据）：

With the code below, when your checkbox is checked a custom required text field is visible (with validation and save as user meta data and order meta data):

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文件中。经过测试，可以正常工作。

Code goes in functions.php file of your active child theme (or active theme). Tested and works.

这篇关于在WooCommerce结帐中选中一个复选框时显示一个必填文本字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！