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.
- In step1, create the custom function ci_custom_general_tab_fields() and within it call the required fields functions.
- 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.
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