
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.
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.
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' );
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>'; }
From launching to customizing your WooCommerce stores, Cloudways is at your service.
Whether you’re a beginner or an expert, Cloudways Platform is based on UI, where you can create and customize your online store in a few seconds.
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' ) ) );
The following code should be used for creating the text area:
// Custom Product Textarea Field woocommerce_wp_textarea_input( array( 'id' => '_custom_product_textarea', 'placeholder' => 'Custom Product Textarea', 'label' => __('Custom Product Textarea', 'woocommerce') ) );
Here is the code of the custom input fields you must paste in the 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>'; }
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)); }
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. ?>
Add Custom Fields on 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.
Save Custom Fields in WooCommerce
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');
Display Custom Fields on Product Page
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.
Summary
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.
Frequently Asked Questions
Q. What is the purpose of adding custom product fields in WooCommerce?
A. Custom product fields in WooCommerce provide additional product details, allow product customization, offer extra options, enhance SEO, and aid in data organization.
Q. Are there any plugins or extensions available to simplify adding custom fields to WooCommerce products?
A. Yes, plugins such as Advanced Custom Fields (ACF), WooCommerce Custom Fields, Product Add-Ons for WooCommerce, Extra Product Options for WooCommerce, and WooCommerce Product Add-ons simplify the process of adding custom fields to WooCommerce products.
Q. Can I make certain custom product fields mandatory or required during the checkout process?
Q. What are some examples of practical uses for custom product fields in WooCommerce?
Q. Are there any considerations or limitations when adding a large number of custom product fields in WooCommerce?
Owais Alam
is the WordPress Community Manager at Cloudways - A Managed WooCommerce Hosting Platform and a seasoned PHP developer. He loves to develop all sorts of websites on WordPress and is in love with WooCommerce in particular. You can email him at [email protected]