If you want to add custom fields to product variations, click here!
WooCommerce is without any doubt the more powerful e-commerce plugin for WordPress. And what i love with WooCommerce is that there’s an API for nearly everything. Today, i decided to show you how you can customize WooCommerce dynamically, and in particular how to add custom fields to any WooCommerce products. Here is the final result of what you’ll learn to do in this post:
As you can on the screenshot above we will see how to add custom fields to the product edition page. To do that we will be working on the functions.php file of your theme’s folder only.
To begin we will add custom fields to the product general tab, we will see later how to add custom fields to the other tabs, and how to create your own tabs.
The right hooks
The first step is to hook an action to woocommerce_product_options_general_product_data. The function linked to this hook will be responsible of the new fields display. A second hook will be taken into account to save fields values: woocommerce_process_product_meta. Basically these two actions will be done using that code:
Adding New Fields
The snippet above link two custom functions to the right hooks. Now we need to create those functions. Let’s start bye the first one, woo_add_custom_general_fields(), that will create the fields. Here is how the function will look like
To create our fields we will mainly use WooCommerce builtin function like (All these functions are located in WooCommerce/Admin/WritePanels/writepanels-init.php.):
Text Field Type
To create a text field type, you will need to use that code:
Please note the use of desc_tip to display those little nice bubble to the right of the field instead of displaying the default field description. This attribute works for every field type.
Number Field Type
To create a number field type, you will have to use that code:
The main difference here is the type attribute set to number. You can also define custom attributes like step, and min, or even max. In the code above, step is the default one (1), and min is set to zero. Basically that means that we expect a positive value here (at least greater than zero).
Textarea Field Type
To create a textarea, here is the code to use:
Nothing really complex here…
Dropdown Select Field Type
To create a dropdown select, use the following code:
The options attributes defines available options within an array.
Checkbox Field Type
To create a checkbox, use this code below:
Hidden Field Type
You can also create hidden fields with the following code:
Products Select Field Type
There’s a really nice way to create a customized dropdown select for WooCommerce products with that code:
Custom Field Type
You can also create custom fields. In the example below, i created a “double field”. You can customize that code and use as many fields as you want that will be merged into one single array:
Custom fields can be pretty much everything, just make sure that you use the form-field class to make them pretty!
Saving Fields Values
Now that you created your WooCommerce product fields, you need to create a function to save their values once you edit the update or publish button. As we saw earlier, we will use a function called woo_add_custom_general_fields_save() hooked to woocommerce_process_product_meta. Basically the idea behind this function is pretty simple: we check if the field is empty and if not we create a post meta using update_post_meta(). Please note that we use esc_attr() and esc_html() to secure data just a bit. Here is the code to save each field type values:
Here is the result:
Retrieve Fields Values
Now that we successfully created our fields and saved their values, i guess you’d like to display those values on the frontend. In this case the best method would be to work with WooCommerce custom templates. Basically a custom template allows you to override WooCommerce default files and use your own custom files instead. Here is a quick tutorial that will explain you how to create your custom templates: http://docs.woothemes.com/document/template-structure/
To get those values we just need to use the popular get_post_meta() function. That’s pretty much all you need.
Create Custom Tabs
Finally here is a quick snippet to create a custom product tab:
I recommend you to style your tab using a bit of CSS (simply add a nice icon and you’re done!).
One More Thing
One more thing: if you want to add your fields to any other tab than the general one you simply need to modify the hook name you linked your woo_add_custom_general_fields() function to. Fo example use that hook woocommerce_product_options_shipping to add your fields to the shipping tab. You can find all the available hooks in woocommerce/admin/post-types/writepanels/writepanel-product_data.php.