ACF For WooCommerce - Overview
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 how to install the dependent plugin on the instructions above, or Install Dependent Plugins post
Install WordPress Plugin by 3 Methods
If you’ve just installed WordPress then you’re probably looking for a way to install WordPress plugin that you need for your website. If that’s you then keep watching because in this video I’ll show you three methods that you can use to install a plugin on your site.
Fastest: Install WordPress Plugin by Plugin Dashboard
The first method is the easiest method and we will be using the WordPress plugin directory.
It sounds complicated but it’s really not.
- From your WordPress dashboard, you’ll look for the plugins area and you want to click add new.
- When you click add new it takes us to this whole area this is the WordPress plugin directory.
These are all the free plugins available that you can install on your site.
To find the one that you’re looking forward we want to search for the plugin, well do ACF For WooCommerce that’s a great additional plugin for WooCommerce that you can install.
Let’s go ahead and install it now and you have to do two things with any plugin.
You’ll want to install it but then you want to activate it which means you want to make sure that it goes live on your site and that you can utilize it.
Once you click to activate it’ll activate the plugin and each plugin will be different, for the ACF For WooCommerce, it will take me to the active page where you will active by the purchase code.
So that’s the first method and it’s by far the easiest but its also utilizing only the free plugins that are on the WordPress directory.
Slower: Install WordPress Plugin Section in Upload ZIP file
Now the next method is you’ve purchased a plugin and you’ve downloaded it from the plugin website.
You will need to upload it on your own so let’s do that next.
We want to go back over to our plugins area we can click add new again.
- Instead of doing the search plugins area we want to click on the upload plugin button.
- So well click upload and now we can choose the file and we need to search for it on our computer.
- From here you can either click Choose file or if you have it open you can left-click the zip folder and drag it and then you see it.
Once you choose the file you want to click install now and it will go through and install the plugin that you just uploaded.
Again once it’s installed you’ll be prompted to activate the plugin if you need to activate it right now
If you don’t want to activate it you can go to your installed plugins and you can see the status of them where we only have our ACF For WooCommerce activated you can tell by the blue background.
From the WP Plugin List you can activate any of them, you can also delete them, you can deactivate them if you don’t want to use that plugin anymore.
So that’s method two now method three is very similar to method two however instead of uploading it through our plugins admin area well be using an FTP client.
Slower a little more: Install WordPress Plugin by FTP
There are several FTP clients that you can choose from Ill be using FileZilla for this tutorial.
If you’re not familiar with FTP clients then you can view our FTP video on how to get started with that once you connect to your website make sure that you go into your plugins folder.
To do that I’ll show you.
- We’ll drill down into the public HTML.
- You need to go to wp-content that is where all of our themes and plugins are kept.
- Right here you see our plugins page and here are the three plugins that we have.
What you need to do is when you download your zip file from the website that you’ve purchased your plugin you’ll also need to unzip the file so that you can upload just the folder.
- So you see here I have my acf-for-woocommerce_v3.8.zip file so we need to right-click and extract all
- Browse where we want it to go
Now let’s go back to our FTP client.
- Going to right-click, refresh so you can see all of the items on the left panel, what you want to do is bring this folder and upload it over the right panel.
- You need to do is right-click, select upload, and now it will upload all of the folders into your plugins area on your website.
When it’s finished we can head back over to our plugins page and you’ll want to click refresh or just click the installed plugins again and when you do that you now see that the plugin that we just uploaded is here.
When you upload via FTP it automatically uploads but it does not activate so anything that you want to activate.
Make sure you come back over to your installed plugins area and activate the plugins that you need to.
That’s the simple way of how you can install a plugin on your WordPress website.
Video Source: Youtube
Install Dependent Plugins
Each product will have different dependent plugins. So the images in the tutorial below just are the example, but overall, all the steps will be exactly the same.
Sometimes, after installing and activating the plugins from Cat’s Plugin, you will see it requires one or more plugins.
That’s the independent plugins, which is required to make our plugins works.
If you’re not know how to install them, please follow this instruction.
Once we go into our dashboard, you’ll see that we have a message now the following required plug-in is currently inactive so, we click on begin activating plugin.
It will just take your user through the process of installing it and then activating the plug-in.
After that, the following plug-in is now activated successfully. Like this.
You can see in our plugins you know we have the required plugin is installed successfully on the plugin list.
That’s how you install the dependent plugins within the WordPress plugin that you’re dispersing out into the wild.
ACF: Field Types 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 text)
- Text Area (type text, API returns text)
- Number (type number, API returns integer)
- Email (type email, API returns text)
- Password (type password, API returns 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 chosen item)
- Checkbox (tickbox list of choices, api returns array of choices)
- Radio Buttons ( radio button list of choices, api returns chosen item)
- True / False (tick box with 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,lng,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)
ACF: Field Types Settings
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.
Display On Option: How Does It Work?
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.
Display Rule: How To Show Fields on Specific Section
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: Custom Fields on Product Page
Selling Flowers with Extra Options
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
Extra Price Options
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 fields for specific product
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. Click here for the instruction
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.
Custom fields on Checkout page
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, please read this article about Understand custom field options
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 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:
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.
Show Custom Fields on My Account Pages
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: