To add a custom review form on a separate page in WooCommerce and allow the user to select products in the form, you can follow these steps:
- Create a new page in WordPress where you want to display the form. Go to Pages -> Add New and give it a suitable name, such as “Product Reviews.”
- Install and activate the “WooCommerce” plugin if it’s not already installed.
- Add the following form code.
<form method="post" id="custom_review_form">
<?php
// Get all products to display as options
$products = get_posts( array(
'post_type' => 'product',
'numberposts' => -1,
'orderby' => 'title',
'order' => 'ASC',
) );
if ( $products ) : ?>
<p>
<label for="product">Select a Product:</label>
<select name="product" id="product" required>
<option value="">Select a Product</option>
<?php foreach ( $products as $product ) : ?>
<option value="<?php echo esc_attr( $product->ID ); ?>"><?php echo esc_html( $product->post_title ); ?></option>
<?php endforeach; ?>
</select>
</p>
<?php endif; ?>
<p>
<label for="name">Your Name:</label>
<input type="text" name="name" id="name" required>
</p>
<p>
<label for="email">Your Email:</label>
<input type="email" name="email" id="email" required>
</p>
<p>
<label for="rating">Rating:</label>
<select name="rating" id="rating" required>
<option value="">Select a Rating</option>
<option value="5">5 Stars</option>
<option value="4">4 Stars</option>
<option value="3">3 Stars</option>
<option value="2">2 Stars</option>
<option value="1">1 Star</option>
</select>
</p>
<p>
<label for="review">Your Review:</label>
<textarea name="review" id="review" required></textarea>
</p>
<p>
<button type="submit" name="submit_review">Submit Review</button>
</p>
</form>
This code will display a form with the following fields:
- Select a Product (drop-down list)
- Your Name (text input)
- Your Email (email input)
- Rating (drop-down list)
- Your Review (textarea)
All fields are required, and the form is submitted using the POST method to a custom endpoint (you’ll need to define this endpoint in your plugin or theme code). You can customize the form fields, labels, and validation rules as needed.
Short Code
add_shortcode( 'custom_review_form', 'render_custom_review_form' );
function render_custom_review_form() {
ob_start();
?>
<form method="post" id="custom_review_form">
<?php
// Get all products to display as options
$products = get_posts( array(
'post_type' => 'product',
'numberposts' => -1,
'orderby' => 'title',
'order' => 'ASC',
) );
if ( $products ) : ?>
<p>
<label for="product">Select a Product:</label>
<select name="product" id="product" required>
<option value="">Select a Product</option>
<?php foreach ( $products as $product ) : ?>
<option value="<?php echo esc_attr( $product->ID ); ?>"><?php echo esc_html( $product->post_title ); ?></option>
<?php endforeach; ?>
</select>
</p>
<?php endif; ?>
<p>
<label for="name">Your Name:</label>
<input type="text" name="name" id="name" required>
</p>
<p>
<label for="email">Your Email:</label>
<input type="email" name="email" id="email" required>
</p>
<p>
<label for="rating">Rating:</label>
<select name="rating" id="rating" required>
<option value="">Select a Rating</option>
<option value="5">5 Stars</option>
<option value="4">4 Stars</option>
<option value="3">3 Stars</option>
<option value="2">2 Stars</option>
<option value="1">1 Star</option>
</select>
</p>
<p>
<label for="review">Your Review:</label>
<textarea name="review" id="review" required></textarea>
</p>
<p>
<button type="submit" name="submit_review">Submit Review</button>
</p>
</form>
<?php
$output = ob_get_clean();
return $output;
}
Form Processing:
// Process custom review form submission
add_action( 'init', 'process_custom_review_form' );
function process_custom_review_form() {
if ( isset( $_POST['submit_review'] ) ) {
// Sanitize and validate input data
$product_id = absint( $_POST['product'] );
$name = sanitize_text_field( $_POST['name'] );
$email = sanitize_email( $_POST['email'] );
$rating = absint( $_POST['rating'] );
$review = sanitize_textarea_field( $_POST['review'] );
$variation_id = isset( $_POST['variation'] ) ? absint( $_POST['variation'] ) : 0;
$variation_data = array();
if ( empty( $product_id ) || empty( $name ) || empty( $email ) || empty( $rating ) || empty( $review ) ) {
// Handle validation errors
wp_die( 'Please fill in all required fields.' );
}
// Check if product exists
$product = wc_get_product( $product_id );
if ( ! $product ) {
// Handle product not found errors
wp_die( 'Invalid product.' );
}
if ( $product->is_type( 'variable' ) ) {
// If the product is a variable product, get the variation data
$variation = new WC_Product_Variation( $variation_id );
if ( ! $variation ) {
// Handle variation not found errors
wp_die( 'Invalid variation.' );
}
// Set the variation data for the review
$variation_data = array(
'variation_id' => $variation_id,
'attribute_values' => $variation->get_variation_attributes(),
);
}
// Create the review data
$review_data = array(
'comment_post_ID' => $product_id,
'comment_author' => $name,
'comment_author_email' => $email,
'comment_content' => $review,
'comment_type' => 'review',
'comment_meta' => array(
'rating' => $rating,
),
);
// Add the variation data to the review meta if applicable
if ( ! empty( $variation_data ) ) {
$review_data['comment_meta']['variation_data'] = $variation_data;
}
// Insert the review into the database
$comment_id = wp_new_comment( $review_data );
// Display a success message
if ( $comment_id ) {
$success_message = 'Thank you for submitting your review.';
wc_add_notice( $success_message, 'success' );
}
}
}
In this code, we first check if the product is a variable product. If it is, we get the variation data from the variation ID and set it as part of the review data. If the product is not a variable product, we don’t set any variation data.
If you’re using this code, make sure that the product ID and variation ID (if applicable) you’re passing to the $product_id and $variation_id variables are valid and existing product and variation IDs in your WooCommerce store. If you’re unsure about the product ID or variation ID, you can go to the Products or Variations section in your WooCommerce dashboard and find the product or variation ID in the list of products or variations.