Как с помощью JavaScript можно создать поле для дополнительных ингредиентов?

Для создания поля для дополнительных ингредиентов с помощью JavaScript можно использовать следующий код:

```html
<div id="ingredients">
  <label><input type="checkbox" name="ingredient" value="cheese"> Cheese</label>
  <label><input type="checkbox" name="ingredient" value="tomato"> Tomato</label>
  <label><input type="checkbox" name="ingredient" value="lettuce"> Lettuce</label>
</div>
```

Чтобы добавить выбранные ингредиенты в карточку товара на WordPress с использованием WooCommerce, а также обновлять их цену, можно использовать следующий код:

```javascript
jQuery(document).ready(function($){
  $('#ingredients input[type="checkbox"]').change(function(){
    var totalCost = parseFloat($('.price').text().replace('$', ''));
    
    $('#ingredients input[type="checkbox"]').each(function(){
      if($(this).is(':checked')){
        totalCost += 1.5; // увеличение цены на 1.5 за каждый выбранный ингредиент
      }
    });
    
    $('.price').text('$' + totalCost.toFixed(2)); // обновление цены
  });
  
  // Добавление выбранных ингредиентов в данные товара при оформлении заказа
  $('form.checkout').on('submit', function(){
    var ingredients = [];
    
    $('#ingredients input[type="checkbox"]:checked').each(function(){
      ingredients.push($(this).val());
    });
    
    $('input[name="ingredients"]').val(ingredients.join(', ')); // сохранение ингредиентов в скрытом поле формы
  });
});
```

Теперь, при выборе чекбоксов в поле для дополнительных ингредиентов, цена на товар будет увеличиваться, а выбранные данные будут отправляться вместе с товаром при оформлении заказа через форму на WordPress/ WooCommerce.