Custom product fields are additional data points that can be added to products in an online store. These fields allow store owners to collect and display more information about their products beyond the basic details typically included (such as name, price, color, and description).
By adding WooCommerce custom product fields, store owners can provide their customers with more detailed and accurate information about their products, which can help to improve the customer experience and increase sales.
In this tutorial, I’ll show how you can add custom product fields to your WooCommerce store.
What Are Custom Product Fields in WooCommerce?
WooCommerce Custom product fields are tool for backstitching product information to meet specific business needs. These fields provide the ability to add extra details or attributes to products beyond the standard WooCommerce product data.
WooCommerce Custom fields enable you to gather and display bespoke details about your products, catering to unique requirements or specifications.
Why Should You Add Custom Product Fields in WooCommerce?
Custom product fields offer flexibility in presenting product information. Merchants can create fields for various purposes, such as displaying product dimensions, materials used, care instructions, or any other pertinent details that can influence a customer’s purchasing decision.
WooCommerce Custom fields can significantly enhance the user experience by offering personalized options or configurations. By using custom fields into your WooCommerce setup, you empower both yourself and your customers with a more comprehensive understanding of the products on offer, facilitating smoother transactions.
How to Add Custom Product Fields in WooCommerce (Step-by-Step Tutorial)
Adding custom product fields in WooCommerce involves several steps, but it’s relatively straightforward. Here’s a step-by-step tutorial to guide you through the process:
Step 1 – Customize Product Data Page
- As in the screenshot below, I will show you how to edit the functions.php file (found in the theme folder) to add custom fields to the Product Data page.
Step 2 – Add Hooks in WooCommerce
- The first step is to hook to woocommerce_product_options_general_product_data. The function linked to this hook is responsible for displaying the new fields.
- A second hook, woocommerce_process_product_meta, will save the custom field values.
- Both these actions are carried out in the following code:
// The code for displaying WooCommerce Product Custom Fields add_action( 'woocommerce_product_options_general_product_data', 'woocommerce_product_custom_fields' ); // Following code Saves WooCommerce Product Custom Fields add_action( 'woocommerce_process_product_meta', 'woocommerce_product_custom_fields_save' );
Step 3 – Add Custom Product Fields
- To add the custom fields, I will use the default WooCommerce functions, including:
woocommerce_wp_text_input
- Package: WooCommerce\Admin\Functions
- Located at: includes/admin/wc-meta-box-functions.php
woocommerce_wp_textarea_input
- Package: WooCommerce\Admin\Functions
- Located at includes/admin/wc-meta-box-functions.php
function woocommerce_product_custom_fields () { global $woocommerce, $post; echo '<div class=" product_custom_field ">'; // This function has the logic of creating custom field // This function includes input text field, Text area and number field echo '</div>'; }
Ready to take your e-commerce game to the next level?
Elevate your online presence with lightning-fast performance, advanced security features, and round-the-clock support – choose Cloudways and maximize your e-commerce potential
Step 3.1: Include Field Structure
Note: the use of desc_tip to display those nice little bubbles to the right of the field instead of displaying the default field description. This attribute works for every field type.
// Custom Product Text Field woocommerce_wp_text_input( array( 'id' => '_custom_product_text_field', 'label' => __( 'My Text Field', 'woocommerce' ), 'placeholder' => 'Custom Product Text Field', 'desc_tip' => 'true' ) );
- The default value of the step is 1, with the min set to zero. Basically, this means that I expect a positive value here (at least greater than zero).
// Custom Product Number Field woocommerce_wp_text_input( array( 'id' => '_custom_product_number_field', 'placeholder' => 'Custom Product Number Field', 'label' => __('Custom Product Number Field', 'woocommerce'), 'type' => 'number', 'custom_attributes' => array( 'step' => 'any', 'min' => '0' ) ) );
- Use the following to create a
textarea
.
// Custom Product Textarea Field woocommerce_wp_textarea_input( array( 'id' => '_custom_product_textarea', 'placeholder' => 'Custom Product Textarea', 'label' => __('Custom Product Textarea', 'woocommerce') ) );
- Use the following code for custom input fields, you must paste this code in
functions.php
file located in the theme folder.
// Display Fields add_action('woocommerce_product_options_general_product_data', 'woocommerce_product_custom_fields'); // Save Fields add_action('woocommerce_process_product_meta', 'woocommerce_product_custom_fields_save'); function woocommerce_product_custom_fields() { global $woocommerce, $post; echo '<div class="product_custom_field">'; // Custom Product Text Field woocommerce_wp_text_input( array( 'id' => '_custom_product_text_field', 'placeholder' => 'Custom Product Text Field', 'label' => __('Custom Product Text Field', 'woocommerce'), 'desc_tip' => 'true' ) ); //Custom Product Number Field woocommerce_wp_text_input( array( 'id' => '_custom_product_number_field', 'placeholder' => 'Custom Product Number Field', 'label' => __('Custom Product Number Field', 'woocommerce'), 'type' => 'number', 'custom_attributes' => array( 'step' => 'any', 'min' => '0' ) ) ); //Custom Product Textarea woocommerce_wp_textarea_input( array( 'id' => '_custom_product_textarea', 'placeholder' => 'Custom Product Textarea', 'label' => __('Custom Product Textarea', 'woocommerce') ) ); echo '</div>'; }
Step 3.2: Save Data in the Database
Once you have created the custom product fields, another function is required to save the values for the update or publish button.
I will create a function woocommerce_product_custom_fields_save. This function is hooked to woocommerce_process_product_meta. It first checks whether the field is empty or filled. If not, a post meta is created using update_post_meta(). I used esc_attr() and esc_html() to secure the data.
Here is the code for saving the value of all the fields:
function woocommerce_product_custom_fields_save($post_id) { // Custom Product Text Field $woocommerce_custom_product_text_field = $_POST['_custom_product_text_field']; if (!empty($woocommerce_custom_product_text_field)) update_post_meta($post_id, '_custom_product_text_field', esc_attr($woocommerce_custom_product_text_field)); // Custom Product Number Field $woocommerce_custom_product_number_field = $_POST['_custom_product_number_field']; if (!empty($woocommerce_custom_product_number_field)) update_post_meta($post_id, '_custom_product_number_field', esc_attr($woocommerce_custom_product_number_field)); // Custom Product Textarea Field $woocommerce_custom_procut_textarea = $_POST['_custom_product_textarea']; if (!empty($woocommerce_custom_procut_textarea)) update_post_meta($post_id, '_custom_product_textarea', esc_html($woocommerce_custom_procut_textarea)); }
Step 3.3: Get the Values From the Database
Now that the fields have been created and their values saved, I will display them on the frontend. In this case, I recommend you work with the WooCommerce custom templates.
I will use the popular get_post_meta() function to get those values.
<?php while (have_posts()) : the_post(); ?> <?php wc_get_template_part('content', 'single-product'); ?> <?php // Display the value of custom product text field echo get_post_meta($post->ID, '_custom_product_text_field', true); // Display the value of custom product number field echo get_post_meta(get_the_ID(), '_custom_product_number_field', true); // Display the value of custom product text area echo get_post_meta(get_the_ID(), '_custom_product_textarea', true); ?> <?php endwhile; // end of the loop. ?>
Future-Proof Your Online Businesses with Autonomous
Ensure your small business is ready for whatever comes next with Cloudways Autonomous. Stay ahead of the curve with advanced scalability and cutting-edge technology.
Step 4: Add Custom Fields on the Product Page
The good thing is that these custom fields can be easily added via the backend. These changes are then reflected in the frontend as custom fields on product pages, cart pages, and similar areas. In fact, these custom fields can also appear on order status pages.
For this, I will show you how to add a new custom field in the Product Data section of a WooCommerce product page:
function woocommerce_product_custom_fields() { $args = array( 'id' => 'woocommerce_custom_fields', 'label' => __('Add WooCommerce Custom Fields', 'cwoa'), ); woocommerce_wp_text_input($args); } add_action('woocommerce_product_options_general_product_data', 'woocommerce_product_custom_fields');
Here’s how the snippet would appear on the frontend. As you can see, the custom field has the same label as mentioned in the $args array.
Step 5: Saving Custom Field Data
- Use the following code snippet to add custom fields to product pages.
- The important thing to note about the snippet is that it uses standard WooCommerce functions and actions.
function save_woocommerce_product_custom_fields($post_id) { $product = wc_get_product($post_id); $custom_fields_woocommerce_title = isset($_POST['woocommerce_custom_fields']) ? $_POST['woocommerce_custom_fields'] : ''; $product->update_meta_data('woocommerce_custom_fields', sanitize_text_field($custom_fields_woocommerce_title)); $product->save(); } add_action('woocommerce_process_product_meta', 'save_woocommerce_product_custom_fields');
How to Display Custom Fields on Product Page in WooCommerce
The following snippet displays the custom fields. The process is simple; it first checks the custom field value and confirms it has a value. If the case is true, it displays the value as the title of the field.
function woocommerce_custom_fields_display() { global $post; $product = wc_get_product($post->ID); $custom_fields_woocommerce_title = $product->get_meta('woocommerce_custom_fields'); if ($custom_fields_woocommerce_title) { printf( '<div><label>%s</label><input type="text" id="woocommerce_product_custom_fields_title" name="woocommerce_product_custom_fields_title" value=""></div>', esc_html($custom_fields_woocommerce_title) ); } } add_action('woocommerce_before_add_to_cart_button', 'woocommerce_custom_fields_display');
As you can see from the following image, the custom field is visible on the product page. Note that the field title is “WooCommerce product custom fields”, the same as the id value in the snippet.
Conclusion
It is important for store owners to carefully consider the types of WooCommerce custom product fields they want to add and how they will be used and displayed on the product page. This can help improve the customer experience and increase sales, as customers are more likely to purchase if they have all the necessary information about a product.
Q: How do I use custom fields in WooCommerce?
A: To use custom fields in WooCommerce, you can follow these steps:
- Install and activate a custom fields plugin.
- Create custom fields with information and field types.
- Assign custom fields to your products in WooCommerce product editor.
- Configure field settings and values as needed.
- Save and update your products to display the custom fields on your WooCommerce store.
Q: How do I add a custom field to a product category page in WooCommerce?
A: To add a custom field to a product category page in WooCommerce:
- Use a custom fields plugin compatible with WooCommerce.
- Create the custom field and specify its details within the plugin settings.
- Navigate to the product category page in WordPress admin.
- Edit the category where you want to add the custom field.
- Depending on the plugin, you may find an option to assign or display the custom field within the category settings.
- Save the changes, and the custom field should now appear on the product category page in WooCommerce.
Q: What is the difference between custom fields and attributes in WooCommerce?
A: Custom fields in WooCommerce allow you to add additional, bespoke information to products beyond the default data. Whereas, Attributes, on the other hand, are predefined characteristics of products, such as size, color, or material.
Q: How do I add advanced custom fields in WooCommerce?
A: To add Advanced Custom Fields (ACF) in WooCommerce:
- Install and activate the Advanced Custom Fields plugin.
- Create custom fields using ACF’s intuitive interface.
- In the field group settings, designate the location rule to “Post Type” and select “Product” to apply custom fields to WooCommerce products.
- Configure additional settings such as field type, visibility, and conditional logic as needed.
- Save the custom field group.
- Navigate to the WooCommerce product editing page.
- The custom fields should now appear within the product editor.
Owais Khan
Owais works as a Marketing Manager at Cloudways (managed hosting platform) where he focuses on growth, demand generation, and strategic partnerships. With more than a decade of experience in digital marketing and B2B, Owais prefers to build systems that help teams achieve their full potential.