How to add input field in catalog.element template?

Question

1C-Bitrix

Good afternoon! Urgently need the help of Bitrix experts.
There is a catalog element template (catalog.element), which contains a description of the product, the ability to select a size, color, and an add to cart button.
Here is a part of the code from the template, in which the available sizes (xs/s/m, etc.) are displayed in a list (property type is a list):

if ($arProp['CODE'] == 'SIZES_CLOTHES') { ?>
              <span class="product-info__paragraph L">
                <b>Размеры:</b>
                </span>
              <div class="w100 L product-info--sizeBox">
                <ul id="<? echo $arItemIDs['PROP'] . $arProp['ID']; ?>_list">
                  <?
                  foreach ($arProp['VALUES'] as $arOneValue) {
                    if($arOneValue['ID'] == 0) continue;
                    $arOneValue['NAME'] = htmlspecialcharsbx($arOneValue['NAME']);
                    ?>
                    <li
                      data-treevalue="<? echo $arProp['ID'] . '_' . $arOneValue['ID']; ?>"
                      data-onevalue="<? echo $arOneValue['ID']; ?>">
                      <span class="product-info--size instock L transition"
                            title="<? echo $arOneValue['NAME']; ?>"><? echo $arOneValue['NAME']; ?></span>
                    </li>
                    <?
                  }
                  ?>
                </ul>
              </div>
            <? }

Here is the color choice:

if ($arProp['CODE'] == 'COLOR_REF') {?>
              <span class="product-info__paragraph L pad-top10 long_prop_name">
                    <b>Цвета:</b>
                    </span>
              <div class="w100 L product-info--colorBox"
                   id="<? echo $arItemIDs['PROP'] . $arProp['ID']; ?>_cont">
                <ul id="<? echo $arItemIDs['PROP'] . $arProp['ID']; ?>_list fix_color_list"

                >
                  <?
                  foreach ($arProp['VALUES'] as $arOneValue) {
                    if($arOneValue['ID'] == 0) continue;
                    $colorParam = explode('|', $arOneValue['NAME']);
                    ?>
                    <li
                      data-treevalue="<? echo $arProp['ID'] . '_' . $arOneValue['ID']; ?>"
                      data-onevalue="<? echo $arOneValue['ID']; ?>">
                        <span class="product-info--color L transition"
                              style="background-color:#<?=$colorParam[1];?>"
                              title="<? echo $colorParam[0]; ?>">
                        &nbsp; </span>
                    </li>
                    <?
                  }
                  ?>
                </ul>
              </div>
            <?}?>

And now the crux of the matter: some products have appeared for which you need to add input fields "Your height", "Sleeve length", etc.
These fields should be inputs for input.
I have already added new properties (such as "number") to trade offers.
And now I don't understand how to put these properties into the template and make them work...
Please help

Answer 1

Does the user have to enter values ​​himself or choose from existing ones (preferred option)?
If existing in the component settings, you need to specify which properties to transfer to the basket. On the page, you need to make a select with these options.
If the user enters it himself, then you need to customize the addition of the product to transfer the input to the basket