How to add custom fields to comments form in WordPress/WooCommerce 3+

Question

I'm trying to add a "Phone" field in the product comments (WooComerce 3+). *For unregistered users too (guests). Phone number should only be seen by the administrator in the admin panel.

*Phone field need make "Required".

I tried this code, but this not work:

function true_phone_number_field( $fields ) {
$fields['phone'] = '<p class="comment-form-phone"><label for="phone">Phone</label> <input id="phone" name="phone" type="text" value="" size="30" /></p>';
}
add_filter( 'comment_form_default_fields', 'true_phone_number_field');

Answer 1

    // Add phone number field

    function add_review_phone_field_on_comment_form() {
        echo '<p class="comment-form-phone uk-margin-top"><label for="phone">' . __( 'Phone', 'text-domain' ) . '</label><span class="required">*</span><input class="uk-input uk-width-large uk-display-block" type="text" name="phone" id="phone"/></p>';
    }
    add_action( 'comment_form_logged_in_after', 'add_review_phone_field_on_comment_form' );
    add_action( 'comment_form_after_fields', 'add_review_phone_field_on_comment_form' );


    // Save phone number
    add_action( 'comment_post', 'save_comment_review_phone_field' );
    function save_comment_review_phone_field( $comment_id ){
        if( isset( $_POST['phone'] ) )
          update_comment_meta( $comment_id, 'phone', esc_attr( $_POST['phone'] ) );
    }

    function print_review_phone( $id ) {
        $val = get_comment_meta( $id, "phone", true );
        $title = $val ? '<strong class="review-phone">' . $val . '</strong>' : '';
        return $title;
    }

    // Print phone number - remove if not needed to show in front end
/*
    add_action('woocommerce_review_before_comment_meta', 'get_comment_phone' );
    function get_comment_phone($comment){
        echo print_review_phone($comment->comment_ID);
    }
*/

// List in admin list table

add_filter('manage_edit-comments_columns', 'my_add_comments_columns');

function my_add_comments_columns($my_cols) {

    $temp_columns = array(
        'phone' => 'Phone'
    );
    $my_cols = array_slice($my_cols, 0, 3, true) + $temp_columns + array_slice($my_cols, 3, NULL, true);

    return $my_cols;
}

add_action('manage_comments_custom_column', 'my_add_comment_columns_content', 10, 2);

function my_add_comment_columns_content($column, $comment_ID) {
    global $comment;
    switch ($column) :

        case 'phone' : {

                echo get_comment_meta($comment_ID, 'phone', true);
                break;
            }
    endswitch;
}

Tested OK with WordPress 5.1 and WooCommerce 3.5.5

Answer 2

Your code should produce an input field, but it might appear not to, because the comment_form_default_fields filter you use is meant for default comment fields, which are hidden if you are logged in. The phone field should appear after you log out and look at the product comments.

In addition, you did not provide any logic for saving the value of the input field to the database. I think this article can be helpful if you want to implement this yourself.

However, as you did tag your question with advanced-custom-fields, you might want to skip coding and let the Advanced Custom Fields plugin handle adding the input field and saving the phone number to the database. To do so, simply download and activate the plugin, go to the Custom Fields menu, add a new field group, and create the phone input field. Make sure to take a look at the Location meta box and create a rule for showing the field group only if Comment is equal to Product:

This will automatically add the fields in your field group to the comment fields of products.