How to enhance your WooCommerce products with ACF fields

In this detailed tutorial, I'll show you a quick and easy way to combine ACF and WooCommerce to add and display custom fields with extra data on your product and shop pages. The best part? You can have it all set up in less than 15 minutes.

I've seen a couple of variations of this question from Woo store owners:

• How can I add ACF custom fields to WooCommerce products?
• How to integrate Advanced Custom Fields with WooCommerce product pages?
• How can I use Advanced Custom Fields with WooCommerce for product personalization?

I get it! Sometimes, the standard WooCommerce fields aren't enough to add and display product data the way you want.

In this detailed tutorial, I'll show you how to add custom fields to WooCommerce pages. Don't worry - this is pretty beginner-friendly, so you won't need to add custom code snippets or mess with your site's CSS, HTML and functions.php files. Here's what we'll need:

• Advanced Custom Fields (ACF): To create custom fields in your ecommerce site's backend.
• WooCommerce Product Table: To display the custom product fields on the front end of your site, such as on the shop and product detail pages.

But first, let's begin with a quick refresher on custom fields and their benefits.

What are custom fields in WooCommerce?

Custom fields are additional data fields that you can add to your products, orders, checkout page, or other elements of your online store. They go beyond the default fields available in WooCommerce. These fields allow you to provide extra details about products.

Here are a few examples of how to use custom fields in WooCommerce:

• To add extra product details.
• Marketing notifications that you can quickly update as needed.
• Dates and times for product countdowns, launch dates, or auctions.
• Extra instructions on how to use a specific product.
• Special features you can't add using the default WooCommerce options, like an additional video.

The custom fields would appear together with the standard product data like price and description.

A quick note: People sometimes refer to custom fields as fields which customers fill in. That's not what this post is about. Here, we'll look at how to add static text fields to the product detail and shop pages in WooCommerce. If you want to add fields customers can fill, then check out WooCommerce Product Options instead.

What is the value of custom fields for your WooCommerce store?

Stores that add custom fields can expect to see the following benefits:

Custom fields vs. custom taxonomies

Before we go on, let's clarify the difference between custom fields and taxonomies.

Both custom fields and custom taxonomies help organize and present product information in WooCommerce. But they are used for different purposes.

Custom fields are additional data fields you can add to individual products to provide specific details, attributes, or extra product information, such as size, color, material, etc. For instance, if you sell clothing, you might add custom fields for:

• Sizes: Small, medium, large, extra large, etc.
• Color options: Red, blue, green, purple, etc.
• Materials: Cotton, leather, rayon, etc.

On the other hand, custom taxonomies are used to classify and group products based on specific criteria. Custom taxonomies allow customers to browse products based on predefined categories and easily find what they want. For example, if you run an online bookstore, you might want to create custom taxonomies for:

• Genres: Fiction, non-fiction, science fiction, mystery, etc.
• Author name: Mark Manson, Jonas Jonasson, Sophie Kinsella, etc.
• Publish year: 2022, 2023, 2024, etc.

How can I add ACF custom fields to WooCommerce products?

With more than 2 million active installs, Advanced Custom Fields (ACF) is a well-known freemium WooCommerce plugin. It has a user-friendly and intuitive interface for creating custom fields on WooCommerce product pages.

The Advanced Custom Fields plugin provides a wide range of field types, including text, select, checkbox, image, and more, to capture and display various kinds of information.

ACF also comes with a bunch of nifty features, for example, you can use its repeater field to add sub-fields easily. You can also organize custom fields into field groups and assign them to specific post types.

How to create custom product fields in WooCommerce using ACF

Adding a custom field to the product page in WooCommerce using the Advanced Custom Fields (ACF) plugin is a pretty straightforward process. Here's how to do it:

1: Install and activate the Advanced Custom Fields (ACF) plugin

There are two versions of the plugin: ACF and ACF pro with add on features. Here, we'll use the free version:

1. Download the free plugin from the ACF website.
2. Access your WordPress dashboard and navigate to Plugins → Add New Plugin.
3. Upload the plugin zip file and click Activate.

2: Create a new field group

1. In your WordPress admin dashboard, go to ACF → Field Groups.

   

2. Click "Add New" from the top of the page to create a field group.
3. Give your field group a name, for example, "Product Details."

3: Add a custom field

1. In the new field group, click on the Add Field button.
2. Choose the field type based on the information you want to collect (e.g., "text area" for text input).

   

3. Enter a field label, which is the name of your new custom field shown on the "Edit" page, e.g., "Strength" or "Region".
4. The plugin will generate the field name based on the field label you entered in the previous step. You can edit it or use it as is.
5. Configure additional settings (like default value, layout, etc.) as you prefer.
6. Rinse and repeat to add more field groups.

4: Assign the field group to products

1. Scroll down to the "Location rules" section to specify where the custom field should appear.

   

2. Choose the following options from the dropdown menus: "Post Type," "Is equal to," and "And product."
3. Scroll back up and click the "Save changes" button to save your field group.

5: Assign the custom field group to specific products

1. Go to Products → All Products within your WordPress admin and open the edit screen for each product.

   

