I’ve expanded on the code I posted in my tutorial on how to customize the WooCommerce Checkout.
First you need to register the new checkout fields. This is where I’ve added a current_user_can() to test if the current user has the appropriate capabilities to see these extra fields. I’m using the manage_options capability because it was easier for me to test.
// Add new checkout fields
function kia_filter_checkout_fields( $fields ){
if( current_user_can( 'manage_options' ) ) {
$fields['extra_fields'] = array(
'date_of_purchase' => array(
'type' => 'text',
'label' => __( 'Date of Purchase', 'your-plugin' ),
'placeholder' => _x ('MM/DD/YYYY', 'placeholder', 'your-plugin' ),
'required' => false,
'class' => array( 'form-row-wide' ),
'clear' => true
),
'place_of_purchase' => array(
'type' => 'select',
'label' => __( 'Place of Purchase', 'your-plugin' ),
'placeholder' => _x( 'Select Option', 'placeholder', 'your-plugin' ),
'required' => false,
'class' => array('form-row-wide' ),
'clear' => true,
'options' => array('option-1' => __( 'Option 1', 'your-plugin' ), 'option_2' => __( 'Option 2', 'your-plugin' ), 'option_3' => __( 'Option 3', 'your-plugin' ) )
),
'color_item' => array(
'type' => 'select',
'label' => __( 'Product Color', 'your-plugin' ),
'placeholder' => _x( 'Select Option', 'placeholder', 'your-plugin' ),
'required' => false,
'class' => array( 'form-row-wide' ),
'clear' => true,
'options' => array( 'option-1' => __( 'Option 1', 'your-plugin' ), 'option_2' => __( 'Option 2', 'your-plugin' ), 'option_3' => __( 'Option 3', 'your-plugin' ) )
),
'product_model' => array(
'type' => 'select',
'label' => __( 'Model', 'your-plugin' ),
'placeholder' => _x('Select Option', 'placeholder', 'your-plugin' ),
'required' => false,
'class' => array('form-row-wide'),
'clear' => true,
'options' => array( 'option-1' => __( 'Option 1', 'your-plugin' ), 'option_2' => __( 'Option 2', 'your-plugin' ), 'option_3' => __( 'Option 3', 'your-plugin' ) )
),
'product_condition' => array(
'type' => 'multicheck',
'label' => __( 'Product Condition:', 'your-plugin' ),
'description' => __( 'Check All That Apply:', 'your-plugin' ),
'required' => false,
'clear' => true,
'options' => array( 'lightbulb_out' => __( 'Lightbulb is Out', 'your-plugin' ),
'not_turn_on' => __( 'Will Not Turn On', 'your-plugin' ),
'fan_not_running' => __( 'Fan Stopped Running', 'your-plugin' ),
'strange_noise' => __( 'Strange Noise', 'your-plugin' ),
'not_catching' => __( 'Not Catching Insectsn', 'your-plugin' ),
'csr_other' => __( 'Other', 'your-plugin' ),
),
),
'case_description' => array(
'type' => 'textarea',
'label' => __( 'Description of Case', 'your-plugin' ),
'placeholder' => _x( 'Please provide details', 'placeholder', 'your-plugin' ),
'required' => false,
'class' => array( 'form-row-wide' ),
'clear' => true,
),
);
}
return $fields;
}
add_filter( 'woocommerce_checkout_fields', 'kia_filter_checkout_fields' );
You will note that I’ve done something different with your “Fan Stopped”, etc checkboxes. You don’t have to do this, but I was curious and procrastinating. WooCommerce doesn’t support a multi-check set of checkboxes, but it does support defining your own custom field types. So with the following we create a new type of form field:
function kia_multicheck_form_field( $field, $key, $args, $value ){
$field_html = '<fieldset>';
if( isset( $args['label'] ) ){
$field_html .= '<legend>' . $args['label'] . '</legend>';
}
if ( ! empty( $args['options'] ) ) {
foreach ( $args['options'] as $option_key => $option_text ) {
$field_html .= '<input type="checkbox" class="input-multicheck ' . esc_attr( implode( ' ', $args['input_class'] ) ) . '" value="' . esc_attr( $option_key ) . '" name="' . esc_attr( $key ) . '[]" id="' . esc_attr( $args['id'] ) . '_' . esc_attr( $option_key ) . '"' . checked( $value, $option_key, false ) . ' />';
$field_html .= '<label for="' . esc_attr( $args['id'] ) . '_' . esc_attr( $option_key ) . '" class="multicheck ' . implode( ' ', $args['label_class'] ) . '">' . $option_text . '</label>';
}
}
if ( $args['description'] ) {
$field_html .= '<span class="description">' . esc_html( $args['description'] ) . '</span>';
}
$field_html .= '</fieldset>';
$container_class = esc_attr( implode( ' ', $args['class'] ) );
$container_id = esc_attr( $args['id'] ) . '_field';
$after = ! empty( $args['clear'] ) ? '<div class="clear"></div>' : '';
$field_container = '<p class="form-row %1$s" id="%2$s" data-sort="' . esc_attr( $sort ) . '">%3$s</p>';
$field = sprintf( $field_container, $container_class, $container_id, $field_html ) . $after;
return $field;
}
add_filter( 'woocommerce_form_field_multicheck', 'kia_multicheck_form_field', 10, 4 );
Next we display the new fields on the checkout page…. but only if they exist, because harkening back to the first code block, they won’t be in the checkout fields array if the user doesn’t have the right permissions.
// Display the extra field on the checkout form
function kia_extra_checkout_fields(){
$checkout = WC()->checkout();
if( isset( $checkout->checkout_fields['extra_fields'] ) ) { ?>
<div class="extra-fields">
<h3><?php _e( 'CSR Information' ); ?></h3>
<?php
// because of this foreach, everything added to the array in the previous function will display automagically
foreach ( $checkout->checkout_fields['extra_fields'] as $key => $field ) :
woocommerce_form_field( $key, $field, $checkout->get_value( $key ) );
endforeach; ?>
</div>
<?php }
}
add_action( 'woocommerce_checkout_after_customer_details' ,'kia_extra_checkout_fields' );
Now you’ll probably need to add some CSS to make this look better, and you need a way to save the multicheck data. You can review my tutorial on how to save the rest, and perhaps figure out the multicheck on your own.