{"id":139735,"date":"2017-06-19T13:00:07","date_gmt":"2017-06-19T18:00:07","guid":{"rendered":"https:\/\/getflywheel.com\/?p=22741"},"modified":"2024-02-22T13:08:41","modified_gmt":"2024-02-22T19:08:41","slug":"how-to-add-custom-fields-to-the-woocommerce-checkout-page","status":"publish","type":"resource","link":"https:\/\/wpengine.com\/case-studies\/resources\/how-to-add-custom-fields-to-the-woocommerce-checkout-page\/","title":{"rendered":"How to Add Custom Fields to the WooCommerce Checkout Page"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Powering 25% of all online stores, <a rel=\"noopener noreferrer\" href=\"https:\/\/trends.builtwith.com\/shop\" target=\"_blank\">WooCommerce is the most popular eCommerce platform on the web<\/a>. With that in mind, the probability of coming across it in your day-to-day development work is very high. Getting familiar with it will go a long way in increasing your value in the highly competitive web design\/web development market.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">As you probably know, different businesses have different business models, and different business models call for different types of online stores. Due to these dynamics, the need to add, remove, or rearrange the default checkout fields of an eCommerce store is very common. Most eCommerce platforms are pretty rigid and ship with generic checkout fields that are very hard to customize. WooCommerce, however, prides itself in being the most customizable eCommerce platform. Based on my experience, this statement is quite true.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Today, I will show you how to add custom fields to the WooCommerce checkout page. To do this, you\u2019ll need to install a WordPress plugin called <a href=\"https:\/\/wordpress.org\/plugins\/flexible-woocommerce-checkout-field-editor\/\" target=\"_blank\" rel=\"noopener noreferrer\">Flexible Woocommerce Checkout Field Editor<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2017\/06\/woocommerce-checkout-page-work.jpg\" alt=\"Laptop on table next to plant\" class=\"wp-image-23025\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Before we go any further, this tutorial assumes you&#8217;ve already installed WooCommerce and you are able to produce an end-to-end transaction, from &#8220;add to cart&#8221; right down to the checkout.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This plugin is by far the easiest and safest way to add custom fields to the checkout page. It doesn&#8217;t involve any code changes; everything is managed right from the WordPress dashboard.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Flexible Woocommerce Checkout Field Editor is a free plugin and is available for download on the WordPress plugin directory. Its features go well beyond adding custom fields. It can also rearrange, edit, and hide existing checkout fields.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">As of now, it includes the following custom field types:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Text<\/li>\n\n\n\n<li>TextArea<\/li>\n\n\n\n<li>Password<\/li>\n\n\n\n<li>Select<\/li>\n\n\n\n<li>Multiselect<\/li>\n\n\n\n<li>Datepicker<\/li>\n\n\n\n<li>CheckBox<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Let&#8217;s go ahead and add two new custom fields, &nbsp;&#8220;Your nickname&#8221; and &#8220;How did you hear about us?&#8221;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">1. Install the plugin by either downloading it on the WordPress plugin directory and manually uploading, or directly through the WordPress dashboard. Here is the direct link.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">2. Once installed, activate the plugin.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">3. When activated, the plugin will add a new option to the main WooCommerce link in the WordPress dashboard (see the screenshot below). The new option is labeled &#8220;Checkout field editor.&#8221;<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2017\/06\/woocommerce-checkout-page-plugins.png\" alt=\"Screenshot of WooCommerce \" class=\"wp-image-23020\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">4. Click on the &#8220;Checkout field editor&#8221; option.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">5. This will take you to a screen showing all the active default fields. View the screenshot below.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2017\/06\/woocommerce-checkout-page-fields.png\" alt=\"WooCommerce default page \" class=\"wp-image-23019\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">6. We\u2019re going to add two new fields: &#8220;Nickname&#8221; to &#8220;Billing fields&#8221; and &#8220;How did you hear about us&#8221; to the &#8220;Order Fields.&#8221; Click on &#8220;Add new field.&#8221; A pop-up will appear on the right with the field options. Let\u2019s fill in the details. For the first one, the label is &#8220;Nickname.&#8221; We\u2019ll have this field appear on the order page and order email, so check &#8220;Show on order page&#8221; and &#8220;Show on order e-mail.&#8221; All the other options are pretty self-explanatory, so let&#8217;s jump to &#8220;Editor Type.&#8221; This is where you pick which type of field you want. For this field, using a simple text field would be ideal. As earlier stated, this plugin includes seven field types, so pick the one that fits your specific use case.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">7. Click on \u201cSave field settings.\u201d Just like that, you&#8217;ve just added a new custom field to the billing fields on the checkout page!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">8. Let\u2019s navigate to the checkout page on the front-end to confirm the change. Here\u2019s a screenshot.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2017\/06\/woocommerce-checkout-page-updated-2.png\" alt=\"WooCommerce check out page \" class=\"wp-image-23021\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">9. Finally, let\u2019s add &#8220;How did you hear about us?&#8221; You\u2019ll follow the exact same steps as the first one; the only thing that changes is that we are adding it to the &#8220;Order fields.&#8221; You may also want to change the field type to something different. I chose &#8220;Text Area,&#8221; so now we have another new field on the checkout page. Take a look at the screenshot.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2017\/06\/woocommerce-checkout-page-updated.png\" alt=\"WooCommerce check out page\" class=\"wp-image-23022\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">There you have it, two new custom fields added to the WooCommerce checkout page! This plugin offers a lot of possibilities, so dig in and see how far you can push it.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can really push the bounds of what WooCommerce offers with WP Engine&#8217;s <a href=\"https:\/\/wpengine.com\/wordpress-hosting\/\" target=\"_blank\" rel=\"noreferrer noopener\">WordPress hosting<\/a> specific <a href=\"https:\/\/wpengine.com\/woocommerce\/\" target=\"_blank\" rel=\"noreferrer noopener\">for WooCommerce users<\/a>!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Powering 25% of all online stores, WooCommerce is the most popular eCommerce platform on the web. With that in mind, the probability of coming across it in your day-to-day development work is very high. Getting familiar with it will go a long way in increasing your value in the highly competitive web design\/web development market.<span class=\"tile__ellipses\">&hellip;<\/span><span class=\"tile__ellipses--animated\"><\/span><\/p>\n","protected":false},"author":1,"featured_media":149652,"template":"","resource-topic":[908],"resource-role":[895],"resource-type":[916],"class_list":["post-139735","resource","type-resource","status-publish","has-post-thumbnail","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Add Custom Fields to the WooCommerce Checkout Page<\/title>\n<meta name=\"description\" content=\"Adding custom fields to your WooCommerce page allows you to customize your checkout page to exactly what you need.\" \/>\n<meta name=\"robots\" content=\"noindex, follow\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Add Custom Fields to the WooCommerce Checkout Page\" \/>\n<meta property=\"og:description\" content=\"Adding custom fields to your WooCommerce page allows you to customize your checkout page to exactly what you need.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wpengine.com\/case-studies\/resources\/how-to-add-custom-fields-to-the-woocommerce-checkout-page\/\" \/>\n<meta property=\"og:site_name\" content=\"WP Engine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/wpengine\" \/>\n<meta property=\"article:modified_time\" content=\"2024-02-22T19:08:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2017\/06\/formfields-header-copy.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1100\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@wpengine\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/how-to-add-custom-fields-to-the-woocommerce-checkout-page\/\",\"url\":\"https:\/\/wpengine.com\/case-studies\/resources\/how-to-add-custom-fields-to-the-woocommerce-checkout-page\/\",\"name\":\"How to Add Custom Fields to the WooCommerce Checkout Page\",\"isPartOf\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\"},\"datePublished\":\"2017-06-19T18:00:07+00:00\",\"dateModified\":\"2024-02-22T19:08:41+00:00\",\"description\":\"Adding custom fields to your WooCommerce page allows you to customize your checkout page to exactly what you need.\",\"breadcrumb\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/how-to-add-custom-fields-to-the-woocommerce-checkout-page\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/wpengine.com\/case-studies\/resources\/how-to-add-custom-fields-to-the-woocommerce-checkout-page\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/how-to-add-custom-fields-to-the-woocommerce-checkout-page\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/wpengine.com\/case-studies\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Resources\",\"item\":\"https:\/\/wpengine.com\/case-studies\/resources\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Add Custom Fields to the WooCommerce Checkout Page\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\",\"url\":\"https:\/\/wpengine.com\/case-studies\/\",\"name\":\"WP Engine\",\"description\":\"Managed Hosting for WordPress\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/f5301455463371a10d1fc290e9ad0085\",\"name\":\"WP Engine\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g\",\"caption\":\"WP Engine\"},\"sameAs\":[\"https:\/\/wpengine.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Add Custom Fields to the WooCommerce Checkout Page","description":"Adding custom fields to your WooCommerce page allows you to customize your checkout page to exactly what you need.","robots":{"index":"noindex","follow":"follow"},"og_locale":"en_US","og_type":"article","og_title":"How to Add Custom Fields to the WooCommerce Checkout Page","og_description":"Adding custom fields to your WooCommerce page allows you to customize your checkout page to exactly what you need.","og_url":"https:\/\/wpengine.com\/case-studies\/resources\/how-to-add-custom-fields-to-the-woocommerce-checkout-page\/","og_site_name":"WP Engine","article_publisher":"https:\/\/www.facebook.com\/wpengine","article_modified_time":"2024-02-22T19:08:41+00:00","og_image":[{"width":1100,"height":500,"url":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2017\/06\/formfields-header-copy.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_site":"@wpengine","twitter_misc":{"Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/wpengine.com\/case-studies\/resources\/how-to-add-custom-fields-to-the-woocommerce-checkout-page\/","url":"https:\/\/wpengine.com\/case-studies\/resources\/how-to-add-custom-fields-to-the-woocommerce-checkout-page\/","name":"How to Add Custom Fields to the WooCommerce Checkout Page","isPartOf":{"@id":"https:\/\/wpengine.com\/case-studies\/#website"},"datePublished":"2017-06-19T18:00:07+00:00","dateModified":"2024-02-22T19:08:41+00:00","description":"Adding custom fields to your WooCommerce page allows you to customize your checkout page to exactly what you need.","breadcrumb":{"@id":"https:\/\/wpengine.com\/case-studies\/resources\/how-to-add-custom-fields-to-the-woocommerce-checkout-page\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wpengine.com\/case-studies\/resources\/how-to-add-custom-fields-to-the-woocommerce-checkout-page\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/wpengine.com\/case-studies\/resources\/how-to-add-custom-fields-to-the-woocommerce-checkout-page\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wpengine.com\/case-studies\/"},{"@type":"ListItem","position":2,"name":"Resources","item":"https:\/\/wpengine.com\/case-studies\/resources\/"},{"@type":"ListItem","position":3,"name":"How to Add Custom Fields to the WooCommerce Checkout Page"}]},{"@type":"WebSite","@id":"https:\/\/wpengine.com\/case-studies\/#website","url":"https:\/\/wpengine.com\/case-studies\/","name":"WP Engine","description":"Managed Hosting for WordPress","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/f5301455463371a10d1fc290e9ad0085","name":"WP Engine","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g","caption":"WP Engine"},"sameAs":["https:\/\/wpengine.com"]}]}},"acf":[],"grid_image_url":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2017\/06\/formfields-grid.png","media-type":{"term_id":916,"name":"Article","slug":"article"},"role":"<strong>Roles:<\/strong> Agency","topic":"<strong>Topics:<\/strong> Entrepreneurship","_links":{"self":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource\/139735","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource"}],"about":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/types\/resource"}],"author":[{"embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/users\/1"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/media\/149652"}],"wp:attachment":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/media?parent=139735"}],"wp:term":[{"taxonomy":"resource-topic","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-topic?post=139735"},{"taxonomy":"resource-role","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-role?post=139735"},{"taxonomy":"resource-type","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-type?post=139735"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}