How to Add Form To Product Page WooCommerce

WooCommerce Add Form To Product PageDo you want to add a custom form on the product page? Read on, as this post aims to provide a solution for you.

WooCommerce continues to power many stores because it is flexible to customization. For example, you might want to add some extra information to your product page. The best way to implement this is by adding custom fields to the products.

The custom fields are also referred to as item meta. They can be displayed on the cart page, checkout page, and emails as well. Cart item meta is when the information collected in the extra product fields is added to the products in the cart and can be saved for the order.

Therefore, we need a solution that will add custom data fields to the product page and add this information to the cart item meta. After that, the data collected is displayed on the cart, checkout, and order details.

However, WooCommerce does not have a built-in solution for adding this feature. This means that we need to create a custom code snippet to achieve this. We recommend plugins only when you want a major change on your site.

WooCommerce Add Form To Product Page

In today’s tutorial, we will share a custom code snippet we created to add a form containing two fields. We will a name and message field and display the fields data as Cart Item meta and Order Item meta. This means that it will be displayed throughout the order cycle.

Before we proceed, we recommend installing or creating a child theme. This is because we will be modifying some of the core files. The child theme will ensure that the changes are not lost during an update.

Let us get right into it.

Steps to Add a Form To WooCommerce Product Page

Here are the steps you need to follow:

  1. Log into your WordPress site and access the Dashboard as the admin user.
  2. From the Dashboard menu, click on Appearance Menu > Theme Editor Menu. When the Theme Editor page is opened, look for the theme functions file to add the function to add a form to the WooCommerce product page.
  3. Add the following code to the php file:
[php] add_action( ‘woocommerce_before_add_to_cart_button’, ‘njengah_fields_before_add_to_cart’ );
function njengah_fields_before_add_to_cart( ) {
?>
<table>
<tr>
<td>
<?php _e( "Name:", "aoim"); ?>
</td>
<td>
<input type = "text" name = "customer_name" id = "customer_name" placeholder = "Name on Gift Card">
</td>
</tr>
<tr>
<td>
<?php _e( "Message:", "aoim"); ?>
</td>
<td>
<input type = "text" name = "customer_message" id = "customer_message" placeholder = "Your Message on Gift Card">
</td>
</tr>
</table>
<?php
}
/**
* Add data to cart item
*/
add_filter( ‘woocommerce_add_cart_item_data’, ‘njengah_cart_item_data’, 25, 2 );
function njengah_cart_item_data( $cart_item_meta, $product_id ) {
if ( isset( $_POST [‘customer_name’] ) && isset( $_POST [‘customer_message’] ) ) {
$custom_data = array() ;
$custom_data [ ‘customer_name’ ] = isset( $_POST [‘customer_name’] ) ? sanitize_text_field ( $_POST [‘customer_name’] ) : "" ;
$custom_data [ ‘customer_message’ ] = isset( $_POST [‘customer_message’] ) ? sanitize_text_field ( $_POST [‘customer_message’] ): "" ;
$cart_item_meta [‘custom_data’] = $custom_data ;
}
return $cart_item_meta;
}
/**
* Display the custom data on cart and checkout page
*/
add_filter( ‘woocommerce_get_item_data’, ‘njengah_item_data’ , 25, 2 );
function njengah_item_data ( $other_data, $cart_item ) {
if ( isset( $cart_item [ ‘custom_data’ ] ) ) {
$custom_data = $cart_item [ ‘custom_data’ ];
$other_data[] = array( ‘name’ => ‘Name’,
‘display’ => $custom_data[‘customer_name’] );
$other_data[] = array( ‘name’ => ‘Message’,
‘display’ => $custom_data[‘customer_message’] );
}
return $other_data;
}
/**
* Add order item meta
*/
add_action( ‘woocommerce_add_order_item_meta’, ‘njengah_order_item_meta’ , 10, 2);
function njengah_order_item_meta ( $item_id, $values ) {
if ( isset( $values [ ‘custom_data’ ] ) ) {
$custom_data = $values [ ‘custom_data’ ];
wc_add_order_item_meta( $item_id, ‘Name’, $custom_data[‘customer_name’] );
wc_add_order_item_meta( $item_id, ‘Message’, $custom_data[‘customer_message’] );
}
}

[/php]
  1. This is the outcome on the product page:product page
  2. This is the outcome on the cart page:custom message
  3. This is the outcome on the checkout page:checkout page
  4. This is the outcome on the order details page:order details
  5. This is the outcome on the edit order page:edit page

Wrapping Up

In today’s tutorial, we have shared a custom solution we made to add a form on the product page. The details collected will appear throughout the order details, as we have demonstrated in this post.

However, you should be very careful when editing the core files of your WooCommerce store. If you make any mistake, an error will be displayed.

We hope that this solution helped you understand how the order cycle works.

Similar Articles

  1. How to Create Login Page In WordPress Without Using Plugin