woocommerce checkout if statement

Question

I'm trying to create a select box on my client's woocommerce checkout page on Wordpress that asks where the customer heard about the site. I've got as far as creating it and am now trying to have a text box pop up when "other" is selected. So far, it's not happening.

Here's the code I have for the drop down and the text box at the moment:

/**
* Add how did you hear about us field to the checkout
**/
add_action('woocommerce_after_order_notes', 'how_did_you_hear');

function how_did_you_hear( $checkout ) {

echo '<div id="how_did_you_hear">';

woocommerce_form_field( 'hear_about_us', array(
'type'          => 'select',
'class'         => array('how_did_you_hear_about_us form-row-wide'),
'label'         => __('How did you hear about us?'),
'required'      => true,
'onChange'      =>'howdidOnchange();',
'options'       => array(
'' => __('-- Choose an option --', 'woocommerce'),
'Google' => __('Google', 'woocommerce'),
'Facebook' => __('Facebook', 'woocommerce'),
'Twitter' => __('Twitter', 'woocommerce'),
'Mother & Baby Magazine' => __('Mother & Baby Magazine', 'woocommerce'),
'eBay' => __('eBay', 'woocommerce'),
'Count the Kicks' => __('Count the Kicks', 'woocommerce'),
'Other (please specify)' => __('Other (please specify)', 'woocommerce'))
), $checkout->get_value( 'hear_about_us' ));

echo '</div>';

}

/**
* Process the checkout
**/
add_action('woocommerce_checkout_process', 'how_did_you_hear_process');

function how_did_you_hear_process() {
global $woocommerce;
}

/**
* Update the order meta with field value
**/
add_action('woocommerce_checkout_update_order_meta', 'how_did_you_hear_update_order_meta');

function how_did_you_hear_update_order_meta( $order_id ) {
if ($_POST['hear_about_us']) update_post_meta( $order_id, 'How did you hear about us?', esc_attr($_POST['hear_about_us']));
}

//Add text box if other is selected

if ($_POST['hear_about_us'] == 'Other (please specify)') {

add_action('woocommerce_after_order_notes', 'how_did_other');

function how_did_other( $checkout ) {

echo '<div id="how_did_other">';

woocommerce_form_field( 'other_please_specify', array(
'type'          => 'text',
'class'         => array('other-please-specify form-row-wide'),
'label'         => __('Other (please specify)'),
'placeholder'       => __('Enter something'),
), $checkout->get_value( 'other_please_specify' ));

echo '</div>';

}

/**
* Process the checkout
**/
add_action('woocommerce_checkout_process', 'how_did_other_process');

function how_did_other_process() {
global $woocommerce;
}

/**
* Update the order meta with field value
**/
add_action('woocommerce_checkout_update_order_meta', 'how_did_other_update_order_meta');

function how_did_other_update_order_meta( $order_id ) {
if ($_POST['other_please_specify']) update_post_meta( $order_id, 'Other (please specify)', esc_attr($_POST['other_please_specify']));
}
}

I've read a few ways to do this when it's not woocommerce, but I can't get that to work either, so this seemed like the best approach - although I could be wrong.

I've also noticed that in the code on the site, when the placeholder is selected, it shows as <option value selected="selected"> but when I select the other options, that is still only shown on the placeholder, so I don't know if that has something to do with the problem either.

Answer 1

$_POST['hear_about_us'] will only be set after the checkout page has been submitted, and the woocommerce_after_order_notes hook runs when the checkout page is loaded. So you're adding how_did_other to the hook after it has already run.

The simplest way to do it is to include the other text box initially but hidden with style="display:none;" , and reveal it with javascript

var selectInput = $('.how_did_you_hear_about_us');
var otherInput = $('.other-please-specify');
selectInput.change(function() {
    if(selectInput.val()==='Other (please specify)') {
        otherInput.show();
    } else {
        otherInput.hide();
    }
});