How to Add WooCommerce Custom Product Fields

Do you want to know, how to add WooCommerce custom product fields? I am sure your answer will be “Yes”

Let’s get started…

WooCommerce is a popular WordPress eCommerce plugin. It contains all the required features for a standard online store. You can easily add extra product fields using WooCommerce hooks.

Best WooCommerce Customization Practices

WooCommerce has functions for form fields within woocommerce/includes/admin/wc-meta-box-functions.php file. You have to call the right field function e.g woocommerce_wp_text_input($array_args) will add a text field. The arguments will be passed like below code.

 
l’ll show you how to add following products fields on general tab.

• Text
• Number
• Textarea
• Select
• Checkbox
• Hidden
• Custom Text Field
• Custom Date Field
• Woo Product Select

Hook WooCommerce Custom Product Fields

Below code adds fields to product general tab.

1. In step1, create the custom function ci_custom_general_tab_fields() and within it call the required fields functions.
2. In step2, Add the function to the general product tab action hook woocommerce_product_options_general_product_data

WooCommerce Hooks Actions & Filters

Add the following code to child theme functions.php file.

Save WooCommerce Product Fields

The products custom fields data is posted to woocommerce_process_product_meta action hook. Create a PHP function ci_custom_general_tab_fields_save() and attach it to woocommerce_process_product_meta.
update_post_meta() is a WordPress function that saves and updates post meta data within wp_postmeta table.

WordPress Metadata Tutorial

Add the following code to child theme functions.php file

Display Custom Fields Data on WooCommerce Product Detail Page

If you are familiar with WooCommerce frontend templates, you know it has hooks for every small section. To display the custom products fields data on product detail page, I added my function ci_woo_product_detail() to the action hook woocommerce_single_product_summary.

get_post_meta() is the WordPress function to display postmeta data.

Add the following code to child theme functions.php file

Full Code

Add the following code to child theme functions.php file or custom plugin.

 
 
Custom WooCommerce Plugin Development
 
Flatsome Theme Customization
 
WooCommerce Checkout Page Fields