Show or hide extra fields in an order

Saved extra field title and value are visible in order details. This data will be displayed to merchant in store Control Panel. It is possible to customize the position of this information with orderDetailsDisplaySection field.

Possible values for it include:

  • shipping_info
  • billing_info
  • customer_info
  • order_comments

If you want to hide the extra field in Control Panel, use this value instead:

  • hidden
// Initialize order fields 
window.ec = window.ec || {};
ec.order = ec.order || {};
ec.order.extraFields = ec.order.extraFields || {};

// Add new text field to order comments section at checkout
ec.order.extraFields.how_you_found_us = {
    'title': 'How did you find us?',
    'textPlaceholder': 'Describe here please!',
    'type': 'text',
    'required': false,
    'checkoutDisplaySection': 'payment_details', // show new field in order comments block
    'orderDetailsDisplaySection': 'order_comments' // show saved data in order comments block in order details to merchant and customer
};

window.Ecwid && Ecwid.refreshConfig();

Extra field display requirements

Extra fields will only be shown in order details to customer and store admin if these conditions are met:

  • title is not empty
  • value is not empty
  • orderDetailsDisplaySection is empty or contains one of the following values: shipping_info, billing_info, customer_info, order_comments

📘

If 'orderDetailsDisplaySection' contains an unsupported value, the extra field will still be saved to order, and shown in order details to customer and store admin.

Order extra fields in invoices and emails

Show all order extra fields set to be visible in order details (title and orderDisplaySection is specified). Editing invoices and email notifications

<#list order.extraFields as extraField>
    <#if extraField.title?has_content && extraField.orderDisplaySection?has_content>
        ${extraField.title}: ${extraField.value}
    </#if>
</#list>