How to add a "Review title" field on WooCommerce reviews form?

Question

I want to add a custom field to my reviews form on WooCommerce just like this image:

And then how to get the output of that title just like that:

I just know how to create a new field on the single-product-reviews.php file by adding that code:

$comment_form['comment_field'] .= '<p class="comment-form-title"><label for="title">' . esc_html__( 'Review title', 'woocommerce' ) . '&nbsp;<span class="required">*</span></label><input id="title" name="title" type="text" aria-required="true" required></input></p>';

But, how can I save this on the database and how can I output this title above comment content?

EDIT: I have tried many ways until I achieve some of what I want by writing this code on functions.php on my child theme.

1) Adding the custom field "Review title" on reviews comment form:

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

2) Save that field value on wp_commentmeta table on the database:

add_action( 'comment_post', 'instacraftcbd_review_title_save_comment' );
function instacraftcbd_review_title_save_comment( $comment_id ){
    if( isset( $_POST['title'] ) )
      update_comment_meta( $comment_id, 'title', esc_attr( $_POST['title'] ) );
}

3) Retrieve that field output value by using this:

var $title = get_comment_meta( $comment->comment_ID, "title", true );
echo $title;

Now the only missing thing, how can I place the output of that field just before the comment text or review text?

Answer 1

It's too good to find a solution myself, this my answer of what I'm looking for, maybe can help you!

1) Go to your functions.php on your parent or child theme then paste that code below to add the custom field "Review title" on reviews comment form:

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

2) Save that field value on wp_commentmeta table on the database by adding this code just above our last code:

add_action( 'comment_post', 'save_comment_review_title_field' );
function save_comment_review_title_field( $comment_id ){
    if( isset( $_POST['title'] ) )
      update_comment_meta( $comment_id, 'title', esc_attr( $_POST['title'] ) );
}

3) If you want to retrieve that field output value use that code below:

var $title = get_comment_meta( $comment->comment_ID, "title", true );
echo $title;

Note: it works only on comments loop!

4) To add that field output before each comment text, you have to create a new function on functions.php just like this:

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

And then be sure to add this code below to that WooCommerce template file review.php or you can use woocommerce_review_before_comment_meta hook, but in my case, I've written that code: echo get_review_title( $comment->comment_ID );

just after

do_action( 'woocommerce_review_before_comment_meta', $comment );

I hope that help you!