SwissUpLabs Logo
Home > Magento 2.x > Extensions > Checkout fields > Usage

Checkout Fields Usage Examples

Order Comment Field

To add order comment field on checkout, follow below steps:

  1. Go to Swissup > Checkout > Checkout Fields
  2. Press Add New Field button
  3. Fill Default Label
  4. Select Store View where to show the field
  5. In Catalog Input Type select Text Area
  6. If required, fill other optional properties, such as Values Required, Sort Order and Default Value
  7. Specify labels for other store views on Manage Labels tab if required
  8. Press Save Field button
  9. Go to checkout and check the field you created:

Order Comment Field

Add notice, tooltip, and placeholder for the field

You can specify a notice, tooltip, and placeholder for the field in the Advanced Field Properties section when creating or editing the field at Swissup > Checkout > Checkout Fields

Field Notice

Display Fields in Order Email

In order to display checkout fields in order emails, follow next steps:

  1. Go to Marketing > Communications > Email Templates
  2. Press Add New Template button
  3. Select template, for example New Order for Guest, and press Load Template button
  4. Give name for template in Template Name field

  5. In Template Content place the following code where you want to show checkout fields:

    {{block class="Swissup\CheckoutFields\Block\Order\View\Fields" area="frontend" template="Swissup_CheckoutFields::email/order/fields.phtml" order_id=$order_id}}

    if you want to display only specific fields, list comma-separated attribute codes in fields_to_show paramether:

    {{block class="Swissup\CheckoutFields\Block\Order\View\Fields" area="frontend" template="Swissup_CheckoutFields::email/order/fields.phtml" order_id=$order_id fields_to_show="order_comment,favourite_products,delivery_date"}}

    Note: before 1.6.17 these examples used Swissup\CheckoutFields\Block\Adminhtml\Order\View\Fields. That class still works, but Mage-OS 3.5.0 refuses to render blocks from a Block\Adminhtml\ namespace in email templates. See Email Templates and Mage-OS 3.5.0 below.

  6. Press Save Template button
  7. Go to Stores -> Configuration -> Sales > Sales Emails -> Order, select new template in New Order Confirmation Template for Guest and press Save Config
  8. Check order email with checkout fields:

Fields in Order Email

Email Templates and Mage-OS 3.5.0

Mage-OS 3.5.0 added a policy that stops email templates from rendering admin blocks. A {{block class="..."}} directive pointing at a class whose name contains \Block\Adminhtml\ renders an empty string — the checkout fields simply disappear from the email, with a warning written to the log and no error shown.

Since 1.6.17 the extension provides Swissup\CheckoutFields\Block\Order\View\Fields for this purpose. It renders exactly the same output as the old block and takes the same order_id and fields_to_show parameters, so switching over is a matter of replacing the class name:

{{block class="Swissup\CheckoutFields\Block\Order\View\Fields" area="frontend" template="Swissup_CheckoutFields::email/order/fields.phtml" order_id=$order_id}}

Email templates you already saved keep working after the update — the extension explicitly allows the old class — so this is a recommendation, not a required migration. Adobe Commerce and Magento Open Source are unaffected; they have no such policy.

Display Fields at Checkout Success Page

Use module Checkout Success Page module to get custom checkout fields at success page.

  1. Make sure Checkout Success page is enabled. Go to Stores > Configuration > Swissup Checkout > Success Page and check option ‘Enabled’ in ‘General’ section.
  2. Go to section ‘Page Layout’. Drag Checkout Fields block from ‘Blocks available on Success Page’ and drop at ‘Layout of Success Page’ in place where you want to see checkout fields.
  3. Save config or use ‘Save and Start Preview’ button to check how success page looks.

Display Fields in Orders Grid

To display checkout fields in orders grid, follow next steps:

  1. Go to Swissup > Checkout Fields, edit the field and set Add to Column Options to Yes.
  2. Go to Sales > Orders and select fields you want to display in Columns dropdown.

Get Fields Values in Orders API

Since 1.3.0 version checkout fields values can be accessed in API using orders and orders/{id} endpoints.

Orders API

Edit this Page