Custom checkout random select field in Woocommerce

Question

I have a simple WordPress site that is using WooCommerce.

I would like to add the functionality onto the /checkout page a custom woocommerce field. This field would ideally be of type Select with multiple options. This is not a problem as I am able to add the below code into my child theme's functions.php to create this.

function customise_checkout_field($checkout)
{
// Heading for form
echo '<p>Custom Question Heading</p>';

woocommerce_form_field( 'questionOne', array(
    'type' => 'select',
    'class' => array( 'custom-dev-select'),
    'label' => 'This is the question',
    'options' => array(
        'blank' => 'Choose One',
        'value1' => 'Answer 1,
        'value2' => 'Answer 2
    ),
    'required' => true
    )
);

$checkout->get_value( $random_question );

}

This will produce a single select option with the above attributes.

The issue is, I would like to have say X3 of these 'woocommerce_form_field's, each with different a different label/question and different options. For example;

Question 1: Is an apple a:

Option 1: Fruit Option 2: Meat Option 3: Veg

Question 2: Some question

Option 1: lorem Option 2: lorem Option 3: lorem

And then each time the page is loaded or refreshed etc a different question is loaded.

I have tried adding multiple 'woocommerce_form-field's into an array and using array_rand etc however this does not work. Here is some example code I have in place which currently is not working, but you get the idea of how I would like it to work.

function customise_checkout_field($checkout)
{
// Heading for form
echo '<p>Custom Question Heading</p>';

$questions = array(
    "question1" => array(
        "This is question one",
        "Choice 1",
        "Choice 2"
    ),

    "question2" => array(
        "This is question Two",
        "Choice 1.1",
        "Choice 2.1"
    ),

    "question3" => array(
        "label" => "This is question Three",
        "Choice 1.2",
        "Choice 2.2"
    ),
 );

$random_question = $questions[array_rand($questions)];


$selected_label = $random_question[0];
$selected_answer = $random_question[1];
$selected_answer2 = $random_question[2];


woocommerce_form_field( 'questionOne', array(
    'type' => 'select',
    'class' => array( 'custom-dev-select'),
    'label' => $selected_label,
    'options' => array(
        'blank' => 'Choose One',
        'value1' => $selected_answer,
        'value2' => $selected_answer2
    ),
    'required' => true
    )
);


$checkout->get_value( $random_question );
}
add_action('woocommerce_after_order_notes', 'customise_checkout_field');

Any help would be greatly appreciated. WordPress, woocommerce & php is fairly new to me as this is not my main language to use.

LoicTheAztec LoicTheAztec · Accepted Answer · 2018-11-13T00:58:03

To make a random checkout select field (as a random question) with validation and saving the data as custom order meta data, use the following:

add_action( 'woocommerce_after_order_notes', 'custom_select_field_with_random_options', 10, 1 );
function custom_select_field_with_random_options( $checkout )
{
    // Heading for form
    echo '<h4>' . __("Custom Question Heading", "woocommerce") . '</h4>';

    $questions = array(
        '1' => array(
            'label'     => __("one", "woocommerce"),
            'options'   => array(
                'value1'    => __("Choice 1.1", "woocommerce"),
                'value2'    => __("Choice 1.2", "woocommerce"),
            ),
        ),
        '2' => array(
            'label'     => __("two", "woocommerce"),
            'options'   => array(
                'value1'    => __("Choice 2.1", "woocommerce"),
                'value2'    => __("Choice 2.2", "woocommerce"),
            ),
        ),
        '3' => array(
            'label'     => __("three", "woocommerce"),
            'options'   => array(
                'value1'    => __("Choice 3.1", "woocommerce"),
                'value2'    => __("Choice 3.2", "woocommerce"),
            ),
        ),
    );

    $key      = array_rand($questions); // Random key
    $question = $questions[$key]; // The question data array
    $label    = $question['label'];
    $default  = array( '' => __("Choose an answer", "woocommerce") );
    $options  = $default + $question['options'];

    woocommerce_form_field( 'question_'.$key, array(
        'type' => 'select',
        'class' => array( 'custom-dev-select'),
        'label' => __("This is the question", "woocommerce") . ' ' . $label,
        'options' => $options,
        'required' => true
    ), $checkout->get_value( 'question_'.$key ) );

    echo '<input type="hidden" name="question_key" value="'.$key.'">';
}

// Custom Checkout fields validation
add_action('woocommerce_checkout_process', 'custom_checkout_select_field_validation');
function custom_checkout_select_field_validation() {
    if ( isset($_POST['question_key']) ) {
        $key = esc_attr( $_POST['question_key'] );

        if ( isset($_POST['question_'.$key]) && empty($_POST['question_'.$key]) )
            wc_add_notice( '<strong>'. __("Please select a value", "woocommerce") . '</strong>', 'error' );
    }
}

// Save custom checkout fields the data to the order
add_action( 'woocommerce_checkout_create_order', 'custom_checkout_field_update_meta', 10, 2 );
function custom_checkout_field_update_meta( $order, $data ){
    if ( isset($_POST['question_key']) ) {
        $key = esc_attr( $_POST['question_key'] );

        if ( isset($_POST['question_'.$key]) && ! empty($_POST['question_'.$key]) ) {
            $order->update_meta_data( '_question_value', esc_attr( $_POST['question_'.$key] ) );
            $order->update_meta_data( '_question_key', $key );
        }
    }
}

// display the random question data in the order admin panel
add_action( 'woocommerce_admin_order_data_after_order_details', 'display_question_to_admin_order', 10, 1 );
function display_question_to_admin_order( $order ){
    if( $key = $order->get_meta( '_question_key' ) ) {
        if( $value = $order->get_meta( '_question_value' ) ) {
            echo '<br style="clear:both">
            <p><strong>' . __( "Random question", "woocommerce" ) . ' '. $key . ':</strong> ' . $value . '</p>';
        }
    }
}

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

Custom checkout random select field in Woocommerce

1 Answers