WooCommerce is a blessing for small to medium-sized eCommerce business owners. Because it helps to create and manage online stores without having any coding knowledge and without extra costs. However, WooCommerce lags behind when it comes to adding custom fields, especially text input fields, to product pages.
So, do you also want to add a text field to the product pages of your WooCommerce store?
Don’t worry. We have got your back. In this blog post, we will cover everything about adding custom text fields to WooCommerce product pages with or without coding.
Key Takeaways
Are you still wondering whether this blog has answered your questions or not? Let’s clear your confusion and explore what you will learn after completing this article.
- Why Add a Custom Text Field to WooCommerce?
- Step-by-Step Guide on Adding a Text Field
- Best Practices for Adding Custom Text Field
Why Add a Custom Text Field to WooCommerce Products
Before going into the process, let us explain the reasons behind adding a custom text field. However, you are free to skip this section if you already have your own reason and are determined to add a text field to your product pages.
Product Personalization
The main reason offline shoppers’ count is higher than online is the lack of personalization options. For example, if someone wants a T-shirt with custom text, they would prefer an offline shop. But if you can ensure it online, they will consider buying from your store.
Collect Important Information
Some businesses also need to collect some additional information to fulfill customers’ needs. For example, you may want to take special delivery instructions; for this kind of scenario, custom text input fields become very effective.
Better Shopping Experience
Customers always love to have better control over their purchases. So empowering them to personalize their product while purchasing will surely impress them. As a result, your customer base will be satisfied with the shopping experience, and the brand’s reputation will be increased.
Reduce Return Rates
Product returns are a common problem for all online businesses. One of the common reasons is the delivery timing. Some shoppers get angry when the products are being delivered at an unpreferred time or day as they might be busy at that time. This problem can be reduced by adding a custom text field where customers can put their delivery instructions.
Increase Order Value
Having a text input field not only increases customer satisfaction but also gives an opportunity to increase the order value. For example, you can add additional charges to add custom text to the product. As a result, you can enjoy higher revenue with the same number of customers you usually have.
Method 1: Add a Text Field in WooCommerce Product Pages Using Custom Codes
As you may already know, WooCommerce doesn’t allow us to add custom fields by default. One way to do this is by adding custom code to your theme’s function.php. So, if you feel confident about adding custom codes, you can follow the steps below. However, if you don’t want to play with codes, please skip this section, as we also have a method that doesn’t require coding knowledge.
*** Note: Make sure to use a child theme, otherwise you may lose the changes after updating the theme. Always have a backup before adding custom code to your theme’s file.
Step 1: Add Text Field to Product Pages
Add the following code to the function.php and see how it looks at the front end.
// Display custom text field on the product page with space before the Add to Cart button
function custom_product_text_field() {
echo '<div class="product-custom-field" style="margin-bottom: 20px;">' // Adds space below the field
.'<label for="custom_text_field">Enter Custom Text</label>'
.'<input type="text" id="custom_text_field" name="custom_text_field" placeholder="Enter custom text here" />'
.'</div>';
}
add_action('woocommerce_before_add_to_cart_button', 'custom_product_text_field');Here, you can see that a custom text input field has been added to our product pages.
Step 2: Save and Show the Field to Cart Page
As we also want to show the text in the cart field, we need to add the following code.
// Save custom text field value to the cart
function save_custom_field_to_cart( $cart_item_data, $product_id ) {
if ( isset($_POST['custom_text_field']) ) {
$cart_item_data['custom_text_field'] = sanitize_text_field( $_POST['custom_text_field'] );
}
return $cart_item_data;
}
add_filter('woocommerce_add_cart_item_data', 'save_custom_field_to_cart', 10, 2);
// Display custom text field value in the cart
function display_custom_field_in_cart( $item_data, $cart_item ) {
if ( isset( $cart_item['custom_text_field'] ) ) {
$item_data[] = array(
'key' => 'Custom Text',
'value' => esc_html( $cart_item['custom_text_field'] )
);
}
return $item_data;
}
add_filter( 'woocommerce_get_item_data', 'display_custom_field_in_cart', 10, 2 );
Now, if we add a product to the cart, we can see the custom text field along with other information.
Step 3: Save and Show the Field to Order Details
Last but not least, we can add the following code to show the custom fields to order details as well.
// Save custom text field to order meta
function save_custom_field_to_order( $item_id, $values, $cart_item_key ) {
if ( isset( $values['custom_text_field'] ) ) {
wc_add_order_item_meta( $item_id, 'Custom Text', $values['custom_text_field'] );
}
}
add_action( 'woocommerce_add_order_item_meta', 'save_custom_field_to_order', 10, 3 );
// Display custom field in the order details
function display_custom_field_in_order( $order_id ) {
$order = wc_get_order( $order_id );
foreach ( $order->get_items() as $item_id => $item ) {
if ( $custom_text = wc_get_order_item_meta( $item_id, 'Custom Text', true ) ) {
echo '<p><strong>Custom Text:</strong> ' . esc_html( $custom_text ) . '</p>';
}
}
}
add_action( 'woocommerce_order_details_after_customer_details', 'display_custom_field_in_order' );Method 2: Add a Text Field to Product Pages using WowAddons
If you want more control over the custom text field or want to charge extra, you should go for a plugin. There are multiple plugins that offer extra product options. For now, we are going to use the WowAddons plugin. So, before starting to follow the steps below, make sure you have already installed the WowAddons plugin.
Step 1: Start Creating a New Addon
First, we need to go to the WowAddons and click on the “Create Addons” button. Then, add a name to the addon and start configuring it as per our requirements.
Step 2: Drag and Drop the Text Field
Here, you can see that a dummy product page is displaying, and we can add an extra option on the right. To do this, we need to click on the plus icon and then drag and drop our desired options.
Step 3: Configure the Text Field
Upon adding the Option, its setting panel opens on the left side. This is where we can configure the Option according to our requirements.
For example, we are adding a text field for a birthday cake. So the shoppers can add their desired wishes using the text field. Now, let’s configure the field according to our requirements using its settings section.
First, we can decide whether we want to make this field required or not. Upon making the field mandatory, the customers must fill it up.
Otherwise, they will not be able to add the product to the cart. Then, we can enable or disable the Title/Label of the field and add our desired text.
Moreover, we can choose the price position between “With Title” and ” With Option.”
Don’t forget to add a suitable placeholder so that the shoppers can understand what they need to write in the empty field. For instance, we are adding a birth wish text, “Happy Birthday to John.”
Furthermore, we can either add a charge for the benefit or decide not to charge for this by selecting the no-cost Option. And if we decide to charge, we need to choose one of the following:
- Percentage
- Per Character
- Per Character (No Space)
- Per Word
Last but not least, we add a sale price along with a regular charge for this field. It creates urgency among potential buyers.
Step 4: Set Conditions
Another great benefit of WowAddons is that we can show or hide this field based on fulfilling some predefined conditions. For example, we can add a Check Box field with the Yes/No Option. And show the text field once someone clicks Yes.
Interesting right? Let’s see how we can do it. Don’t worry; it is not as complicated as it may sound.
First, we need to add the Checkbox field, place it above the text field, and configure it as per our requirements.
Then, we need to go to the “Conditional Logic” section of the text field and enable the conditional logic. Now, we need to select whether we want to show or hide this field upon completing the required condition. We also need to select any or all conditions that must be fulfilled before placing an order.
Finally, we need to add the condition. For now, we are adding a single condition. However, you can set multiple conditions as well. To add a condition, we need to click on the “Add New” option, select the desired field, and choose the Option for it. That’s all; our conditional field setup is complete.
Step 5: Assign the Addons to Desired Products
Finally, we need to assign the custom fields to our desired product. For now, I am selecting a specific product. However, you can also select all products or products from specific categories as well. Once we are satisfied with the configuration, we need to publish it and see how it looks from a user’s perspective.
Bonus: Pro Tips to Us Text Fields Effectively
Empowering customers with text input is an added advantage. But using it effectively benefits both you and your customers. That’s why we have studied numerous use cases and brought the best tips and tricks for the betterment of your business.
Keep the Field Label Clear
Make sure to add clear and simplified language while explaining the purpose of the custom field. For example, only using something like “Write Your Text,” you should add “Add Text that Will Be Printed on the T-shirt.”
Set Character Limit
Don’t forget to set character limits based on the print placement size. Otherwise, you might end up getting extra characters that can’t be placed in the reserved position. These kinds of misleading things can be the reason for losing sales, and the potential customer will be disappointed.
Make the Best Use of the Placeholder
The placeholder text guides the customers on what they need to write in the custom text field. For example, if the field is for birthday wishes, you can write an example note like, “Happy Birthday to John.”
Align The Text Field with Your Brand
Make sure to place and style the custom field while aligning it with your brand identity. Otherwise, things may look broken. Don’t forget that a professional design feels trustworthy.
Validate Input Values
Last but not least, you also need to validate the inputs. You may want your customers to add only letters, but your customers might also add numbers. So, make sure to restrict these kinds of mistakes before checkout.
You may also like to read:
- How to Add Checkboxes to a Product in WooCommerce
- How to Add Color Picker Option in WooCommerce
- Set Different Prices for Different Product Sizes in WooCommerce
Final Words
That’s all about adding text fields to WooCommerce product pages. As we have walked you through two methods, now it’s your turn to choose one and accomplish your goal. Don’t know which one to choose? Let us help you out, If you just need a basic text field, then you can choose the first method.
However, if you need more advanced control, like adding extra charges or making it conditional, then you should definitely use a Product Addons plugin. It can be WowAddons or any other plugin, depending on your preference. But we can promise you that choosing WowAddons will be a smarter decision because it has all the important additional product options and configuration options without any learning curve. Most importantly, you will get everything without breaking the bank. So make sure to explore and try it out before looking for other options.
