How to add custom fields to the WooCommerce review form?

These days, the “Reviews” section is almost mandatory for every e-commerce website. Being social creatures, we tend to pay attention to other people’s opinions about products we consider buying. WooCommerce has an in-built feature that allows your customers to leave reviews about products you sell and even give ratings to them. However, the default WooCommerce form is pretty basic, so many WooCommerce store owners look for ways to extend it.

Today, I’m going to show you how to add custom fields to the WooCommerce review form without plugins. All we’re going to use is PHP and some built-in WordPress and WooCommerce features.

Introduction

By default, the WooCommerce review form has only two fields: “Your rating” and “Your review”. Unauthorized users also have to provide their name and email address. If you haven’t installed any plugins modifying the review form or if your theme doesn’t do it out of the box, the review form on your website should look like this:

In this post, I’m going to show you how to add two additional fields to the review form: “Pros” and “Cons”. I bet you’ve seen something like this on other websites. A quick summary of a product’s positive and negative sides allows you to quickly understand if it is worth the money. Here’s an example of how an extended review block may look like I took from one of the Ukrainian online marketplaces.

I guess you understand what we’ll try to achieve today, so let’s start writing the code.

The problem

First of all, you need to understand that the WooCommerce review form is a modified WordPress comment form. Under the hood, WooCommerce uses the comment_form() function.

When I started investigating this question, I found out that there’s no easy and straightforward way to add custom fields to the WordPress comment form. There’s no single hook you can easily use to add custom fields to the form. Instead, there’s a lot of action and filters hooks you’ll have to use if you decide to modify the WordPress comment form.

In this post, I’m going to show you how to add a custom field at the beginning of the comment form and after the comment text field.

How to add a field at the beginning of the review form

If you want to add a custom field at the beginning of the review form (before the rating field and after the authorization notice for the anonymous users), you’ll have to use two different hooks for the same field. That’s because WordPress handles the displaying of the form differently based on if a user is authorized or not.

For the anonymous users, we’re going to use the comment_form_defaults hook. Using this hook, we can modify the default arguments of the comment form. We need this hook to show our custom fields after the “Your email address will not be published” notice. More specifically, we’ll just append our fields HTML to the comment_notes_before form’s argument.

For the authorized users, we’re going to use the comment_form_top hook. This hook “fires at the top of the comment form, inside the form tag“, as the documentation says.

To make sure that we modify only the WooCommerce review form, we’re going to use the is_product() conditional tag. And to make sure that we won’t duplicate the fields, we’re going to use the is_user_logged_in() function.

Here’s the code I wrote:

<?php
add_filter( 'comment_form_defaults', 'render_pros_cons_fields_for_anonymous_users', 10, 1 );
add_action( 'comment_form_top', 'render_pros_cons_fields_for_authorized_users' );
function get_pros_cons_fields_html() {
	ob_start();
	?>

	<div class="pcf-container">
		<div class="pcf-field-container">
			<label for="pros">Pros:</label>
			<input id="pros" name="pros" type="text">
		</div>
		
		<div class="pcf-field-container">
			<label for="cons">Cons:</label>
			<input id="cons" name="cons" type="text">
		</div>
	</div>

	<?php
	return ob_get_clean();
}

function render_pros_cons_fields_for_authorized_users() {
	if ( ! is_product() || ! is_user_logged_in() ) {
		return;
	}
	
	echo get_pros_cons_fields_html();
}

function render_pros_cons_fields_for_anonymous_users( $defaults ) {
	if ( ! is_product() || is_user_logged_in() ) {
		return;
	}
	
	$defaults['comment_notes_before'] .= get_pros_cons_fields_html();
	
	return $defaults;
}

Also, I added a bit of CSS to make the new fields look better on the frontend:

.pcf-field-container {
	padding-top: 5px;
	padding-bottom: 5px;
}

.pcf-field-container label {
	display: block;
}

.pcf-field-container input {
	display: block;
	width: 100%;
}

Let’s check what our new fields look like for an authorized user.

As expected, the new fields are rendered right before the rating field. Does it work for anonymous users too?

Yup, our new fields are displayed right after the notice.

How to add a field after the comment text field

If you want to show your custom fields after the “Your review” field, you’ll have to use a different hook. Luckily, this time we can use only one hook because the comment text field is rendered the same way for both authorized and anonymous users. The hook we’re going to use is comment_form_field_comment. This hook allows us to modify the HTML code of the comment field.

Here’s the code you can use to achieve this:

<?php
// DO NOT ADD THIS FUNCTION AGAIN IF YOU'VE ALREADY ADDED IT IN THE PREVIOUS SECTION
function get_pros_cons_fields_html() {
	ob_start();
	?>

	<div class="pcf-container">
		<div class="pcf-field-container">
			<label for="pros">Pros:</label>
			<input id="pros" name="pros" type="text">
		</div>
		
		<div class="pcf-field-container">
			<label for="cons">Cons:</label>
			<input id="cons" name="cons" type="text">
		</div>
	</div>

	<?php
	return ob_get_clean();
}


add_filter( 'comment_form_field_comment', 'render_pros_cons_fields', 99, 1 );
function render_pros_cons_fields( $comment_field ) {
	if ( ! is_product() ) {
		return $comment_field;
	}
	
	return $comment_field . get_pros_cons_fields_html();
}

Let’s see what we’ve got in the review form now:

By the way, you can rewrite the render_pros_cons_fields function a little bit to render the fields BEFORE the comment field. In this case, you would need to return this:

	return get_pros_cons_fields_html() . $comment_field;

But I want to note that this code won’t guarantee that your custom fields will be displayed at the beginning of the form, because one of the plugins you use or the theme you use may modify the comment form using the hooks I’ve described above or other hooks that fire earlier than comment_form_field_comment. Anyways, feel free to experiment with this hook to find the most suitable way for your case.

How to save the custom data

Okay, we’ve got our custom fields in place. The problem is that they won’t be saved automatically: you have to write some code to save the custom fields’ values. To do this, you need to use the comment_post hook. This hook is triggered right after a comment was added to the database, but:

1. You still have access to the $_POST variables
2. You can access the ID of a new post

WordPress comments can have their meta data just like posts and users do. So we’re going to store the pros and cons a user has submitted as a comment’s meta. Let’s see how we can do that:

add_action( 'comment_post', 'save_review_pros_and_cons', 10, 3 );
function save_review_pros_and_cons( $comment_id, $approved, $commentdata ) {
	// The pros and cons fields are not required, so we have to check if they're not empty
	$pros = isset( $_POST['pros'] ) ? $_POST['pros'] : '';
	$cons = isset( $_POST['cons'] ) ? $_POST['cons'] : '';
	
	// Spammers and hackers love to use comments to do XSS attacks.
	// Don't forget to escape the variables
	update_comment_meta( $comment_id, 'pros', esc_html( $pros ) );
	update_comment_meta( $comment_id, 'cons', esc_html( $cons ) );
}

How to display a comment with the custom data

You can just believe me that the code above works, but you can’t check it without opening the database. Let’s add the pros and cons a user has submitted to their comment’s text. To do this, we can utilize the comment_text filter hook. This hook allows us to modify a comment’s text, so we can add the pros and cons just before the comment’s main text.

add_filter( 'comment_text', 'add_pros_and_cons_to_review_text', 10, 1 );
function add_pros_and_cons_to_review_text( $text ) {
	// We don't want to modify a comment's text in the admin, and we don't need to modify the text of blog post commets
	if ( is_admin() || ! is_product() ) {
		return $text;
	}
	
	$pros = get_comment_meta( get_comment_ID(), 'pros', true );
	$cons = get_comment_meta( get_comment_ID(), 'cons', true );
	
	$pros_html = '<div class="pcf-row"><b>Pros: </b>' . esc_html( $pros ) . '</div>';
	$cons_html = '<div class="pcf-row"><b>Cons: </b>' . esc_html( $cons ) . '</div>';	
	
	$updated_text = $pros_html . $cons_html . $text;
	
	return $updated_text;
}

By default, our new blocks will look a bit messy, so let’s add a bottom margin to make them look a bit better:

.pcf-row {
	margin-bottom: 10px;
}

Now, if I leave a review for a product filling the pros and cons fields, I’m going to see them as a part of my review:

How to make the custom fields modifiable from the admin dashboard

Good news: we’re almost done. The last thing we need to do is to make the pros and cons meta fields modifiable from the admin dashboard. That’s a cool feature to have if you want to moderate what your users type in those fields.

If you go to the Comments page, and click the “Edit” link under a new comment, you’ll see something like this:

You can edit any default field, but you can edit the custom fields you’ve added before. Let’s add a new meta box that will allow us to edit the fields from the admin dashboard.

We can do this using the add_meta_boxes_comment hook along with the add_meta_box function.

<?php
add_action( 'add_meta_boxes_comment', 'extend_comment_add_meta_box', 10, 1 );
function extend_comment_add_meta_box( $comment ) {
	// We don't need to show this metabox if a comment doesn't belong to a product
	$post_id = $comment->comment_post_ID;
	$product = wc_get_product( $post_id );
	
	if ( $product === null || $product === false ) {
		return;
	}
	
    add_meta_box( 'pcf_fields', 'Pros & Cons', 'render_pcf_fields_metabox', 'comment', 'normal', 'high' );
}

function render_pcf_fields_metabox ( $comment ) {
    $pros = get_comment_meta( $comment->comment_ID, 'pros', true );
    $cons = get_comment_meta( $comment->comment_ID, 'cons', true );
    wp_nonce_field( 'pcf_metabox_update', 'pcf_metabox_nonce', false );
    ?>
    <p>
        <label for="phone">Pros:</label>
        <input type="text" name="pros" id="pros" value="<?php echo esc_attr( $pros ); ?>" class="widefat" />
    </p>
    <p>
        <label for="cons">Cons:</label>
        <input type="text" name="cons" id="cons" value="<?php echo esc_attr( $cons ); ?>" class="widefat" />
    </p>
    <?php
}

Now, if I open the comment editor again, I’ll see the new metabox under the “Rating” metabox:

The values of the custom fields are now visible in the comment editor, but if you try to edit them and save your changes, you won’t see your changes after a page will be reloaded. To fix that, let’s use the edit_comment hook to handle the updates of the fields:

add_action( 'edit_comment', 'save_pcf_changes', 10, 1 );
function save_pcf_changes( $comment_id ) {
	// First of all, let's validate the nonce
	if ( ! isset( $_POST['pcf_metabox_nonce'] ) || ! wp_verify_nonce( $_POST['pcf_metabox_nonce'], 'pcf_metabox_update') ) {
		wp_die( 'You can not do this action' );
	}
	
	if ( isset( $_POST['pros'] ) ) {
		$pros = $_POST['pros'];
		update_comment_meta( $comment_id, 'pros', esc_html( $pros ) );
	}
	
	if ( isset( $_POST['cons'] ) ) {
		$cons = $_POST['cons'];
		update_comment_meta( $comment_id, 'cons', esc_html( $cons ) );
	}
}

Now, you can easily edit the custom fields we’ve added straight from the admin dashboard.

Summary

Phew, there were a lot of nuances for such a simple goal. Although I’ve shown how to add text fields to the WooCommerce review form, you can use any other field type you need: number, date, select, etc.

Anyways, I hope you found this post helpful. Feel free to share your opinion or ask any questions in the comments section below.

Thank you for your attention; see you in the next one!