show a required text field when a checkbox is checked in WooCommerce checkout

user_13850403 0
Viewed 1656

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.

The part that works:

// 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');
        }
    }
}

My PHP knowledge is very low.

checkout woocommerce wordpress php jquery
1 Answers

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

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

user_37307540
Related