How to add custom fields and tabs to WooCommerce product data metabox by code - A white pixel (2023)

In this post, we will learn how to add your custom meta fields to WooCommerce product data metabox. how to add fields and how to add your own custom tab. We'll detail how to add your fields, where to add them, how to store them, and finally how to display them in the frontend.

Adding custom fields to existing panels

First, let's look at how to add a field to existing panels. We must hook into two hooks; one to output the field and one to store the value of it. The first tick depends on which tab you want to display your field in.

Note that tab visibility varies by product type. For example, the General tab is removed when you switch to a grouped product type. So not only should you consider where your custom fields logically fit, but you also need to consider a panel that is visible for all your desired product types. This is a list of the most general hooks available:

• woocommerce_product_options_general_product_data("Generally")
• woocommerce_product_options_inventory_product_data("Invent")
• woocommerce_product_options_shipping("Shipment")
• woocommerce_product_options_related(“Linked Products”)
• woocommerce_product_options_attributes(„Attribute“)
• woocommerce_product_options_advanced("Progressive")

Add a form input

B. for the output of a form inputcouldmanually outputting the form input HTML (e.g.<input type="text"...>), but WooCommerce provides simple functions to easily add fields of any kind. I recommend using those. Check out WooCommerceoverviewof all possible input types here and what arguments you can pass to control the output.

In this tutorial I will add a simple text input to the Inventory tab to write the number of items in each pack. For the key where your custom value will be stored, always add an underscore "_" before it, in my case it's "_number_in_package":

add_action('woocommerce_product_options_inventory_product_data', function() {woocommerce_wp_text_input([ 'id' => '_number_in_package', 'label' => __('Nummer im Paket', 'txtdomain'),]);});

Save and edit a product. You should see your custom field at the bottom of the Inventory tab:

See Also

WooCommerce Custom Fields: How to Create and Display Them10+ Best Custom WooCommerce Fields Plugins (Free & Premium) - LearnWooNeed custom WooCommerce product fields? – Moonthemes Free WordPress themesHow to add custom field to product in WooCommerce - Phppot

A note on field visibility depending on the product type

WooCommerce product data metabox contains a lot of javascript that hides and shows both fields and tabs/panels. You can easily take advantage of this if you want your field to only be visible to certain product types by assigning specific class names to your field.

Suppose you want your field to be shown only if the product is of type "simple product" or you want it to be hidden if the product is a variable product. WooCommerce listens to specific class names such asshow_if_<product type>Andhide_if_<product type>and you can combine multiple classes to fine-tune when your field should be hidden or visible.

For example if I want my field to only be visible for simple products; I will add this in 'Wrapper_Class' to my field input:

add_action('woocommerce_product_options_inventory_product_data', function() {woocommerce_wp_text_input(['id' => '_number_in_package','label' => __('Nummer im Paket', 'txtdomain'),'wrapper_class' => 'show_if_simple']);});

Could you also setWrapper_Classto e.g. ‘show_if_simple show_if_grouped' to make the field visible only for simple or grouped products. Try it yourself!

Saving your custom field

From now on, anything you type in your field will not be saved. Let's do that next. We hook upwoocommerce_process_product_metaand stores the value from PHPs globally$_POST(form submission).

add_action('woocommerce_process_product_meta', function($post_id) {$product = wc_get_product($post_id);$num_package = isset($_POST['_number_in_package']) ? $_POST['_number_in_package'] : '';$product-> update_meta_data('_number_in_package', sanitize_text_field($num_package));$product->save();});

Let me briefly explain the above code. YoucouldJust save the field withupdate_post_meta(), but in newer versions of WooCommerce, product meta handling has been greatly improved. As long as you have the product object (which we get from the callwc_get_product()with the post ID) you can easily manipulate any product information in the object and finally call it upsave on computer()once to update changes. This is especially beneficial if you want to store multiple fields - in that case you don't have to do database operations for each field, just one last time you callsave on computer().

Useupdate_meta_data()on the object for any metadata you want to store.

Using the above feature, your field should now be saved when you update it in Edit Product! Also note that when using the WooCommerce functions to output the field, you don't need to manually fetch the value of your field before outputting the field - it's fully automated.

Output of your custom field in frontend

The first step is to figure out what hook you want to use to output your custom field. WooCommerce has many available hooks to control exactly where you want the output to be. If you are unsure, take a lookplugins/woocommerce/templates/and within these files you can easily find a suitable hook. You can also override the template and paste the output into the template, but I always recommend using hooks instead.

As for me, I want my custom field to be output in a single product within the meta div - along with WooCommerce outputting SKU and category. I use the hook for thatwoocommerce_product_meta_start. Within the hooks (like almost all template hooks) you can access the global post object. I'll follow the same rule of thumb as for saving my field; useget_meta()on the product object to get my custom field:

add_action('woocommerce_product_meta_start', function() {global $post;$product = wc_get_product($post->ID);$num_package = $product->get_meta('_number_in_package');if (!empty($num_package)) { printf('<div class="custom-sku">%s: %s</div>', __('Nummer im Paket', 'txtdomain'), $num_package);}});

Adding a custom tab and panel to the product data metabox

If you want to add a collection of custom fields that logically belong together, it might be a good idea to group them in a custom tab. To add a custom tab to the product data metabox, we need to check a filter to add the tab itself and a check to output the panel's content. Finally, we need to add the same hook as above to save our fields.

For example, I'm going to add a custom panel called "Additional Info" where I want to add a text input, a check box, and a number input.

First we filterwoocommerce_product_data_tabsand add our tab to its array.

add_filter('woocommerce_product_data_tabs', function($tabs) {$tabs['additional_info'] = ['label' => __('Additional info', 'txtdomain'),'target' => 'additional_product_data','class' => ['hide_if_external'],'priority' => 25];return $tabs;});

There are some useful arguments we can provide here. You can for example ‘Class' to control tab visibility based on product type. If you missed it, check out the field visibility sectionmentioned above. Note, however, that you must provide the classes in tabs as an array, not a string. You can also "priority' to decide where you want your tab to appear. For example, 25 will position the tab right after "Inventory".

By default, your tab will appear with a wrench icon. Unfortunately, there is (still) no way to control this via the filter. If this is important to you, you can add admin css and assign a different class to your tab.Here is an overviewof available symbols in WooCommerce.

panel output

The next step is appendingwoocommerce_product_data_panelsand output the content of your panel. An important note here is to start the output with adivwith aIDattribute of the same name that you specified as a key in tabs (in my case "additional information'). As for the content, it's up to you - you can add any HTML you want, but I recommend using WooCommerce's features for form field output. The same benefits for hiding or showing fields work here as well.

add_action('woocommerce_product_data_panels', function() {?><div id="additional_product_data" class="panel woocommerce_options_panel hidden"><?phpwoocommerce_wp_text_input(['id' => '_dummy_text_input','label' => __('Dummy text input', 'txtdomain'),'wrapper_class' => 'show_if_simple',]);woocommerce_wp_checkbox(['id' => '_dummy_checkbox','label' => __('Dummy checkbox', 'txtdomain'), 'wrapper_class' => 'hide_if_grouped',]);woocommerce_wp_text_input(['id' => '_dummy_number_input','label' => __('Dummy number input', 'txtdomain'),'type' => 'number' ,'custom_attributes' => ['step' => '1','min' => '0']]); ?></div><?php});

After saving, you should now see the tab and its content in the product data metabox (unless the product is an external product, of course).

(Video) Advanced Custom Fields Allow You To Add Extra Fields To Your Posts, Pages Or Custom Post Types

It only remains to save the data entered into your custom fields and for this we will use the same process as above:

add_action('woocommerce_process_product_meta', function($post_id) {$product = wc_get_product($post_id);$product->update_meta_data('_dummy_text_input', sanitize_text_field($_POST['_dummy_text_input']));$dummy_checkbox = isset($_POST ['_dummy_checkbox']) ? 'yes' : '';$product->update_meta_data('_dummy_checkbox', $dummy_checkbox);$product->update_meta_data('_dummy_number_input', sanitize_text_field($_POST['_dummy_number_input'])); $produkt->speichern();});

Note: There is a general rule in WooCommerce that all checkboxes are marked as "And' if enabled, or as an empty string if not enabled. By following WooCommerce's rule and "save" my checked box.And', which ensures that mywoocommerce_wp_checkbox()works as intended when it gets the current value of my field.

Diploma

In this post I will show how to add your custom fields to WooCommerce product data metabox, how to save them, how to control their visibility and a simple example of how to output your field in frontend. I also showed how to add a custom tab to the metabox and add your fields there. I hope this helped you customize WooCommerce yourself!