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

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

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.

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

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":

(Video) How to Create Custom Fields in WordPress Without a Plugin?

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:

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:

(Video) Beginners Guide to Dynamic Content Elementor Pro & Meta Box

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.

(Video) Pods – Custom Content Types and Custom Fields Free Plugin and not ACF - Elementor Wordpress Tutorial

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.

(Video) Adding Link Fields in WordPress with Advanced Custom Fields

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).

How to add custom fields and tabs to WooCommerce product data metabox by code - A white pixel (4)
(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.


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!


How do I add a custom product data tab in WooCommerce? ›

To create Saved Tabs, go to Settings > Custom Product Tabs for WooCommerce. Click on the Add New button to create a new Saved Tab. Enter a title and fill the content for this new Saved Tab. Then click on the Save Tab button.

How do I add custom fields in WooCommerce product programmatically? ›

It's easy to add a custom field to a product in WooCommerce:
  1. Go to the product where you'd like to add a custom field.
  2. In the Product Data section, click the Product Add-Ons.
  3. Click 'Add Group' then click 'Add Field'
  4. Choose the type of field you'd like to add from the 'Field Type' option.
Dec 20, 2020

How do I add an advanced custom field in WooCommerce? ›

Step 1: Install the Advanced Custom Fields (ACF) plugin

Firstly, download and activate the free version of the Advanced Custom Fields plugin. You can do this within the Plugins section of WordPress if you search for it. Once done, go into the new Custom Fields area in your WordPress dashboard to set one up.

How do I add a custom meta field in WordPress without plugins? ›

Adding Custom Fields in WordPress

First, you need to edit the post or page where you want to add the custom field and go to the custom fields meta box. Next, you need to provide a name for your custom field and then enter its value. Click on the Add Custom Field button to save it.

How do I add a custom attribute in WooCommerce? ›

Go to: Products > Add Product (or edit an existing one). Select the Attributes tab in the Product Data. There you can choose any of the attributes that you've created in the dropdown menu. Select Add.

How do I add personalization options in WooCommerce? ›

All you need for product personalization is to install the Add-Ons Ultimate plugin:
  1. When you purchase the plugin, you'll receive an email with a link. Download the zip file from the link.
  2. In your WordPress dashboard, go to Plugins > Add New > Upload Plugin.
  3. Browse to your zip file.
  4. Click 'Install Plugin' then 'Activate'
May 10, 2019

How do I add a custom field in WooCommerce checkout without plugin? ›

How to Add Custom Fields to WooCommerce Checkout Page
  1. Step 1: Define an Array of Fields on Checkout Page. ...
  2. Step 2: Add Custom Fields to WooCommerce Checkout Page. ...
  3. Step 3: Concatenate Fields as per Requirement. ...
  4. Step 4: Display Custom Fields on Order Page. ...
  5. Step 5: Display Fields on Account Page.
Jan 12, 2018

How do I add custom field data in WordPress? ›

To add a Custom Field, type in the Key (labeled “Name”) and Value, then click Add Custom Field. After it's added, you can delete or update it from buttons below the Key/Name: After you have used Custom Fields, the keys will form into a dropdown menu for easier selection.

How do I add advanced custom fields? ›

Link to heading#Method 1: Auto
  1. Log in to your WP install.
  2. From the Administration Panels, click on the Plugin Menu.
  3. Under Plugins, click the “Add New” sub menu.
  4. Search for “Advanced Custom Fields”
  5. Click the “Install Now” button on the ACF plugin (should be the first one)

How do I enable advanced custom fields? ›

Once ACF PRO is uploaded, you will need to activate it by finding it in the list on the Plugins page in your site's Administration area, and clicking on the 'Activate' link. To enable your automatic updates, you'll need to enter your license key under Custom Fields > Updates, and click 'Activate'.

How do I enable custom fields? ›

By default, the custom fields option is hidden in WordPress. To enable this feature, access your page or post editor. Locate the Screen Options button on the right corner of your screen, and check the Custom Fields box. This will make a new dialog box appear below the content editor.

How to add custom field to post programmatically in WordPress? ›

Custom field data can be added to a post in the “Custom Fields” section of the Post Editor, or programmatically using update_post_meta() . update_post_meta() is also the function to change a custom field's value for a specific post. Once stored, custom field data can be accessed using get_post_meta() .

How do I create a custom metabox and custom field in WordPress? ›

In order to add a WordPress custom meta box to your website, you first need to install and activate the plugin. You can do this by going to the Plugins page of your WordPress admin dashboard and searching for the plugin name there.

What is the difference between advanced custom fields and custom post type? ›

Custom post types let you create new content that can be used in different ways, while advanced custom fields allow you to customize your WP posts with more information than just text.

What is the difference between custom fields and attributes in WooCommerce? ›

Attribute sets are used as a base for a bulk of goods. Custom fields, on the other hand, are usually created for specific items. Another important difference is that attributes refer to the taxonomy giving your customers a possibility to group or filter products by an attribute.

How do I get all custom attributes in WooCommerce? ›

How To Get Custom Product Attributes With WooCommerce. You will need to have access to the $product object (or $product_id) to access the custom attributes. You can either loop through all attributes to find all of the attributes or you can search for a specific one.

How do I add attributes and variations in WooCommerce? ›

With attributes created and saved to add a variation, go to the Variations section in the Product data meta box.
Manually Add a Variation
  1. Select Add variation from the dropdown menu, and select Go.
  2. Select attributes for your variation. ...
  3. Edit any available data. ...
  4. Select Save changes.

How do I display custom fields in WooCommerce orders in admin panel? ›

First, to create a field, go to WooCommerce > Custom Order Fields. Click “Add Field” and begin creating your order field. The “label” is the field name, and will be displayed in the order details. The “description” will be displayed to the user upon hovering over the “?” symbol.

Can I customize WooCommerce product page? ›

WooCommerce is all about flexibility and customizability, which is why it provides all the tools you need to edit the design and functionality of product pages. By adding fields, videos, size charts, and more, your pages can be as unique as the products that they feature.

What are custom fields in WooCommerce? ›

Custom product fields are additional data points that can be added to products in an online store. These fields allow store owners to collect and display more information about their products beyond the basic details typically included (such as name, price, color, and description).

How do you add custom fields to WooCommerce Products and subsequently through the order cycle? ›

  1. Step 1: Add Data in a Custom Session, on 'Add to Cart' Button Click. ...
  2. Step 2: Add Custom Data in WooCommerce Session. ...
  3. Step 3: Extract Custom Data from WooCommerce Session and Insert it into Cart Object. ...
  4. Step 4: Display User Custom Data on Cart and Checkout page. ...
  5. Step 5: Add Custom Data as Metadata to the Order Items.
Mar 1, 2022

How do I add custom tabs in WordPress? ›

To add tabbed content, simply drag the 'Tabs' block under the Advanced section and drop it onto the page template. Next, you can customize the tab block in SeedProd. For instance, you can click the 'Add New Item' button to add as many tabs as you want.

How do I get WooCommerce product data? ›

Use the Filter function to get a product count, view products by type, or see which products are On Backorder or Out of Stock. Go to: WooCommerce > Products. Select a Category, Product Type and/or Stock Status, or any combination of the three.


1. Custom Fields Basics for Beginners with ACF Advanced Custom Fields -Elementor Wordpress Tutorial SPT
(Web Squadron)
2. Oxygen Builder for WordPress & Advanced Custom Fields (ACF)
3. Create Filters Using The JetSmartFilters Plugin
(Ferdy Korpershoek)
4. Stackable Blocks Version 3: Overview and Look at Dynamic Data Options
(David McCan)
5. Dynamic Multi-tab Thumbnail Product Carousel with OxyExtras
(Design with Cracka)
6. 04 Create Hero Section in Bricks Builder
(Touchdown Tech)
Top Articles
Latest Posts
Article information

Author: Dean Jakubowski Ret

Last Updated: 03/20/2023

Views: 5583

Rating: 5 / 5 (50 voted)

Reviews: 81% of readers found this page helpful

Author information

Name: Dean Jakubowski Ret

Birthday: 1996-05-10

Address: Apt. 425 4346 Santiago Islands, Shariside, AK 38830-1874

Phone: +96313309894162

Job: Legacy Sales Designer

Hobby: Baseball, Wood carving, Candle making, Jigsaw puzzles, Lacemaking, Parkour, Drawing

Introduction: My name is Dean Jakubowski Ret, I am a enthusiastic, friendly, homely, handsome, zealous, brainy, elegant person who loves writing and wants to share my knowledge and understanding with you.