Custom product fields

The custom fields extension allows you to create individual data fields for your products, add different data to them for each product, and display or use that data on the product page on your website.

For example, you may want to use the system to display a specification table on your product pages.

This would be done by creating a custom field for each specification type, like 'Colour' or 'Screen Size Diagonal' and then entering the appropriate data for each product.

You would then edit the product.twig file, using the page editor, to display the information.


Configuring custom fields

Once you've activated the extension, select 'settings' from the left menu and then 'products'.

At the bottom of the page you can use the 'custom fields' box to configure the custom fields.

In the Name field you need to enter the variable that you'd like to use when referencing the data in the field on the product.twig file. You should only use letters and the _ character here (no spaces).

In the Label field you can enter the label of the field, as it will display to you when adding/editing the product.

In the Type field you should select what type of data the field will contain. In our example above (the specification table) you would use 'Text Box'.

Depending on the Type selected, you may be able to configure the Allowed Values for the field. For example if you select 'Radio Buttons' then you'll be able to enter the available values (separating each with a comma).


Text Box A text string
Check Box Either a TRUE or FALSE option
Radio Button A list of available values
Drop Down List A list of available values
Date Picker Pick a date
Date & Time Picker Pick a date & time
Item List Enter a list of individual values
Product List Pick from a list of products

The below is an example of how your custom fields might look if configured correctly.


Entering data for custom fields

When adding/editing a product, scroll to the 'custom fields' section.

The fields for the products that you have created will be displayed in this section.

Enter your data into the fields and save the product.


Referencing the data for a product on your theme's files

Data that's attached to a product using custom fields is available on the product object.

You should use the format

product.custom_fields.X

Where X is the name you gave to the field when you created it, e.g.

product.custom_fields.screen_size

Where you have used the Check Box type, the variable will return TRUE if the box is ticked for the product.

Where you use the Item List type, the variable will return an array so you must modify your code accordingly, e.g.

{% for value in product.custom_fields.X %}
    {{ value }}
{% endfor %}

Or you can reference a specific element of the array, e.g. product.custom_fields.X[0] (0 is the first item in the array).

Where you have used the Product List type, this will also return an array which can then be used to output details about the selected product.

{% set product_id  = product.custom_fields.X[0] %}
{% set alternative_product = product(product_id) %}
{{ alternative_product.title }}

Another example,

{% for value in product.custom_fields.X %}
    {% set product_id  = value %}
    {% set alternative_product = product(product_id) %}
    {{ alternative_product.title }}
{% endfor %}

Where you have used the Date Picker or Date & Time Picker type, you can modify the output using Twig's Date Filter.