ACF For WooCommerce

ACF For WooCommerce

by Cat's Plugins

1 / 22
 ACF For WooCommerce

1. ACF For WooCommerce - Overview ........................................................... 3

2. How to install WP LKS ................................................................................. 3
2.1. Install Dependent Plugins ........................................................................... 7
3. ACF Field Type Differents ............................................................................ 8
4. How to use field types .................................................................................. 9
5. Field types custom settings ........................................................................ 9
6. Understand "Display on" Options .............................................................. 10
7. Rules to show the custom fields ............................................................... 11
8. Example: Custom Fields on Product Page .............................................. 12
8.1. Extra options for selling flower ................................................................... 12
8.2. Extra pricing options ................................................................................. 13
8.3. Only show fields for specific product .......................................................... 15
9. Example 2: Custom Fields on Checkout Page ......................................... 16
9.1. Custom fields on Checkout page ............................................................... 16
9.2. Custom fields as user profile ..................................................................... 18
9.3. Show custom fields in order emails ............................................................ 20
10. Example 3: Custom fields on My account page .................................... 20
10.1. Custom fields on WooCommerce Account page ....................................... 20
11. F.A.Q .......................................................................................................... 22

2 / 22
 ACF For WooCommerce

1. 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(https://catsplugins.com/tutorials/install-dependent-plugins/)
post

2. How to install WP LKS

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.

3 / 22
 ACF For WooCommerce

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.

4 / 22
 ACF For WooCommerce

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.

5 / 22
 ACF For WooCommerce

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

6 / 22
 ACF For WooCommerce

2.1. 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.

7 / 22
 ACF For WooCommerce

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.

3. 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:

BASIC

Text
Textarea
CHOICE
Checkbox
Radio Button
Select
True / False

CONTENT

File
Gallery
Image
oEmbed
Wysiwyg Editor
JQUERY
Color Picker

8 / 22
 ACF For WooCommerce

Date Picker
Date Time Picker
Google Map
Time Picker

LAYOUT

Clone
Flexible Content
Repeater
Tab

RELATIONAL

Page Link
Post Object
Relationship
Taxonomy

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)

4. How to use field

types(https://www.advancedcustomfields.com/resources/#field-types)

5. Field types custom settings

9 / 22
 ACF For WooCommerce

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.

6. Understand "Display on" Options

10 / 22
 ACF For WooCommerce

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.

7. 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:

1. “Display on” options: select what page to show

2. Rules options: select where to show on that page

Screenshot:

11 / 22
 ACF For WooCommerce

8. Example: Custom Fields on Product Page

8.1. Extra options for selling flower

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.

12 / 22
 ACF For WooCommerce

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

8.2. Extra pricing options

In the previous post, we have talked about adding the custom fields on the single product page(https://catsplugins

13 / 22
 ACF For WooCommerce

.com/knowledge-base/acf-for-woocommerce/how-to-add-custom-field-on-woocommerce-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:

14 / 22
 ACF For WooCommerce

8.3. 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(https://catspl
ugins.com/knowledge-base/acf-for-woocommerce/full-guide/#how-to-add-custom-field-on-woocommerce-single-
product-page)

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

15 / 22
 ACF For WooCommerce

same for the product variant.

9. 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.

9.1. 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, please read this article about Understand custom
field options(https://catsplugins.com/knowledge-base/acf-for-woocommerce/understand-display-on-options/)

Step 2: Then, in the Rules section, you follow the image instruction below

16 / 22
 ACF For WooCommerce

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

17 / 22
 ACF For WooCommerce

9.2. 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.

18 / 22
 ACF For WooCommerce

The custom user information will be saved, the user can edit on the user profile page, like this:

19 / 22
 ACF For WooCommerce

9.3. Show custom fields in order emails

Updating content

10. 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.

10.1. Custom fields on WooCommerce Account page

In the other article, we have mentioned that you can use the custom field as custom user meta(https://catsplugins.
com/knowledge-base/acf-for-woocommerce/custom-fields-on-checkout-page-as-user-profile/)
, 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.

20 / 22
 ACF For WooCommerce

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(https://catsplugins.com/knowledge-base/acf-for-
woocommerce/rules-to-show-the-custom-fields/)

Example

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:

21 / 22
 ACF For WooCommerce

11. F.A.Q - ACF For WooCommerce

22 / 22

Powered by TCPDF (www.tcpdf.org)