Are you looking to add custom fields to WooCommerce product page? WooCommerce is one of the most powerful eCommerce plugins for WordPress that allows deep customization using hooks and filters. WooCommerce allows developers and store owners to customize product pages by adding extra input fields such as text boxes, color selectors, file uploads, or dropdown options.
By adding WooCommerce custom product fields, you can collect important customer information, offer personalization options, and even apply additional charges based on customer selections.
In this tutorial, we will learn how to create WooCommerce custom product fields to collect extra information from customers.
Table of Contents
Why Add Custom Fields to WooCommerce Products
- Offer product personalization
- Collect engraving or gift message details
- Allow customers to choose custom colors or notes
- Apply dynamic pricing or extra charges
- Improve user experience
- Increase average order value
Step 1 – Add Custom Fields on WooCommerce Product Page
First, we will add a custom text field and a color picker field before the Add to Cart button using WooCommerce hooks.
function custom_add_product_fields() { ?>
<div class="custom-field-wrap" style="margin:10px 0;">
<label for="custom_text">Custom Text</label>
<input type="text" name="custom_text" id="custom_text" value="">
</div>
<div class="custom-field-wrap" style="margin:10px 0;">
<label for="custom_color">Custom Color</label>
<input type="color" name="custom_color" id="custom_color" value="">
</div>
<?php }
add_action('woocommerce_before_add_to_cart_button', 'custom_add_product_fields');
Step 2 – Save Custom Field Values to Cart
Next, we will save the custom field values when a customer adds a product to the cart. We will also add an extra cost if the custom text field is filled.
function save_custom_field_values_to_cart($cart_item_data, $product_id, $variation_id) {
if (isset($_POST['custom_text']) && !empty($_POST['custom_text'])) {
$cart_item_data['custom_text'] = sanitize_text_field($_POST['custom_text']);
$cart_item_data['custom_field_extra_cost'] = 200;
}
if (isset($_POST['custom_color'])) {
$cart_item_data['custom_color'] = sanitize_text_field($_POST['custom_color']);
}
return $cart_item_data;
}
add_filter('woocommerce_add_cart_item_data', 'save_custom_field_values_to_cart', 10, 3);
Step 3 – Apply Extra Cost to Cart Total
If the custom field is used, we can dynamically add an extra fee to the cart total.
function add_extra_cost_to_cart_total() {
foreach (WC()->cart->get_cart() as $cart_item) {
if (isset($cart_item['custom_field_extra_cost'])) {
WC()->cart->add_fee(__('Custom Cost', 'woocommerce'), $cart_item['custom_field_extra_cost']);
}
}
}
add_action('woocommerce_cart_calculate_fees', 'add_extra_cost_to_cart_total');
Step 4 – Display Custom Field Data in Cart and Checkout
To improve transparency, we will display the custom field values on the cart page, checkout page, and order emails.
function get_custom_item_data($item_data, $cart_item_data) {
if (isset($cart_item_data['custom_text'])) {
$item_data[] = array(
'key' => __('Custom Text', 'woocommerce'),
'value' => wc_clean($cart_item_data['custom_text']),
);
}
if (isset($cart_item_data['custom_color'])) {
$item_data[] = array(
'key' => __('Custom Color', 'woocommerce'),
'value' => wc_clean($cart_item_data['custom_color']),
);
}
return $item_data;
}
add_filter('woocommerce_get_item_data', 'get_custom_item_data', 10, 2);
Benefits of Using WooCommerce Custom Product Fields
- Better product customization
- Higher conversion rates
- Dynamic product pricing
- Improved customer satisfaction
- Flexible store functionality
Frequently Asked Questions
How do I add custom fields in WooCommerce without a plugin?
You can use WooCommerce hooks like woocommerce_before_add_to_cart_button and woocommerce_add_cart_item_data to create and save custom fields.
Can I charge extra based on custom product fields?
Yes, you can add dynamic fees using the woocommerce_cart_calculate_fees action hook.
Where are custom field values displayed?
Custom values can be shown on the cart page, checkout page, order details page, and customer emails.
What is the difference between WooCommerce attributes and custom fields?
Attributes are mainly used for product variations and filtering, while custom fields collect additional user input.
Conclusion
Adding custom fields to WooCommerce product page is a powerful way to offer product personalization and improve store functionality. With WooCommerce hooks, you can build flexible solutions without using heavy plugins and even increase revenue by applying extra charges.
Real Use Cases of WooCommerce Custom Product Fields
Custom product fields are widely used in WooCommerce stores to provide better personalization and collect important order details from customers. These fields help store owners offer flexible purchasing options and improve the overall shopping experience.
- Gift message input for special occasions
- Name engraving on jewelry or accessories
- Custom size or measurement notes
- Select preferred delivery date
- Upload design or logo for printing
- Choose packaging or warranty options
Best Practices When Adding Extra Product Fields
- Always sanitize and validate user input
- Clearly mention any additional charges
- Keep form design clean and mobile friendly
- Test functionality on variable products
- Avoid adding too many fields to maintain performance
Official WooCommerce Hook Reference
You can explore more WooCommerce hooks from the official documentation:
