
- Custom product fields in WooCommerce allow you to add extra information to your products beyond the standard details.
- This helps provide customers with more details, improving their shopping experience and potentially boosting sales.
- You can add these custom fields using plugins or by directly editing your theme’s functions.php file and WooCommerce templates.
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. ?>
Launch Your WooCommerce Store on Cloudways WooCommerce Hosting
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.
Using Plugins for Custom Product Fields
As a backup for those who dislike coding or require an easy solution, there are numerous plugins that you can utilize to help you in the use of custom product fields in WooCommerce without coding. Some of them include:
1. Advanced Custom Fields (ACF)
ACF is a very powerful plugin that allows you to create custom fields for every WordPress object, including WooCommerce products. It has a simple-to-use field interface and gets along well with WooCommerce.
- Features: Offers an amazing collection of field types (text, image, date, etc.), conditional logic, and native WooCommerce integration.
- Pros: Very flexible, supports complex field structures, and has great documentation.
- Cons: Too much for simple use cases, there is a learning curve.
2. WooCommerce Product Add-ons
This plugin allows you to add custom fields to your products, which you can use to get more information from customers or offer product variations.
- Features: Offers support for text, checkbox, radio, and select fields, and supports WooCommerce checkout.
- Pros: Easy to use, supports WooCommerce, and offers conditional logic.
- Cons: Less focused on product variations than on information fields.
3. YITH WooCommerce Product Add-ons & Extra Options
This plugin offers a vast range of options to add custom fields and options to WooCommerce products with conditional logic support.
- Features: Supports many field types, including text, checkbox, and select fields, and is WooCommerce compatible.
- Pros: Extremely flexible, compatible with conditional logic, and is WooCommerce compatible.
- Cons: Priced out of range for small stores, and the interface could be disorganized.
How to use these Plugins
- Install the Plugin, by going to your WordPress dashboard, Plugins > Add New, and looking for the plugin you’d like to implement.
- Click on Install Now and then Activate.
- Now set up Custom Fields how you like. Most plugins are straightforward and allow fields to go straight onto your WooCommerce products.
Then there are Fields on Product Pages that can be displayed. There are some of the plugins which will show fields on product pages without you needing to request it. With other plugins, you might need to use shortcodes or widgets in order to show the fields where you want to. Using a plugin is a fast way of adding custom fields on WooCommerce products without coding at all. Each plugin has advantages and disadvantages, hence choose one that addresses your specific needs. Always check if the plugin is compatible with your WordPress and WooCommerce version.
Choose the Best WordPress Hosting for Your WooCommerce Store!
Forget hosting management and enjoy lightning-fast performance results with Cloudways managed hosting. Focus solely on growing your brand.
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 add custom fields in WooCommerce;
- Install a custom fields plugin,
- Create and assign fields in the WooCommerce product editor,
- Configure settings,
- Update your products to display the new fields.
Q. How do I add a custom field to a product category page in WooCommerce?
A. Use a WooCommerce-compatible custom fields plugin to;
- Create and assign a custom field.
- Edit the desired product category in WordPress,
- Configure the field settings,
- Save changes to display the custom field on the category page.
Q. What is the difference between custom fields and attributes in WooCommerce?
A. Custom fields add unique product-specific information beyond WooCommerce’s default options, while attributes define standardized product characteristics like size, color, or material for variations and filtering.
Q. How do I add advanced custom fields in WooCommerce?
A. Install the Advanced Custom Fields (ACF) plugin, create custom fields, set the location rule to “Product” in ACF’s settings, configure field types and visibility, and save changes. The custom fields will appear in the WooCommerce product editor.
Q. How do I add custom product fields in WooCommerce?
A. Custom product fields can be added using a plugin like ACF or by modifying WooCommerce templates with custom code to display additional product information.
Q. How do I add a custom product attribute in WooCommerce?
A. Go to the WooCommerce settings in WordPress, navigate to Products > Attributes, create a new attribute, assign terms, and apply it to products.
Q. How do I add a custom field in WooCommerce single product page programmatically?
A. Use WooCommerce hooks like:
add_action('woocommerce_product_options_general_product_data', 'your_custom_function');
to create custom fields in the product editor and:
add_action('woocommerce_single_product_summary', 'display_custom_field');
to show them on the front end.
Q. How do I get a custom field value on a WooCommerce product page?
A. Retrieve a custom field value programmatically using:
get_post_meta($product_id, 'custom_field_name', true);
inside WooCommerce templates to display custom field data dynamically.
Salwa Mujtaba
Salwa Mujtaba is a Technical Content Writer at Cloudways. With a strong background in Computer Science and prior experience as a team lead in Cloudways Operations, she brings a deep understanding of the Cloudways Platform to her writing. Salwa creates content that simplifies complex concepts, making them accessible and engaging for readers. When she's not writing, you can find her enjoying good music, reading a book, or spending quality time with her family.