2. Open the "Edit product" page for the product to which you wish to add custom fields.
3. You'll now see the custom field you added using ACF somewhere in the product data section, and you can enter the data for that product.
4. Edit the placeholders to enter values into the custom fields, then save the product.

That's it! If you've followed these steps, you'll have successfully added custom fields to the product page in WooCommerce using the Advanced Custom Fields (ACF) plugin.

Displaying ACF custom fields with WooCommerce Product Table

ACF creates the custom fields on the backend. However, the custom field data won't be visible to customers on the front end.

That's where the WooCommerce Product Table plugin comes in.

WooCommerce Product Table is an easy-to-use, lightweight plugin that lets you showcase products with their custom fields in a beautiful, user-friendly table on the front end of your website. It lets you display ACF fields in two locations on your site's front end:

1. As a table on the individual product page (see image).

   

2. As columns in a structured product table on your main product listing pages, i.e., the shop, categories, etc. (see image).

   

3. Finally, you can create tables listing products that have a specific custom field value. For example, you could create a table that only lists products that have 'January' added to an ACF custom field called 'Month'.

Keep reading to learn how to do all of these things.

How to display ACF custom fields on the product page

Step 1: Add WooCommerce Product Table to your site

1. Get the WooCommerce Product Table plugin and download its files to your computer.
2. Go into your WordPress admin area and navigate to Plugins → Add New → Upload Plugin.
3. Upload the plugin's zip file from your computer.
4. Select Install Now → Activate.

Step 2: Create your first product table

1. When you first activate the plugin, this will launch the table builder. You can re-launch it later via Products → Product Tables → Add New.
2. Go through the steps to set up the table which you will display on one of your product pages. Pay particular attention to these steps:
   • Select products - Choose 'Individual products' and select the product that you will be displaying the ACF custom fields for.
     

     

   •  Columns - Add the columns that you wish to appear in the table. For a table of custom fields, you probably only want to add the custom fields. All your ACF custom fields will appear in the list of columns. Select each one and change the column name as needed by clicking the pencil icon. For example, this list of columns includes an ACF 'Reference' custom field column:
     

     

3. The last page will give you a shortcode for inserting the table onto the product page. Copy this to your clipboard.
   

   

4. Finally, go to Products → Product Tables → Settings and hide elements such as the search box and number of products per page. These are enabled by default but aren't relevant to displaying advanced custom fields on the product page.

Step 3: Add the table to the single product page

1. Go to the 'Products' section in the WordPress admin and click 'Edit' for the product that you selected when you created the table.
2. Paste the shortcode from your clipboard into the short description field.

Here's a preview of how the ACF custom fields look on the WooCommerce product page. This table is displaying 3 custom fields for the coffee product, each in their own column:

Step 4: Add the table to more products

So far, we've listed ACF fields on the WooCommerce product page for 1 specific product. There are 2 ways to do this for multiple products:

• Method 1 - Duplicate the table:
  • Go to Products → Product Tables.
  • Hover over the table you already created for the other product.
  • Click 'Duplicate'.
  • This will clone the table. Edit the new table and change which product it will appear on.
  • Paste the shortcode for the new table (which you can get from Products → Product Tables) into the short description for the relevant product.
• Method 2 - Add the product table programmatically. This will automatically insert the product table shortcode to the single product page template so that you don't need to add it manually. This is a developer-level task and we've provided a code snippet to get you started. The code snippet dynamically adds the ID of the current product so you don't need to select it when you create the overall product table.

Display ACF custom fields on the shop, category, and other WooCommerce template pages

WooCommerce Product Table also lets you display custom fields on your main shop pages. This time, the product table will list multiple products - each with custom field columns. For example, this shop page includes custom fields for Shop 1, Shop 2 and Shop 3:

Setup instructions:

1. Create a product table at Products → Product Tables → Add New.
2. This time, choose the option on the first page to "Display on a shop page".
   

   

3. Select which shop page templates you want to display the table with ACF custom fields on:
   

   

4. Use the 'Columns' page to add all the columns you wish to include, including the custom field columns:
   

   

5. Choose the remaining settings for the product page as needed.

That's it! Head to the front end to preview the product table with custom fields on the shop and category pages.

List products with a specific ACF custom field value

Finally, I'll show you how to create a table that only lists products that have a certain value saved in your Advanced Custom Fields field. For example, you might create a table listing only products which have 'January' saved in the 'Month' ACF custom field:

1. Create a product table via Products → Product Tables → Add New.
2. Choose the option to add the table to the page manually.
3. On the 'Select products' page, either select the custom field from the list or choose 'Custom fields' and enter the custom field name plus the exact value that you wish to display the products with. You can find these in the Advanced Custom Field settings in the WordPress admin (ACF → Field Groups):
   

   

4. Select your columns and any other options as needed.
5. Paste the shortcode from the final page of the table builder onto the page where you wish to list the products based on their ACF field value.

Show ACF fields on your WooCommerce product and shop pages today!

Custom fields are extra data fields that you can add to product pages to present additional information beyond the standard product details.

One of the easiest ways to personalize product pages with custom fields is with:

• Advanced Custom Fields (ACF): This lets you create custom fields in your site's backend.
• WooCommerce Product Table: This lets you showcase the custom product fields on the product page and the main shop and category pages.

Set them up today, and start displaying better product data to your customers.