Create custom fields with WooCoomerce custom fields addon
In this tutorial we will be showing you how to create custom fields with WooCommerce custom fields addon
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:
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
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:
2. Add WooCommerce Custom Fields to Field Group
Next, use the + Add Field button to add your first custom field:
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
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)
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:
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:
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:
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:
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):
You can also change the heading of a column by adding a colon after. For example,
In the end, it might look like this:
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
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
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:
Once you add the shortcode, you should see your order form and all the relevant custom fields on the frontend of your site:
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 );
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.
Thank you for supporting our tutorial on how to create custom fields with WooCommerce custom fields addon