{"id":1094,"date":"2025-11-10T00:32:15","date_gmt":"2025-11-09T18:32:15","guid":{"rendered":"https:\/\/wordpress.aimahdi.com\/?p=1094"},"modified":"2025-11-10T00:32:15","modified_gmt":"2025-11-09T18:32:15","slug":"how-to-add-and-manage-custom-fields-on-the-fluentcart-checkout-page","status":"publish","type":"post","link":"https:\/\/aimahdi.com\/blog\/how-to-add-and-manage-custom-fields-on-the-fluentcart-checkout-page\/","title":{"rendered":"How to Add and Manage Custom Fields on the FluentCart Checkout Page"},"content":{"rendered":"\n<p>If you run an eCommerce store, you might often need to collect extra information from your customers during checkout. Most eCommerce plugins \u2014 including <strong>FluentCart<\/strong> \u2014 already let you capture essential details such as billing and shipping addresses, company name, or VAT ID.<\/p>\n\n\n\n<p>However, depending on your business requirements, you might need to add <strong>custom checkout fields<\/strong> to collect additional data \u2014 such as delivery instructions, gift messages, or account preferences.<\/p>\n\n\n\n<p>In this tutorial, you\u2019ll learn how to:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Add a custom field before the payment section using a FluentCart hook<\/li>\n\n\n\n<li>Validate the field data before order submission<\/li>\n\n\n\n<li>Save the field data into the database<\/li>\n\n\n\n<li>Display the custom information in the customer details page<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Add a Custom Field Before the Payment Section<\/h3>\n\n\n\n<p>FluentCart provides several action hooks that allow developers to inject custom HTML or fields within the checkout form.<\/p>\n\n\n\n<p>To insert a field <strong>before the payment section<\/strong>, use the <code>fluentcart\/checkout\/before_payment_fields<\/code> action:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"php\" data-enlighter-theme=\"classic\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">add_action('fluent_cart\/before_payment_methods', function($args) {\n    $termsText = 'Yes, I\\'d like to receive emails with exclusive offers and updates.';\n\n    ?>\n    \n    &lt;div class=\"fct_checkout_marketing_opt_in\" role=\"group\" aria-labelledby=\"marketing_opt_in_label\">\n        &lt;label for=\"marketing_opt_in\" class=\"fct_input_label fct_input_label_checkbox\">\n            &lt;input\n                data-fluent-cart-marketing-opt-in=\"yes\"\n                type=\"checkbox\"\n                class=\"fct-input fct-input-checkbox\"\n                id=\"marketing_opt_in\"\n                name=\"marketing_opt_in\"\n                value=\"yes\"\n                aria-label=\"&lt;?php echo esc_attr($termsText); ?>\"\n            >\n\n            &lt;?php echo wp_kses_post($termsText); ?>\n        &lt;\/label>\n    &lt;\/div>\n\n    &lt;?php\n   \n}, 10, 1);<\/pre>\n\n\n\n<p>This will display a checkbox before the payment fields<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"878\" src=\"https:\/\/wordpress.aimahdi.com\/wp-content\/uploads\/2025\/11\/image-1-1024x878.jpg\" alt=\"\" class=\"wp-image-1109\" srcset=\"https:\/\/aimahdi.com\/blog\/wp-content\/uploads\/2025\/11\/image-1-1024x878.jpg 1024w, https:\/\/aimahdi.com\/blog\/wp-content\/uploads\/2025\/11\/image-1-300x257.jpg 300w, https:\/\/aimahdi.com\/blog\/wp-content\/uploads\/2025\/11\/image-1-768x658.jpg 768w, https:\/\/aimahdi.com\/blog\/wp-content\/uploads\/2025\/11\/image-1-1536x1317.jpg 1536w, https:\/\/aimahdi.com\/blog\/wp-content\/uploads\/2025\/11\/image-1.jpg 1680w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>You can replace the field with any field, kindly note that the name attribute <code>marketing_note<\/code> or anything you provide as name attribute will be used as reference to this field during validation.<\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Validate the Field Data<\/h3>\n\n\n\n<p>You can easily validate checkout inputs using the <code>fluent_cart\/checkout\/validate_data<\/code> filter.<br>Let\u2019s make sure our custom field&#8217;s value isn\u2019t empty so that it becomes a required field<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"php\" data-enlighter-theme=\"classic\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">add_filter('fluent_cart\/checkout\/validate_data', function($errors, $args){\n    if(empty($args['data']['marketing_opt_in'])){\n        $errors['marketing_opt_in']['required'] = __('Marketing Opt-in is required', 'fluent-cart');\n    }\n\n    return $errors;\n}, 10, 2);<\/pre>\n\n\n\n<p>The validation message will appear in the top right corner of the page along with other validation error<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"370\" src=\"https:\/\/wordpress.aimahdi.com\/wp-content\/uploads\/2025\/11\/image-1024x370.png\" alt=\"\" class=\"wp-image-1111\" srcset=\"https:\/\/aimahdi.com\/blog\/wp-content\/uploads\/2025\/11\/image-1024x370.png 1024w, https:\/\/aimahdi.com\/blog\/wp-content\/uploads\/2025\/11\/image-300x108.png 300w, https:\/\/aimahdi.com\/blog\/wp-content\/uploads\/2025\/11\/image-768x278.png 768w, https:\/\/aimahdi.com\/blog\/wp-content\/uploads\/2025\/11\/image-1536x555.png 1536w, https:\/\/aimahdi.com\/blog\/wp-content\/uploads\/2025\/11\/image.png 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 3: Save the Custom Field Data to Database<\/h3>\n\n\n\n<p>After a successful checkout, use the <code>fluent_cart\/checkout\/prepare_other_data<\/code> action to save the field value as <strong>customer metadata<\/strong>.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"php\" data-enlighter-theme=\"classic\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">add_action('fluent_cart\/checkout\/prepare_other_data', function($args){\n    $customer = $args['order']->customer;\n    $data = $args['validated_data']['marketing_opt_in'];\n    $customer->updateMeta('marketing_opt_in', $data);\n}, 10, 1); <\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Step 4: Display the Custom Field in Customer Details<\/h3>\n\n\n\n<p>To show the field on the <strong>customer profile page<\/strong>, use the hook <code>fluent_cart\/widgets\/single_customer<\/code><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"php\" data-enlighter-theme=\"classic\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">use \\FluentCart\\App\\Models\\Customer;\nadd_filter('fluent_cart\/widgets\/customer', function ($widgets, $data) {\n    \n    $customerId = $data['customer_id'];\n    \n    $customer = Customer::query()->find($customerId);\n\n    $marketingOptInStatus = $customer->getMeta('marketing_opt_in');\n\n    $termsText = __('Yes, I\\'d like to receive emails with exclusive offers and updates.', 'fluent-cart');\n\n    $isChecked = $marketingOptInStatus === 'yes';\n\n    $content = sprintf(\n        '&lt;div style=\"border:1px solid #e5e7eb;border-radius:8px;padding:12px;background:#fff;margin-top:8px;\">\n            &lt;div style=\"font-weight:600;margin-bottom:4px;\">%s&lt;\/div>\n            &lt;div class=\"fct_checkout_marketing_opt_in\" role=\"group\" aria-labelledby=\"marketing_opt_in_label\">\n                &lt;label for=\"marketing_opt_in_profile\" class=\"fct_input_label fct_input_label_checkbox\">\n                    &lt;input\n                        data-fluent-cart-marketing-opt-in=\"yes\"\n                        type=\"checkbox\"\n                        class=\"fct-input fct-input-checkbox\"\n                        id=\"marketing_opt_in_profile\"\n                        name=\"marketing_opt_in\"\n                        value=\"yes\"\n                        %s\n                        disabled\n                        aria-label=\"%s\"\n                    >\n                    %s\n                &lt;\/label>\n            &lt;\/div>\n        &lt;\/div>',\n        esc_html__('Marketing Opt\u2011in', 'fluent-cart'),\n        $isChecked ? 'checked' : '',\n        esc_attr($termsText),\n        wp_kses_post($termsText)\n    );\n\n    $widgets[] = [\n        'title'     => __('Marketing Opt\u2011in', 'fluent-cart'),\n        'sub_title' => __('From Customer Meta', 'fluent-cart'),\n        'type'      => 'html',\n        'content'   => $content\n    ];\n\n    return $widgets;\n}, 10, 2);<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Conclusion<\/h3>\n\n\n\n<p>Adding custom fields to the FluentCart checkout page is straightforward and highly flexible.<br>With just a few hooks, you can collect, validate, and display extra customer information without touching core files.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you run an eCommerce store, you might often need to collect extra information from your customers during checkout. Most eCommerce plugins \u2014 including FluentCart \u2014\u2026<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1094","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/aimahdi.com\/blog\/wp-json\/wp\/v2\/posts\/1094","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/aimahdi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/aimahdi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/aimahdi.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/aimahdi.com\/blog\/wp-json\/wp\/v2\/comments?post=1094"}],"version-history":[{"count":20,"href":"https:\/\/aimahdi.com\/blog\/wp-json\/wp\/v2\/posts\/1094\/revisions"}],"predecessor-version":[{"id":1122,"href":"https:\/\/aimahdi.com\/blog\/wp-json\/wp\/v2\/posts\/1094\/revisions\/1122"}],"wp:attachment":[{"href":"https:\/\/aimahdi.com\/blog\/wp-json\/wp\/v2\/media?parent=1094"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/aimahdi.com\/blog\/wp-json\/wp\/v2\/categories?post=1094"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/aimahdi.com\/blog\/wp-json\/wp\/v2\/tags?post=1094"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}