WooCommerce Custom Fields: How to Create and Display Them (2023)

Are you looking for a way to collect and display additional information about yourWooCommerceProducts? WooCommerce custom fields are the solution and you will learn how to use them in this post.

In particular, you will learn two very important pieces of the puzzle:

  1. Adding custom fields to the WooCommerce product backend where you can use them to add additional information about a product.
  2. Take these WooCommerce custom fields and actually display them on the frontend for your visitors (This is often the trickier part, but I'll show you a no-code solution)

For this second piece of the puzzle, I'll specifically focus on helping you view the custom fieldsin a table layoutlike this below. The reason for this is that this approach allows for a completely code-free solution:

WooCommerce Custom Fields: How to Create and Display Them (1)

If you want to display WooCommerce custom fields on the single product page, that's not the main focus of this article, although I'll cover the basic approach you need to take and point you in the right direction.

What you need to follow this tutorial on WooCommerce custom fields

To follow this guide you will need the help of some plugins.

To handle adding the custom WooCommerce fields yourself, use the free one firstAdvanced Custom Fields Pluginvon WordPress.org.

Then, to actually display those custom fields in an easy-to-use table layout, use theWooCommerce Product Tables Plugin. The table layout that this plugin offers is especially good for:

  • wholesale stores
  • Digital products (e.g. eBooks, photos, audio, video etc.)
  • Restaurants(including ordering system)
  • Build your own products
  • Etc.

Basically, it's a great option to create any type ofWooCommerce order form.

Ready to start? Watch the short video below orjump to the tutorial.

Part 1: Use advanced custom fields to add fields

Once you have installed and activated the free oneAdvanced Custom Fields Pluginfrom WordPress.org, go toCustom Fields → Add Newin your WordPress dashboard to create the custom fields for your WooCommerce products.

1. Create a new array

From there, give your field group a name (The name isn't particularly important, just make it clear and easy to remember).

Then with thelocation rules, select Show this field group ifPost-Typis equal toProduct.This tells Advanced Custom Fields to only show these custom fields for WooCommerce products.

(Video) Create & Display WooCommerce Custom Fields & Taxonomies

And that's it! While you can tweak theIdeasOptions if you want, it's perfectly fine to leave them as default and clickPublish:

WooCommerce Custom Fields: How to Create and Display Them (2)

2. Add custom WooCommerce fields to the field group

Next, use the+ Add fieldButton to add your first custom field:

First give him afield label. Once you add the label, the advanced custom fields will be filled in automaticallyFeldname.

One important option to look out for is theField type. You should change this drop-down menu depending on the information you wish to collect. Advanced Custom Fields gives you many options including:

  • Text – good for a short, single line of text
  • Text area - good if you want to type multiple sentences/paragraphs
  • Number
  • website
  • Bild
  • file

For example, let's say you're selling homemade granola and you want:

  • Use a ✅ or ❌ emoji to indicate fair trade products
  • Attach a PDF document with detailed information about the origin of each ingredient in your muesli

Side note - This is a dumb example, but the same basic principles apply no matter what you want to use your custom fields for. Bonus aside - this example got me thinkingthis portlandia chicken sketch.

You want two custom fields:

  • Emoticons- You could use a text box, or a more user-friendly approach would be to use a radio button with the two options already selected
  • file– If you use a file field type, you can upload a PDF document (or other file types you specify)
WooCommerce Custom Fields: How to Create and Display Them (4)

Make sure, thatTo updateYour field group when you've added all the custom WooCommerce fields you want to use.

3. Enter data in custom fields when editing products

Now when you create a new product or edit an existing product, you should see your new custom fields. By default, they appear just below the text editor, but you can also move them below the Product Data field using the field group settings if you want:

WooCommerce Custom Fields: How to Create and Display Them (5)

You should enter the relevant data in the custom fields for all products to which the custom fields apply.

At this point you have successfully created custom fields in the backend and saved this information in your database.

(Video) How to Create and Display Custom Fields in WooCommerce | #woocommerce #ecommerce #customfields

However, when you go to the product page, this custom field data is nowhere to be seen:

WooCommerce Custom Fields: How to Create and Display Them (6)

That's where part 2 of this tutorial comes in!

Part 2: Display WooCommerce Custom Fields with WooCommerce Products Table

Keep in mind that in this tutorial our main focus will be on taking this custom field data and pouring it into a WooCommerce order form like this one:

WooCommerce Custom Fields: How to Create and Display Them (7)

For this you must havedas WooCommerce Product Table-Plugininstalled and activated on your WooCommerce site.

1. Choose Which columns to display

To start, go toWooCommerce→ Settings → Products → Product tables:

The first thing you want to configure is thecolumnsoption in thetable contentSection. This is where you instruct the WooCommerce Products table to display your WooCommerce custom fields (along with all your regular product information).

Basically, you'll probably want to add the following general product information:

  • Name– the name of the product
  • Bild– the featured image of the product
  • short description– the brief description of the product
  • Preis– the price of the product
  • Add to Cart– an add to cart button (You can control how this button works in a second).

Any item (Comma separated) is displayed as a separate column with the relevant product data:

WooCommerce Custom Fields: How to Create and Display Them (9)

Then to add your custom fields as your own columns you can use this format:


where fieldname is the actual name for the custom field you want to display. Remember that you can find a field's name in the advanced custom field settings (ACF automatically generates it based on the label):

(Video) Create & Show Custom Fields on a WooCommerce Product Page

WooCommerce Custom Fields: How to Create and Display Them (10)

You can also change the heading of a column by adding a colon after it. For example,

cf:field name:heading title

In the end it could look like this:

WooCommerce Custom Fields: How to Create and Display Them (11)

2. Configure other settings

Column settings are the most important setting when it comes to displaying WooCommerce custom fields. However, the WooCommerce products table also gives you a bunch of other helpful options that you might want to configure.

Don't feel like youhavetoo, but I would recommend exploring them because you can do things like:

  • Add lazy loading for large product listings
  • Change how the Add to Cart feature works
  • Add filters or sorting options
  • Choose how to display product variations
  • Add a search field
  • Etc.

When you're done, make sure to save your changes.

3. Add WooCommerce product table shortcode

Once you have finished configuring the plugin, you can use WooCommerce Products Table shortcode to display your order form anywhere on your website.

The basic shortcode is[product_table].

However, this shortcode is displayedevery single oneProduct in your store that may not always be what you want.

To control which products are displayed, you can useThe many inclusion/exclusion rules of the WooCommerce product table.

For example, to show only products from the “Cereal” category, you could change the shortcode as follows:

[product_table category="Müsli"]

WooCommerce Custom Fields: How to Create and Display Them (12)
(Video) Tutorial: How to Display Custom fields on WooCommerce product page

Once you've added the shortcode, you should see your order form and any relevant custom fields on the front end of your website:

WooCommerce Custom Fields: How to Create and Display Them (13)

And that's it! If you want, you can use multiple shortcodes with different inclusion/exclusion rules to organize your products. Or you can even add the shortcode to your shop archive page instead of using the normal grid view.

What if you don't want to use a WooCommerce order form?

If you don't want the order form approach and would rather add your custom fields to the regular WooCommerce product page, you'll have to get your hands a little dirty (dirty with PHP, that is).

In particular, you can useWooCommerce's Hooks to embed your custom fields in WooCommerce single product page.

For example, if you want to display your custom fields right after the product summary, you can add something like this to your child theme's fieldsfunctions.phpfile whereFeldnameis the actual name of your field:

// Display ACF fields on WooCommerce single product page

add_action( 'woocommerce_after_single_product_summary', "ACF_product_content", 10 );

Funktion ACF_product_content(){


This gives you the contents of the box, but you still need to add some other content and styling to make it look good. If you're not a techie, you can see why I went with the no-code solution!

Final Thoughts on WooCommerce Custom Fields

WithAdvanced custom fieldsAndWooCommerce Product Tableyou can add and display custom WooCommerce fields without writing a single line of PHP.

Remember, all you have to do is:

  • Create and assign an Advanced Custom Fields field groupWooCommerceProducts
  • Create as many custom fields as you want to use
  • Add data to the custom fields when adding/editing WooCommerce products
  • Add custom fields as columns in WooCommerce product table
  • Place the WooCommerce product table shortcode where you want your order forms to appear

Do you have any questions about this method of working with custom fields for your WooCommerce products? Ask in the comments!

Disclosure: Some of the links in this article are affiliate links, which means we may earn a commission if you click through and make a purchase at no additional cost to you.

(Video) How to Add Custom Fields to WooCommerce Products | Advanced Product Fields for WooCommerce


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.

How do I display ACF custom fields in frontend WordPress? ›

How to display custom field information on the frontend of your site.
  1. Create a New Field Group. ...
  2. Add Custom Fields. ...
  3. Configure Settings and Publish. ...
  4. Add Some Information in the WordPress Editor.
Apr 15, 2022

How do I display custom field values in WordPress? ›

The default way to show custom fields in WordPress would be to:
  1. Open the single. php file or page. ...
  2. Find the_content function so you can list your custom field data after the actual content of the post or page.
  3. Use the get_post_meta function to fetch custom field values using their meta key then list them using PHP echo.
Dec 7, 2022

How do I show custom fields? ›

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. You can enter the custom field data using key/value pairs.

How do I show more products per page in WooCommerce? ›

In the left sidebar, click on WooCommerce. Then, go to Product Catalog, and scroll down the left-hand side, where you can see the Products per Row Then, you can set the number of products per page to the preferred number. You can also customize the number of rows per page.

How do I display custom fields in custom post type in WordPress? ›

How To Add Custom Fields to a Custom Post Type in WordPress
  1. Start by creating a custom post type. ...
  2. Download, install and activate Advanced Custom Fields. ...
  3. Create your field group. ...
  4. Assign your field group to the custom post type. ...
  5. Choose your display options. ...
  6. Publish. ...
  7. Using Your Custom Fields. ...
  8. Conclusion.
Nov 25, 2022

How do I display products in WooCommerce? ›

Go to WooCommerce → Settings, select the Products tab, and then choose the Display option. For each of the Shop Page Display and Default Category Display options, select Show both. Click the Save changes button to save. Note: All the code mentioned below should be placed in the functions.

What is the difference between Get_field and The_field? ›

To retrieve a field value as a variable, use the get_field() function. This is the most versatile function which will always return a value for any type of field. To display a field, use the the_field() in a similar fashion. Here's a basic usage example, and please be sure to view the code example page for more.

What is advanced custom field? ›

Advanced Custom Fields is a WordPress plugin which allows you to add extra content fields to your WordPress edit screens. These extra content fields are more commonly referred to as Custom Fields and can allow you to build websites faster and educate your clients quicker.

Why use advanced custom fields? ›

ACF allows you, the developer, to take full control of the WordPress edit screen and tailor the content editing experience around your website's needs! Using ACF, you can add fields in addition to the WordPress visual editor or choose to hide it completely.

How do I create a custom 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 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 show custom fields outside the loop in WordPress? ›

Display Custom Fields Data Outside The Loop in WordPress

You'll need to add the following code to your theme files where you want to display the custom fields data in WordPress. global $wp_query ; $postid = $wp_query ->post->ID; echo get_post_meta( $postid , 'Your-Custom-Field' , true);

How do I display a specific data from a custom database table in WordPress? ›

Try this: <table border="1"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Points</th> </tr> <? php global $wpdb; $result = $wpdb->get_results ( "SELECT * FROM myTable" ); foreach ( $result as $print ) { ?> <tr> <td><?

How do I create a dynamic field in WordPress? ›

To add a new dynamic form easily in your site, follow these steps:
  1. Log in to WordPress as the administrator.
  2. On the Dashboard in the left sidebar, click Plugins, and then click Add New:
  3. Search for “Ninja Forms” and click Install Now. ...
  4. On the Dashboard, in the left sidebar click Ninja Forms, and then click Add New:

How do you make a custom field visible as a column in List view? ›

From List view
  1. Open any List view in your Workspace.
  2. You can add columns to a List view one of two ways: Click the + icon or. Click Show then Columns.
  3. Switch to the New Column tab.
  4. Select the type of Custom Field you want to create.
  5. Fill out any details to create your new Custom Field.
Dec 20, 2022

Why custom fields are not showing WordPress? ›

If your WordPress site is missing the custom fields option under the 'Screen Options' menu, then you need to check if you have the Advanced Custom Fields (ACF) plugin active on your site. ACF is a very popular WordPress plugin that developers use to create custom meta boxes. ACF is running on over 1 million websites.

How do I display a quantity in WooCommerce? ›

Go to WooCommerce > Settings > Advance Product Quantity and navigate to “Configurations”. From here you would need to enable decimal quantities and display quantities field in listing pages if needed.

How do I show 5 products per row in WooCommerce? ›

Use the WooCommerce shortcodes on your archive page. [recent_products per_page="12" columns="5"] will display the products in rows of 5 columns.

How do I set maximum quantity in WooCommerce? ›

To configure quantity rules for a product:
  1. Edit the product.
  2. Navigate to the Product Data > General tab.
  3. Locate the Quantity Rules section.
  4. Configure the Minimum Quantity, Maximum Quantity, Group of and Exclude from options.

How do I display categories of my custom post type? ›

To display your custom post types on the same category page as your default posts, you need to add this code into your theme's functions. php or a site-specific plugin. $post_type = array ( 'nav_menu_item' , 'post' , 'movies' ); // don't forget nav_menu_item to allow menus to work!

How show all categories in custom post type? ›

You can get terms related to any post type in any taxonomy with wp_get_post_categories() . If the taxonomy is not “category”, use the “taxonomy” arg to specify what you want. This returns an array of term objects.

How do I create a custom comment template in WordPress? ›

  1. Step 1: Install and Activate the Plugin.
  2. Step 2: Customize the Form.
  3. Step 1: Add Some Policy Text to a WordPress Comment Form.
  4. Step 2: Move Comment Form Text Field to the Bottom.
  5. Step 3: Delete Website URL Field From WordPress Comment Form.

How do I display a variable product in WooCommerce? ›

To add a variable product, create a new product or edit an existing one.
  1. Go to: WooCommerce > Products.
  2. Select the Add Product button or Edit an existing product. The Product Data displays.
  3. Select Variable product from the Product Data dropdown.

How do I show most popular products in WooCommerce? ›

Another great feature of MonsterInsights is you can simply add your popular products to the end of your blog posts to boost sales. To do this, navigate to Insights » Popular Posts and then click the 'Popular Products' menu option. On this screen, you can customize how your popular products will display.

Where is WooCommerce display settings? ›

In order to access the Display options page you will need to of course access the admin area of your Wordpress installation and then from the WooCommerce menu you will need to click on the Settings link so you can be landed on the default page containing all the settings.

What is the difference between custom fields and advanced custom fields in WordPress? ›

The options page feature in ACF Pro allows you to add extra admin pages to edit ACF fields. Unlike WordPress custom fields, this allows you to create global fields that are not attached to a particular post or page. Instead, the data can be displayed on any page throughout your WordPress site.

What is a key difference between standard and custom fields? ›

Difference between standard and custom objects
Standard objectCustom object
We can't Truncate standard objectsIt is possible to Truncate custom objects
It is possible to create custom fields on standard objectsCustom objects contain some standard field, for example, Name, Created by, Last modified by and so on
2 more rows

Can you explain custom fields? ›

Definition: Custom field

A custom field is used to associate values other than the title, excerpt or content to an article or page. WordPress stores this information as metadata. There are many examples of how to use these custom fields: The name of a client in a portfolio.

What are custom fields examples? ›

Examples of custom fields include data such as title, URL, name, timestamp, or any piece of data you want to define on a model.

What is custom field mapping? ›

Custom Fields Mapping describes how custom fields seen by user (e.g. contact custom field "Role in organisation") are mapped to custom field objects in Search API backend (e.g. "contact:12345").

What is custom field template? ›

Custom Field templates allow you to create a template that you will use for new opportunities. This will allow you to create a set of custom fields that you can add to provide more information for your external talents when they submit a proposal, respond to a job opening or task.

How do I enable custom fields in WordPress? ›

Enable custom fields in WordPress posts or pages
  1. When editing a page or post.
  2. Click on the three dots in the top right corner More Tools and Options.
  3. Click on Options at the bottom.
  4. Check the box to display Custom Fields and click Enable & Reload.

How do I add a custom field to a menu in WordPress? ›

Advanced Custom Fields

Select 'Menu Item' under the location rules. Follow the instructions and update the fields as required. Once you publish the field you can head to your WordPress menu from within the Admin area to see the new field you've created. Pretty easy!

How do I display custom fields in custom post type? ›

How To Add Custom Fields to a Custom Post Type in WordPress
  1. Start by creating a custom post type. ...
  2. Download, install and activate Advanced Custom Fields. ...
  3. Create your field group. ...
  4. Assign your field group to the custom post type. ...
  5. Choose your display options. ...
  6. Publish. ...
  7. Using Your Custom Fields. ...
  8. Conclusion.
Nov 25, 2022

How do I add custom data to WooCommerce? ›

  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 get advanced custom field value in WordPress? ›

To retrieve a field value as a variable, use the get_field() function. This is the most versatile function which will always return a value for any type of field. To display a field, use the the_field() in a similar fashion.

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

Adding a Custom Meta Data

To display it, click the Screen Options and tick the Custom Fields option. The Custom Field box should now appear at the bottom of the post content editor. Now, we can add our custom meta-data. A single meta-data is handled with key name/value pairs.

How do I add a dynamic custom navigation menu in WordPress? ›

The block will likely be included in WordPress core in version 5.9, which is coming later in 2021.
  1. Step 1: Create the Navigation Block. Add the Navigation block to the Block Editor where you would like it to appear. ...
  2. Step 2: Add the Login/Logout Menu Links. ...
  3. Step 3: Make the Menu Links Conditional.
Nov 23, 2022

How do I add a custom field to a field catalog? ›

Go to 'Sales and Distribution > Basic Functions > Pricing > Pricing Control' and execute 'Define Condition Tables'. Select 'Conditions: Allowed fields' and enter 'ZZPSTYV' as a new entry. 5. Note: When you create the condition table Annn, you can now use the field ZZPSTYV as a key field.

How do I display custom post type content in WordPress? ›

Add your custom post type as a part of the Menu options on your WordPress website by following the steps below:
  1. Go to your WordPress dashboard.
  2. Navigate to Appearance > Menus.
  3. Add the News page to your main menu to display a navigational link to our newly created WordPress custom post type, News.
Apr 8, 2022

How do I display custom post types in WordPress plugin? ›

Simply go to plugin settings page by navigating 'Admin Menu –> Display Custom Post'. There you would find specific settings (Left Side), you may need to choose them and click on the button 'Generate Shortcode' (right side). It would instantly provide you the shortcode that you can use it.

How do I display a single custom post type in WordPress? ›

First, you can simply go to Appearance » Menus and add a custom link to your menu. This custom link is the link to your custom post type. Don't forget to replace 'example.com' with your own domain name and 'movies' with your custom post type name.

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 create a custom API in WooCommerce? ›

To create a new API key go to WooCommerce > Settings > Advanced > REST API and click Add key. Enter a description, choose a user to own the API keys, and set the permission levels. If you want the ability to create, update, and delete data, choose Read/Write permissions.

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


1. ACF - Show Custom Fields on WooCommerce Product Page | ACF WooCommerce 2022
(Code Mart)
2. How to add Custom Fields and Display them on Single Post in Wordpress
(Suhail Ahmad - Wordpress Tutorials)
3. How to Create Custom Fields in WordPress Without a Plugin?
(WP Simple Hacks - Wordpress tips and tricks)
4. How to add WooCommerce categories to any page and display ACF (Free) custom field
(Bruce Young)
5. How to set up Woocommerce Custom Fields For Variation
6. WooCommerce Custom Product Options With Great Looking Custom Sections
(WordPress Tutorials - WPLearningLab)
Top Articles
Latest Posts
Article information

Author: Errol Quitzon

Last Updated: 01/25/2023

Views: 5601

Rating: 4.9 / 5 (59 voted)

Reviews: 90% of readers found this page helpful

Author information

Name: Errol Quitzon

Birthday: 1993-04-02

Address: 70604 Haley Lane, Port Weldonside, TN 99233-0942

Phone: +9665282866296

Job: Product Retail Agent

Hobby: Computer programming, Horseback riding, Hooping, Dance, Ice skating, Backpacking, Rafting

Introduction: My name is Errol Quitzon, I am a fair, cute, fancy, clean, attractive, sparkling, kind person who loves writing and wants to share my knowledge and understanding with you.