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 available from WordPress.org:

1. Access your WordPress dashboard and navigate to Plugins → Add New Plugins.
2. Enter "Advanced Custom Fields" in the search box.
3. Click Install → 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).

   

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

   

How to use ACF and WooCommerce Product Table to add and display custom fields

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.
5. Enter the license key in the setup wizard and select "Activate".

2: Add the table to the single product page

Follow these steps if you want to add the WooCommerce Product Table plugin to the product page. Either do this in the plugin setup wizard, or later on the settings page:

1. For this use case, skip the setup wizard and navigate to WooCommerce → Settings → Products → Product tables.

   

2. Locate the "Table content" section and find the "Columns" field. Add each custom field to their list of columns by adding "cf:" followed by the name of the custom field you created using ACF earlier. For example, "cf: image", "cf: name, cf: summary, cf: price, "cf: buy". Check out the full list of available columns in the plugin's knowledge base.
3. Update the maximum text in the 'Description length' field.
4. Scroll down and save the settings.
5. Open the 'Edit Product' page for the product where you want to display the custom fields table.
6. Paste the following shortcode in the 'Short Description' section on your site. Check out this detailed article or use this example product table shortcode to get you started. Here, we'll display a table with three custom fields for a coffee product with ID 54121. The table has three columns in total - one for each custom field: [product_table include= "12345" columns=" cf:strength,cf:region,cf:type"]

Here's a preview of how the custom fields look on the WooCommerce product page:

How to customize the shortcode

Here's how to tailor the shortcode to create your product table of custom fields:

1. Replace '12345' with the product ID for which you want to display custom fields. You'll find this in the URL of the 'Edit Product' page for each product. For example, if the URL is [yoursite.com]/wp-admin/post.php?post=24&action=edit, it means that the ID is 24.
2. 'Replace 'strength,' 'region', and 'type' with the custom names you created using the ACF plugin. Also, you can add and remove custom fields as preferred. Make sure you use commas to separate them (no spaces) and add cf: in front of each custom field name.
3. In addition, you can add columns or remove them and make other changes to the product table. Check out the complete list of options in the plugin knowledge base.

Finally, update the product page and preview it. You'll now see the table listing the custom field values in the short description section of the product detail page.

3: Add the table to the shop, categories, and other main product listing pages

Note: This will create product tables that replace your store's default shop/archive pages. If you want to use the default pages, skip this step.

1. Go to WooCommerce → Settings → Products → Product tables within your dashboard.

   

2. Locate the "Shop integration" section and select the appropriate pages to display the product table.
3. Add each custom field to their list of columns by adding "cf:" followed by the name of the custom field you created using ACF earlier. For example, "cf: image", "cf: name, cf: summary, cf: price, "cf: buy". Check out the full list of available columns in the plugin's knowledge base.
4. Enable the lazyload option if you have a lot of products in your store.
5. Select the appropriate style for the 'Add to cart' button: cart buttons, checkboxes, or cart buttons and checkboxes.
6. Enable the quantity picker field. (Optional)
7. Select how to display the 'variation' options: as a dropdown list, one variation per row, or with a read more button linking to the product detail page.
8. Select the appropriate product filter option.
9. Save the settings.

That's it! Head to the front end to preview the product table with custom fields on the shop and category pages. It'll look similar to this:

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.