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 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: 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 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) 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: 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): 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: 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"] 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 ); 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. Related Articles The New Way to Create a WooCommerce Product Catalog Until now, there was no easy way to create a WooCommerce product catalog to list products in a neat and compact format. In this post, I'll walk you through how to do… How To Create A Table Of WooCommerce Products With WooCommerce Product Table Ever wished that you could create a sortable, filterable table that contains all or some of your WooCommerce products? If you’re running a WooCommerce store, you know that WooCommerce already… How to Display WordPress Custom Fields In case you’re just now looking to start using custom fields, you’ll enjoy the displaying WordPress custom fields tutorial on wp-types.com. Complete Guide: How To Create A WooCommerce Wholesale Order Form Struggling with how to create a WooCommerce wholesale order form for your store? The normal WooCommerce product pages are good for a lot of things - but wholesale ordering isn't… Let's block ads! (Why?) SHARE SHARE SHARE Unknown RELATED POSTS