Advanced Custom Fields for WooCommerce Overview
ACF for WooCommerce Product plugin lets you display WooCommerce product ACF field in the label-value form in the front end on a single product page, checkout page, in order email. Sell configurable products with extra product options by advanced custom fields.
In ACF For WooCommerce, we have a lot of settings, but first, let’s understand how it works.
By understanding it, you will use it more flexible.
How ACF For WooCommerce Works?
ACF For WooCommerce takes advantage of the Advanced Custom Fields plugin, which allows you to create the custom field types at a lot of place in WordPress back-end.
Instead of rendering the fields in the back-end, as usual, we use ACF to create the custom fields on WooCommerce‘s pages.
That’s why it requires ACF plugin after you install our plugin.
You can read this post “How to install the dependent plugin”
ACF Field Type Differents
ACF for WooCommerce can create up to 26 field types, base on your Advanced Custom Fields version. Below is the list of the supported field for each version:
ACF PRO + ACF for WooCommerce
In this version, all the fields are supported, and the number is 30 field types, the specific field types are listed below:
- Radio Button
- True / False
- Wysiwyg Editor
- Color Picker
- Date Picker
- Date Time Picker
- Google Map
- Time Picker
- Flexible Content
- Page Link
- Post Object
ACF FREE + ACF for WooCommerce
- Text (type text, API returns to text)
- Text Area (type text, API returns to text)
- Number (type number, API returns an integer)
- Email (type email, API returns to text)
- Password (type password, API returns to text)
- WYSIWYG (a WordPress WYSIWYG editor, API returns HTML)
- Image (upload an image, API returns the URL)
- File (upload a file, API returns the URL)
- Select (drop-down list of choices, API returns are chosen item)
- Checkbox (tickbox list of choices, API returns array of choices)
- Radio Buttons ( radio button list of choices, API returns are chosen item)
- True / False (tick box with the message, API returns true or false)
- Page Link (select 1 or more page, post or custom post types, API returns the selected URL)
- Post Object (select 1 or more page, post or custom post types, API returns the selected post objects)
- Relationship (search, select and order post objects with a tidy interface, API returns the selected post objects)
- Taxonomy (select taxonomy terms with options to load, display and save, API returns the selected term objects)
- User (select 1 or more WP users, API returns the selected user objects)
- Google Maps (interactive map, API returns lat, long, address data)
- Date Picker (jquery date picker, options for format, API returns string)
- Color Picker (WP color swatch picker)
- Tab (Group fields into tabs)
- Message (Render custom messages into the fields)
How to use field types of ACF?
Read “Resource Fields Types” form ACF to know about all of fields type of ACF.
ACF Field types setting
On each ACF’s field types, it will have the settings, each field will have different settings.
You will see the “Display on” option, it’s the same for all pages
Let’s take a look at the screenshot:
On the field settings, it will have the “Display on” settings, that’s the custom setting created by ACF For WooCommerce plugin.
- If you want to use that field on the single product, check on “Single field“
- If you want to use that field on check out page, check on “Order field“
This two options can’t be selected together, but they can use along with the rest options.
Understand “Display on” Options
If you do not understand what’s the purpose for each option, please read the instruction below:
- Single field: to display this field on the single product page
- Price: use the options as the additional option with a price
- Email field: include the field value in the WooCommerce’s email
- User field: to use the field value as the Custom User’s Meta
- PDF Invoice: to show the field’s value on the PDF invoice file, generated by PDF & Packing Slips plugins
- Order field: to show and use the field on the WooCommerce checkout page.
Rules to show the custom fields
You must specify where to show the fields, else, it will duplicate and show the custom fields multiple times, all over your pages.
Besides how to use the “Display on” options to let the plugin know you will show custom field on the product page or checkout page, you need to specify the position you want to show.
If break the process into 2 steps, you will have:
- “Display on” options: select what page to show
- Rules options: select where to show on that page
Example 1: Custom Fields on Product Page
In this example 1 case, we will use the custom fields to save in product page.
Add a custom field on WooCommerce single product page?
In this section, we will see how to add the custom field on the single product page. Let’s put the example with a real scenario.
What we need to achieve: Add custom fields on the single product page, capture value and save as order options.
So, we will break into 2 step and I will guide you step by step.
1. Add the custom field on the single product page
Let’s take an example product, I think selling flower online can be used in this case. Here’s what you will get after following the instruction.
To have the result as in the screenshot above, we will go to WP Dashboard
- Navigate to “Custom Field” on the menu
- Create new field group
- Add the custom fields to the field group
- Select option at “Display on” option, this will determine how this field will be used.
- Scroll down at “Rules” section, select the conditions for the field group – the position to show on the product page
You can download the example field group I have created to import for this demo: Download the example here
2. Use select field type as a pricing option
How to add custom pricing option on single product page?
In the previous post, we have talked about adding the custom fields on the single product page, now, we will make the advanced step.
We will use the custom fields we have added on the product page as the custom pricing options.
Note 1: This pricing feature only work with field types: select, checkbox, radio, true/false.
Note 2: This pricing feature only work on single product page.
To achieve it, I will use Radio field type as the example.
In the screenshot above, you will see we have 3 things:
- Field type: Radio button
- Display on: Single field, Price
- Choices: format as price : label
And here’s the result:
Only show custom fields if the specific variant is selected
In some case, you only need to show the fields for specific user type or product variant, to do that, I will show you how.
First, you will need to create the field group and other settings as usual.
Second, at the rules section, we will add one more rule, example below:
You can see “Post” rule, I have selected “ASUS FX503VM…..” is the product I want to show. You can do the same for the product variant.
Example 2: Custom Fields on Checkout Page
In this example 2 case, we will use the custom fields to save in order detail, or the user account.
How to show custom fields on checkout page WooCommerce?
One in various usage of ACF For WooCommerce is checkout page.
If you want to have more information in your order detail, then you will create the custom fields for check out page, and capture information then save into the order detail.
Step 1: You have to create the new group with the fields you want. In each field, please check on “Order field”, like this:
To understand what’s the purpose of “Display on” options above.
Step 2: Then, in the Rules section, you follow the image instruction below
You see, at the “Rules” section, I have the example rules is:
- If [Checkout] – [is equal to] – [Before billing form]
If you do not specify the position that the fields will be shown (mine is “Before billing form”), it will show all over your page, so please remember to specify the position.
Step 3: Check the result.
Custom fields on the checkout page as user profile
You also can use the custom fields on the WooCommerce checkout page as custom user profile (custom user meta).
To achieve that, you only need to check on “User field” at “Display on” section
By doing so, the plugin will know you want to use that field as custom user meta.
The custom user information will be saved, the user can edit on the user profile page, like this:
Show custom fields in order emails
Example 3: Custom fields on My account page
This section will show you to add the custom fields on WooCommerce’s My account page so that your customer can edit the profiles with custom user info without going to your back office.
Custom fields on WooCommerce Account page
In the other article, we have mentioned that you can use the custom field as custom user meta, but the user has to login in the back-end to edit the profile.
So, we have a simple demand: use the custom field as user meta, but do not log in to the back office.
Then, we will show the fields on WooCommerce account page and allow user edit there.
Before you start
- You need to create the field group, as usual, the instruction is here:
- You need to understand how the conditional logic work
Step 1: At the “Display on” field setting, you need to select “User field” like the example below:
Step 2: At “Rules” section, select my account and where to show on my account.
In the screenshot above, actually, I can use only 1 rule is “My account”, but, to avoid the conflict with the other field group or prevent it from showing unexpectedly in the back office somewhere, I added 2 more rules to prevent that happen.
And here’s the result you will get if follow my instruction:
F.A.Q – ACF For WooCommerce
Hide the field groups on front-end
It caused by we’re having the rules that match on the frontend, and it shows.
To hide the fields that should only appear on the back-end, you just need to add more rule in the field group, something like this:
- If [User] – [is equal to] – [viewing frontend]
It will hide these field group on the frontend, for sure!