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:

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-Typ–is equal to–Product.This tells Advanced Custom Fields to only show these custom fields for WooCommerce products.

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

2. Add custom WooCommerce fields to the field group

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

See Also

10+ Best Custom WooCommerce Fields Plugins (Free & Premium) - LearnWooNeed custom WooCommerce product fields? – Moonthemes Free WordPress themesHow to add custom fields and tabs to WooCommerce product data metabox by code - A white pixelHow to add custom field to product in WooCommerce - Phppot

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)

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:

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.

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

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:

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:

See Also

WooCommerce: How to add a custom field to a product | Hard working nerdAdd custom fields to your WooCommerce product pageNeed custom WooCommerce product fields? - Best WordPress themes, plugins and hostingHow to add custom fields to WooCommerce products

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:

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

cf:Feldname

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

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:

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

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

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(){

print_r(get_field('field_name'))
}

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.