Data Types

Modified on Tue, 17 Nov 2020 at 02:48 PM

There are 14 data types in ACF. All values produced by ACF include string/integer (non-repeatable field) and also JSON string (repeatable field).

1 – Text

Text field helps users to add text content.
Text field can be adjusted up to 10 lines.
Text fields can be edited in the “Custom Fields” tab via text field editor.

Text field settings:

Text field editor:

Template usage example:

<h2>My new heading</h2><p>{{ order.metafields.namespace.key }}</p>

Usage example

2 – HTML

HTML field is similar to text field but more advanced. Users can add not only text but also HTML content.
HTML fields can be edited in the “Custom Field” tab via text field editor.

HTML field settings:

HTML field editor:

Template usage example:

<div class="metafield-bullet-points">{{product.metafields.namespace.key}}</div>

Usage example

3 – Selection

Selection field lets users select one or multiple predefined values.
When attribute “Allow selection of multiple values” is checked, each value will be separated by |, for example: hello|world|2020, book|shoes|pen|eraser.
Selection field can be edited in the “Custom Fields” tab via the selection field editor.

Single-value selection:

Selection field settings:

Selection field editor:

Multiple-values selection:

Selection field settings:

Selection field editor:

Template usage example:

<p>Included item is {{product.metafields.namespace.key}}.</p>

Usage example

4 – Choice

Choice field lets user select one pre-defined value.
When the attribute “Use icon?” is checked, the input value must be in format Choice label::: icon's class name in order to display icons. More info please go to “[New Field's Setting]”, article “3. Choice field”.
Choice field can be edited in the “Custom Fields” tab via choice field editor.

Choice field settings:

Choice field editor:

5 – Checkbox

Checkbox field is used as a way to have users indicating their agreement to specific terms, services or to make simple selection like true-false, yes-no etc. Value created by the Checkbox field is boolean (true/false).
Checkbox fields can be edited in the “Custom Fields” tab via checkbox field editor.

Checkbox field settings:

Checkbox field editor:

Template usage example:

{% if product.metafields.namespace.key %}

<p>This product is recyclable</p>

{% else %}

<p>This product is not recyclable</p>

{% endif %}

Usage example

6 – Switch

Switch field lets user switch on or off an option. It can also be used to make simple selections like true-false, yes-no. Value created by the Switch field is integer (1/0).
Switch fields can be edited in the “Custom Fields” tab via checkbox field editor.

Switch field settings:

Switch field editor:

Usage example

7 – Number

Number field helps users to add numbers only.
Depending on the pre-defined number’s value type in settings, value created by Number can be either string or integer. However, if the field is set to be repeatable, the value type will be converted to JSON string.
Number fields can be edited in the “Custom Fields” tab via number field editor.

Number field settings:

Number field editor:

If Number’s value type is set as “integer”, the number field editor will not accept decimal and will pop up an error if decimal is inputted
Template usage example:

<div class="total-view"><h5>Total view(s): <span style="font-weight: 100;">{{article.metafields.namespace.key}}</span></h5></div>

Usage example

8 – Range

Range field allows users to select a numeric value within a given range (minimum and maximum values).
Range fields can be edited in the “Custom Fields” tab via range slider.

Range field settings:

Range field editor:

9 – Date

Date field allows users to set dates for specific events, occasions, activities etc. based on pre-defined date format.
Date fields can be edited in the “Custom Fields” tab via text field editor or date picker. Date picker is synced with the text input field, so users only need to use one of them to add a date information.

Date field settings:

Date field editor:

Template usage example:

<div class="sale-expired-date page-width" style="text-align: center; font-size: 50px;">Hurry up! Sale will end on {{collection.metafields.namespace.key}}!!</div>

{% endif %}

Usage example

10 – Color

Color field allows users to add HTML color names, color hex codes, color rgb codes or color rgba codes.
Color fields can be edited in the “Custom Fields” tab via text input field or color picker. Color picker is synced with the text input field, so users only need to use one of them to add a color.

Color field settings:

Color field editor:

Template usage example:

{%- if item.product.metafields.namespace.key != blank -%}

<li class="product-details__item product-details__item--wp-color">Wrapping paper's color: <span title="{{ item.product.metafields.namespace.key }}" style="height: 20px; width: 20px; display: inline-flex; vertical-align: bottom; background-color:{{ item.product.metafields.namespace.key }}"></span></li>

{%- endif -%}

Usage example

11 – Image/File

Image/File field allows users to add image URLs.
Image/File fields can be edited in the “Custom Fields” tab via text input field.

Image/File field settings:

Template usage example:

{%- unless product.metafields.namespace.key == blank -%}

</div

{%- endunless -%}

12 – Time

Time field allows users to set time for specific events, occasions, activities etc.
Time fields can be edited in the “Custom Fields” tab via time picker.

Time field settings:

Time field editor:

13 – JSON

JSON field allows users to add JSON content.
JSON fields can be edited in the “Custom Field” tab via JSON editor.

JSON field settings:

JSON field editor:

Since it is a JSON editor, it can check JSON errors while typing.

14 – Tags

Tags field allows users to add a list of tags.
When attribute “Allow selection of multiple values” is checked, each value will be separated by |, for example: hello|world|2020, book|shoes|pen|eraser.
Tags fields can be edited in the “Custom Fields” tab via tag input field.

Tags field settings:

Tags field editor: