WooCommerce Custom Fields: How to Create and Display Them

Looking for a way to collect and display extra information about your WooCommerce products? WooCommerce custom fields are the solution, and you’re going to learn how to use them in this post.

Specifically, you’ll learn two very important parts of the puzzle:

Adding custom fields to the WooCommerce product backend where you can use them to add extra information about a product.
Taking those WooCommerce custom fields and actually displaying them on the frontend for your visitors (this is often the trickier part, but I’ll show you a code-free solution)

For that second puzzle piece, I’ll be specifically focused on helping you display the custom fields in a table layout like this below. The reason is that doing it this way allows for an entirely code-free solution:

Example of table

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

What You’ll Need to Follow This WooCommerce Custom Fields Tutorial

To follow this guide, you’ll need the help of a few plugins.

First, to handle adding the WooCommerce custom fields themselves, you’ll use the free Advanced Custom Fields plugin from WordPress.org.

Then, to actually display those custom fields in an easy-to-shop table layout, you’ll use the WooCommerce Product Table plugin. The table layout that this plugin offers is especially great for:

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

Basically, it’s a great option for creating any type of WooCommerce order form.

Ready to get started? Let’s dig in…

Part 1: Use Advanced Custom Fields to Add Fields

Once you’ve installed and activated the free Advanced Custom Fields plugin from WordPress.org, head to Custom Fields → Add New in your WordPress dashboard to create the custom fields for your WooCommerce products.

1. Create a New Field Group

From there, give your field group a name (the name isn’t super important, just make it clear and easy to remember).

Then, using the Location Rules, choose to show this field group if Post Type – is equal to – Product. This tells Advanced Custom Fields that you only want these custom fields to appear for WooCommerce products.

And that’s it! While you can tweak the Settings options if you want, it’s totally fine to leave them as the defaults and click Publish:

Create a new field group

2. Add WooCommerce Custom Fields to Field Group

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

Add your WooCommerce custom fields

To start, give it a Field Label. Once you add the label, Advanced Custom Fields will automatically populate the Field Name.

One important option to pay attention to is the Field Type. You’ll want to change this drop-down depending on the information you want to collect. Advanced Custom Fields gives you lots of options including:

Text – good for a short, single-line text
Text Area – good if you want to enter multiple sentences/paragraphs
Number
Website
Image
File

For an example, let’s say you’re selling homemade granola and you want to:

Use a ✅ or a ❌ emoji to indicate products that are fair trade
Attach a PDF document with detailed information about the source of each ingredient in your granola

Side note – this is a goofy example, but the same basic principles apply no matter what you want to use your custom fields for. Bonus side note – this example makes me think about that Portlandia chicken sketch.

You’d want two custom fields:

Emoji – you could use a text field, or a more user-friendly approach would be to use a radio button with the two options already selected
File – using a file field type will let you upload a PDF document (or other file types that you specify)

field type

Make sure to Update your field group when you’ve added all the WooCommerce custom fields you want to use.

3. Enter Data in Custom Fields When Editing Products

Now, when you go to create a new product or edit an existing product, you should see your new custom fields. By default, they’ll appear right below the text editor, though you can also use the field group settings to move them below the Product Data box if you’d like:

field metabox

You’ll want to enter the relevant data in the custom fields for all the products that the custom fields apply to.

At this point, you’ve successfully created custom fields on the backend and saved that information in your database.

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

single product page

That’s where Part 2 of this tutorial comes into play!

Part 2: Display WooCommerce Custom Fields With WooCommerce Product Table

Remember, for this tutorial we’re mainly focused on taking that custom field data and getting it into a WooCommerce order form like this one:

Example of table

To do that, you’ll need to have the WooCommerce Product Table plugin installed and activated at your WooCommerce site.

1. Choose Which Columns to Display

To get started, go to WooCommerce → Settings → Products → Product Tables:

The first thing you’ll want to configure is the Columns option in the Table content section. This is where you’ll tell WooCommerce Product Table to display your WooCommerce custom fields (along with all of your regular product information).

At a basic level, you’ll probably want to include the following generic product information:

name – the name of the product
image – the product’s featured image
short-description – the product’s short description
price – the product’s price
add-to-cart – an add to cart button (you can control how this button works in a second).

Each item (comma separated) will show up as its own column with the relevant product data:

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

cf:field-name

Where field-name is the actual name for the custom field you want to display. Remember, you can find a field’s name in the Advanced Custom Field’s settings (ACF automatically generates it based on the label):

field name

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

cf:field-name:Heading Title

In the end, it might look like this:

add custom fields to table

2. Configure Other Settings

The column settings are the most important setting when it comes to displaying WooCommerce custom fields. However, WooCommerce Product Table also gives you a number of other helpful options that you might want to configure.

Don’t feel like you have to, but I’d recommend exploring them because you can do stuff like:

Add lazy loading for big product lists
Change how the add to cart functionality works
Add filters or sort options
Choose how to display product variations
Add a search box
Etc.

Once you’re finished, make sure to save your changes.

3. Add WooCommerce Product Table Shortcode

Once you’ve finished configuring the plugin, you can use WooCommerce Product Table’s shortcode to display your order form anywhere on your site.

The basic shortcode is [product_table].

However, that shortcode will display every single product at your store, which might not always be what you want.

To control which products appear, you can use WooCommerce Product Table’s many include/exclude rules.

For example, to only display products from the “granola” category, you could modify the shortcode like this:

[product_table category="granola"]

shortcode

Once you add the shortcode, you should see your order form and all the relevant custom fields on the frontend of your site:

Example of table

And that’s it! If you want, you can use multiple shortcodes with different include/exclude 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 need to get your hands a little dirty (dirty with PHP, that is).

Specifically, you can use WooCommerce’s hooks to “hook in” your custom fields to the WooCommerce single product page.

For example, if you wanted to display your custom fields immediately after the product summary, you could add something like this to your child theme’s functions.php file, where field_name is 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 );

function ACF_product_content(){

print_r(get_field('field_name'))}

That will get you the field’s content, but you’ll still need to add some other content and styling to make it look nice. If you’re not a techie, you can see why I went with the code-free solution!

Final Thoughts on WooCommerce Custom Fields

With Advanced Custom Fields and WooCommerce Product Table, you can add and display WooCommerce custom fields without needing to write a single line of PHP.

Remember, all you need to do is:

Create an Advanced Custom Fields field group and assign it to WooCommerce products
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 wherever you want your order forms to appear

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

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

About Colin Newcomer

Colin Newcomer is a freelance blogger for hire with a background in SEO and affiliate marketing. He helps clients grow their web visibility by writing primarily about digital marketing, WordPress, and B2B topics.