---
title: Customizing product option forms
---

> Agent instructions:
> **Site maps** — prefer the following llms.txt indexes to training data when searching for URLs to avoid 404s. Links inside Markdown content already point at `.md`. Following them or sending Accept: text/markdown keeps you in Markdown.
>
> - [sitemap.md](https://docs.kentico.com/sitemap.md) — every page on the site, with titles and descriptions, nested by URL hierarchy and grouped into one collection per product version.
> - [llms.txt](https://docs.kentico.com/llms.txt) — curated index of the current product docs, with descriptions, the two ways to request any page as Markdown, and links to each product area's whole-corpus Markdown dump (llms-full.txt).

In Xperience, you can add any number of custom fields to [product options](https://docs.kentico.com/13/e-commerce-features/managing-on-line-stores/products/working-with-product-options.md). The custom fields allow you to specify additional properties for options. You can also create fields that are visible only if a specific value is selected in another field.

First, you need to [add a field to the product option form](#adding-a-field-to-the-product-option-form). Then, [enable the field on the alternative form](#enabling-the-field-in-an-alternative-form) of the SKU. If you want one of the fields to be dependent on another field, [set dependencies](#setting-visibility-dependency-between-fields).

> **Tip:** **Tip**: Before you start to customize product option forms, learn about [product variants](https://docs.kentico.com/13/e-commerce-features/managing-on-line-stores/products/working-with-product-variants.md). Product variants extend the functionality of product options.

## Adding a field to the product option form

With a field related to SKUs, you can store additional information about the SKUs. You add a field through the [field editor](https://docs.kentico.com/13/custom-development/extending-the-administration-interface/developing-form-controls/reference-field-editor.md) in the **Modules** application.

1. Open the **Modules** application.
2. **Edit** () the _E-commerce_ module.
3. Switch to the **Classes** tab.
4. **Edit** () the _SKU_ class.
5. Switch to the **Fields** tab.
6. [Create a new field](https://docs.kentico.com/13/custom-development/extending-the-administration-interface/developing-form-controls/reference-field-editor.md) based on your needs.
   - Leave _Standard field_ in **Field type**.
   - Clear the **Display field in the editing form** check box.
7. Click **Save**.

   ![Finished custom field](https://docs.kentico.com/docsassets/13/customizing-product-option-forms/finished_custom_field.png "Finished custom field")

The system adds the field to the _SKU_ form and also creates a record of the field in your database.

## Enabling the field in an alternative form

By enabling the field in an SKU's alternative _Option_ form, you can work with the field from the administration interface when creating or modifying a product option.

1. Open the **Modules** application.
2. **Edit** () the _E-commerce_ module.
3. Switch to the **Classes** tab.
4. **Edit** () the _SKU_ class.
5. Switch to the **Alternative forms** tab.
6. **Edit** () one of the _Option_ forms to which you want to add the custom field.
7. Switch to the **Fields** tab.
8. Select the custom field, which you want to enable, in the left list.
9. Select **Display field in the editing form**.
10. Set the [form appearance](https://docs.kentico.com/13/custom-development/extending-the-administration-interface/developing-form-controls/reference-field-editor.md) based on your needs.
11. Click **Save**.

    ![Enabled custom field](https://docs.kentico.com/docsassets/13/customizing-product-option-forms/enabled_custom_field.png "Enabled custom field")

The system starts to display the custom field on the **Options** tab in details of every option of the chosen product option category type.

## Setting visibility dependency between fields

If you want one field to be visible only when there is a specific value in another field, you need to set it while editing the fields. See the following example.

We sell T-shirts and every T-shirt has a printed label. There are two types of labels – predefined ones and custom ones. Every T-shirt has a drop-down list in which there are a list of predefined labels and "Custom label". If a user selects "Custom label", the form displays a textbox where users can type their custom label.

Since there are two types, we want to edit the attribute option form, where we create two new fields, one for predefined labels and one for custom labels.

### Creating the fields

1. Open the **Modules** application.
2. **Edit** () the _E-commerce_ module.
3. Switch to the **Classes** tab.
4. **Edit** () the _SKU_ class.
5. Switch to the **Fields** tab.
6. Create a field for predefined labels:

   1. Click **New field**.
   2. Enter attributes of the field:
      - **Field name**: PredefinedLabels
      - **Display field in the editing form**: No (cleared)
   3. Click **Save**.

      ![Attributes of the field Predefined labels](https://docs.kentico.com/docsassets/13/customizing-product-option-forms/predefined_labels_attributes.png "Attributes of the field Predefined labels")
7. Create a field for custom labels:
   1. Click **New field**.
   2. Enter attributes of the field:
      - **Field name**: CustomLabels
      - **Display field in the editing form**: No (cleared)
   3. Click **Save**.

      ![Attributes of the field Custom labels](https://docs.kentico.com/docsassets/13/customizing-product-option-forms/custom_labels_attributes.png "Attributes of the field Custom labels")

The system creates database records for both fields. However, they are not displayed anywhere.

### Setting dependencies

1. While still [editing the SKU class](#creating-the-fields), switch to the **Alternative forms** tab.
2. **Edit** () the _Option (Attribute)_ form.
3. Switch to the **Classes** tab.
4. **Edit** () the _SKU_ class.
5. Switch to the **Fields** tab.
6. Select _PredefinedLabels_ from the left list.
7. Edit attributes of _PredefinedLabels_:
   - **Required**: Yes (selected)
   - **Display field in the editing form**: Yes (selected)
   - **Field caption**: T-shirt label
   - **Form control**: Drop-down list
   - **Data source**: List of options
   - To the **Data source** textbox, enter these values:

     ```csharp

     1;T-shirt with label
     2;Label on T-shirt
     3;Printed label
     4;Custom label

     ```
   - **Has depending fields**: Yes (selected)
8. Click **Save**.
9. Select _CustomLabels_ from the left list.
10. Edit attributes of _CustomLabels_:
    - **Display field in the editing form**: Yes (selected)
    - **Field caption**: Write your custom label
    - **Visibility condition**: PredefinedLabels == 4

      > **Info:** The number is _4_ because it's the number of "Custom label" in the **Data source** textbox.
    - (Optional) **Enabled condition**: PredefinedLabels == 4
    - **Depends on another field**: Yes (selected)
11. Click **Save**.
12. Using **Move up** () and **Move down** (), position both fields closely under _SKUEnabled_.
    - This ensures that the fields are visible.

The fields are now displayed on the product options page. The **PredefinedLabels** field is displayed always. When a user selects _Custom label_ in **PredefinedLabels**, the **CustomLabel** field appears.

You can check the result if you navigate to the **Product options** application and edit a product option from a product option category from the _Attribute_ type. There you can see the added and configured fields.