Even if WooCommerce provides a lot of ways to add custom data to your products, sometimes is just not enough, or no the best way to do it. You may need to add some custom fields that will properly show on your product page.
In this tutorial, you will learn how to create custom fields for your products. I won’t cover how to add custom fields on variations for now, it will be a separate tutorial.
Your custom fields will be added to the General tab in the product data section. You can add various types of fields, from simple text fields to dropdowns and text areas.
To begin, you need to hook the function that will print the fields to woocommerce_product_options_general_product_data, like this:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| add_action( 'woocommerce_product_options_general_product_data', 'wc_custom_add_custom_fields' ); |
Then you have to add the code to print the fields. There are various functions in WooCommerce to print different fields.
Let’s start with something simple, adding a text field:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| add_action( 'woocommerce_product_options_general_product_data', 'wc_custom_add_custom_fields' ); | |
| function wc_custom_add_custom_fields() { | |
| // Print a custom text field | |
| woocommerce_wp_text_input( array( | |
| 'id' => '_custom_text_field', | |
| 'label' => 'Custom Text Field', | |
| 'description' => 'This is a custom field, you can write here anything you want.', | |
| 'desc_tip' => 'true', | |
| 'placeholder' => 'Custom text' | |
| ) ); | |
| } |
This code will print a text input in your general data section while editing a product. As I already said above, you can have different fields, here is a list of functions you can use for each type of field:
woocommerce_wp_text_inputwoocommerce_wp_textarea_inputwoocommerce_wp_selectwoocommerce_wp_radiowoocommerce_wp_checkboxwoocommerce_wp_hidden_input
There are also other types of fields you can add but that do not have a specific function. They are the fields tel, number, and email.
To create them just use the function woocommerce_wp_text_input and in the array that you pass as a parameter, where I specified the field ID, description, etc., above, add also the index 'type' => 'tel' or number or email based on the type of field you want to print.
Saving the values
Printing the fields is not enough. If you don’t add a function to save their value, as soon as you update the product the changes will be lost.
The hook to use in this case is woocommerce_process_product_meta. You will find the values of your custom fields in the global variable $_POST. To save the field in the example above use this code:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| add_action( 'woocommerce_process_product_meta', 'wc_custom_save_custom_fields' ); | |
| function wc_custom_save_custom_fields( $post_id ) { | |
| if ( ! empty( $_POST['_custom_text_field'] ) ) { | |
| update_post_meta( $post_id, '_custom_text_field', esc_attr( $_POST['_custom_text_field'] ) ); | |
| } | |
| } |
Add as many fields as you need after line 5 of this snippet.
Make sure to escape them for safety and, if needed, perform other actions on them.
Leave a Reply