{"id":341,"date":"2025-04-10T03:50:06","date_gmt":"2025-04-10T03:50:06","guid":{"rendered":"https:\/\/easycommerce.dev\/docs\/?post_type=ek_doc&#038;p=341"},"modified":"2026-04-15T06:17:29","modified_gmt":"2026-04-15T06:17:29","slug":"checkout-editor","status":"publish","type":"easyhelp_doc","link":"https:\/\/easycommerce.dev\/docs\/addons\/checkout-editor\/","title":{"rendered":"Checkout Editor"},"content":{"rendered":"\n<p>To enhance your store\u2019s checkout experience, <strong>Checkout Editor<\/strong> allows you to add, customize, and manage fields on your <strong>EasyCommerce Checkout page<\/strong>.<\/p>\n\n\n\n<p>Here\u2019s the step-by-step video tutorial guide:<\/p>\n\n\n\n<iframe loading=\"lazy\" width=\"800\" height=\"400\" src=\"https:\/\/www.youtube.com\/embed\/51Zb2OltsnM?si=nZ0MJdtAmXTT_f3j\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1. Activate the Addon<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Log in to your WordPress dashboard.<\/li>\n\n\n\n<li>Go to <strong>EasyCommerce &gt; Addons<\/strong> section and click \u201c<strong>Enabled<\/strong>\u201d under the Checkout Editor addon.<\/li>\n<\/ul>\n\n\n\n<p>To learn more about addons activation, read this documentation on&nbsp;<a href=\"https:\/\/easycommerce.dev\/docs\/addons\/install-and-activate-addons\/\" target=\"_blank\" rel=\"noreferrer noopener\">how to activate addon on EasyCommerce<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1004\" height=\"362\" src=\"https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/04\/EasyCommerce-\u2039-Easytest-\u2014-WordPress-11-26-2025_03_49_PM.png\" alt=\"\" class=\"wp-image-1001\" srcset=\"https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/04\/EasyCommerce-\u2039-Easytest-\u2014-WordPress-11-26-2025_03_49_PM.png 1004w, https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/04\/EasyCommerce-\u2039-Easytest-\u2014-WordPress-11-26-2025_03_49_PM-300x108.png 300w, https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/04\/EasyCommerce-\u2039-Easytest-\u2014-WordPress-11-26-2025_03_49_PM-768x277.png 768w\" sizes=\"auto, (max-width: 1004px) 100vw, 1004px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Access the Checkout Editor<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Navigate to <strong>Store &gt; Checkout Editor<\/strong>.<\/li>\n\n\n\n<li>You\u2019ll see a list of all existing Checkout Fields.<\/li>\n\n\n\n<li>You can change their sequence by drag and dropping. <br><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"541\" src=\"https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/04\/Checkout-Editor-all-checkout-fileds-1024x541.png\" alt=\"\" class=\"wp-image-343\" srcset=\"https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/04\/Checkout-Editor-all-checkout-fileds-1024x541.png 1024w, https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/04\/Checkout-Editor-all-checkout-fileds-300x159.png 300w, https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/04\/Checkout-Editor-all-checkout-fileds-768x406.png 768w, https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/04\/Checkout-Editor-all-checkout-fileds-1536x812.png 1536w, https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/04\/Checkout-Editor-all-checkout-fileds.png 1902w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 3: Add a Custom Field<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Click \u201c<strong>Add Custom Field.<\/strong>\u201d<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"574\" src=\"https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/04\/Checkout-Editor-add-custom-fields-1-1024x574.png\" alt=\"\" class=\"wp-image-345\" srcset=\"https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/04\/Checkout-Editor-add-custom-fields-1-1024x574.png 1024w, https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/04\/Checkout-Editor-add-custom-fields-1-300x168.png 300w, https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/04\/Checkout-Editor-add-custom-fields-1-768x431.png 768w, https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/04\/Checkout-Editor-add-custom-fields-1-1536x862.png 1536w, https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/04\/Checkout-Editor-add-custom-fields-1.png 1904w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Select your <strong>Field Type<\/strong> from the available options:<\/li>\n<\/ul>\n\n\n\n<p><strong>&#8211; Text<br>&#8211; Number<br>&#8211; Email<br>&#8211; Select (Dropdown)<br>&#8211; Date<br>&#8211; Time<br>&#8211; Radio Button<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Fill in the necessary details:<\/li>\n<\/ul>\n\n\n\n<p>&#8211;&nbsp;<strong>Label<\/strong> \u2013 The name that appears on the checkout page.<br>&#8211;&nbsp;<strong>Name<\/strong> \u2013 The internal identifier for the field.<br>&#8211; <strong>Placeholder<\/strong> \u2013 Optional placeholder text inside the input.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Configure the options:<\/li>\n<\/ul>\n\n\n\n<p>&#8211; <strong>Required<\/strong> \u2013 Make the field mandatory (toggle on\/off).<br>&#8211; <strong>Enabled<\/strong> \u2013 Activate or deactivate the field.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Click \u201c<strong>Save<\/strong>\u201d or \u201c<strong>Close<\/strong>\u201d to apply your changes.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"455\" src=\"https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/04\/Checkout-Editor-custom-fields-info-1-1024x455.png\" alt=\"\" class=\"wp-image-347\" srcset=\"https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/04\/Checkout-Editor-custom-fields-info-1-1024x455.png 1024w, https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/04\/Checkout-Editor-custom-fields-info-1-300x133.png 300w, https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/04\/Checkout-Editor-custom-fields-info-1-768x341.png 768w, https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/04\/Checkout-Editor-custom-fields-info-1-1536x683.png 1536w, https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/04\/Checkout-Editor-custom-fields-info-1.png 1896w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 4: Rearrange Fields and Save<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Drag and Drop:<\/strong> Move fields to reorganize them as needed.<\/li>\n\n\n\n<li>Click &#8220;<strong>Save Fields<\/strong>&#8221; to Apply your changes.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"575\" src=\"https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/04\/Checkout-Editor-save-fileds-1024x575.png\" alt=\"\" class=\"wp-image-349\" srcset=\"https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/04\/Checkout-Editor-save-fileds-1024x575.png 1024w, https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/04\/Checkout-Editor-save-fileds-300x168.png 300w, https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/04\/Checkout-Editor-save-fileds-768x431.png 768w, https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/04\/Checkout-Editor-save-fileds-1536x862.png 1536w, https:\/\/easycommerce.dev\/docs\/wp-content\/uploads\/2025\/04\/Checkout-Editor-save-fileds.png 1907w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 5: Preview on the Checkout Page<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Visit your store\u2019s <strong>Checkout Page<\/strong>.<\/li>\n\n\n\n<li>You\u2019ll now see the <strong>new custom field<\/strong> displayed.<\/li>\n<\/ul>\n\n\n\n<p>After the order is placed, customers can view their custom field information on the <strong>Thank You page<\/strong> and in the <strong>Order Dashboard<\/strong>.<\/p>\n\n\n\n<p>Once you are happy with the setup, you&#8217;re all set to provide a customized and optimized checkout experience to your customers!<\/p>\n","protected":false},"author":5,"featured_media":0,"template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}}},"easyhelp_product":[19],"easyhelp_topic":[21],"class_list":["post-341","easyhelp_doc","type-easyhelp_doc","status-publish","hentry","easyhelp_product-easycommerce","easyhelp_topic-addons"],"_links":{"self":[{"href":"https:\/\/easycommerce.dev\/docs\/wp-json\/wp\/v2\/easyhelp_doc\/341","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/easycommerce.dev\/docs\/wp-json\/wp\/v2\/easyhelp_doc"}],"about":[{"href":"https:\/\/easycommerce.dev\/docs\/wp-json\/wp\/v2\/types\/easyhelp_doc"}],"author":[{"embeddable":true,"href":"https:\/\/easycommerce.dev\/docs\/wp-json\/wp\/v2\/users\/5"}],"wp:attachment":[{"href":"https:\/\/easycommerce.dev\/docs\/wp-json\/wp\/v2\/media?parent=341"}],"wp:term":[{"taxonomy":"easyhelp_product","embeddable":true,"href":"https:\/\/easycommerce.dev\/docs\/wp-json\/wp\/v2\/easyhelp_product?post=341"},{"taxonomy":"easyhelp_topic","embeddable":true,"href":"https:\/\/easycommerce.dev\/docs\/wp-json\/wp\/v2\/easyhelp_topic?post=341"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}