Do 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:
- Log into your WordPress site and access the Dashboard as the admin user.
- 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.
- Add the following code to the php file:
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]
- This is the outcome on the product page:
- This is the outcome on the cart page:
- This is the outcome on the checkout page:
- This is the outcome on the order details page:
- This is the outcome on the edit order 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
- How to Migrate from Shopify to WooCommerce
- How to Change WooCommerce Checkout Error Messages
- WooCommerce Create Custom Single Product Page
- How to Set WooCommerce Storefront Theme Product Page Full Width
- How to Send Email on Status Change In WooCommerce
- How to Get Order ID on Checkout Page WooCommerce
- How to Change Coupon Code Placeholder WooCommerce
- How to Add Search Box on Top of Page Storefront Theme
- How to Add Custom Product Fields WooCommerce
- How to Add New Column On WooCommerce Orders Page
- How to Add WooCommerce Shipping Calculator on Cart Page
- How to Add Custom Taxonomy To WooCommerce Products
- How to Add Star Rating To WooCommerce Product
- How to Hide Shipping Rates if Free Shipping Available WooCommerce
- How to Translate WooCommerce Checkout Page
- How to Access WooCommerce Database
- How to Get Current Product WooCommerce
- Top 30+ Best WordPress Form Plugins » Best WordPress Form Plugin
- How to Set Up WooCommerce Buy One Get One
- How to Create Login Page In WordPress Without Using Plugin