FluentCart already includes a terms and conditions checkbox, but sometimes you may need an additional checkbox before customers complete checkout.
For example, you may want customers to confirm:
- They reviewed selected product add-ons
- They agree to a custom refund policy
- They understand digital products are non-refundable
- They accept custom production terms
- They approve personalized order details
The good news: FluentCart provides checkout hooks that let developers add custom fields safely without editing FluentCart core files.
What We Will Build
In this tutorial, we will add a second checkbox above the Place Order button on the FluentCart checkout page.
The checkbox will:
- Appear before the Place Order button
- Use FluentCart’s checkout field styling
- Be required before checkout can continue
- Show a validation error if unchecked
- Save the confirmation value into the FluentCart order meta
Step 1: Add the Checkbox Above the Place Order Button
FluentCart renders a hook immediately after payment methods and before the checkout button:
fluent_cart/after_payment_methods
Add this code to your custom plugin or theme functions file:
add_action('fluent_cart/after_payment_methods', 'my_render_checkout_confirmation_checkbox', 20);
function my_render_checkout_confirmation_checkbox($args)
{
?>
<div class="fct_checkout_form_section my-checkout-consent" role="group" data-fct-checkout-form-section>
<div class="fct_form_section_body">
<div class="fct_checkout_agree_terms">
<label for="my_checkout_consent" class="fct_input_label fct_input_label_checkbox">
<input
type="checkbox"
class="fct-input fct-input-checkbox"
id="my_checkout_consent"
name="my_checkout_consent"
value="yes"
required
aria-required="true"
/>
I confirm that I have reviewed my order details.
</label>
<span
data-fluent-cart-checkout-page-form-error
class="fct_form_error fct_error_my_checkout_consent"
role="alert"
aria-live="polite"
></span>
</div>
</div>
</div>
<?php
}
This places the checkbox above the Place Order button and keeps the UI consistent with FluentCart’s checkout design.
Step 2: Validate the Checkbox Before Checkout
Now we need to stop checkout if the customer does not check the box.
FluentCart provides this validation filter:
fluent_cart/checkout/validate_data
Add this code:
add_filter('fluent_cart/checkout/validate_data', 'my_validate_checkout_confirmation_checkbox', 10, 2);
function my_validate_checkout_confirmation_checkbox($errors, $context)
{
$data = $context['data'] ?? [];
if (empty($data['my_checkout_consent']) || $data['my_checkout_consent'] !== 'yes') {
$errors['my_checkout_consent']['required'] = __('Please confirm that you reviewed your order details.', 'your-textdomain');
}
return $errors;
}
Now, if the checkbox is not selected, FluentCart will return a validation error and prevent the order from being placed.
Step 3: Save the Checkbox Value to the Order
If you want to keep a record of the customer’s confirmation, save the value to the FluentCart order meta.
FluentCart provides this action during checkout processing:
fluent_cart/checkout/prepare_other_data
Add this code:
add_action('fluent_cart/checkout/prepare_other_data', 'my_save_checkout_confirmation_checkbox');
function my_save_checkout_confirmation_checkbox($data)
{
$order = $data['order'] ?? null;
$requestData = $data['request_data'] ?? [];
if (!$order || empty($requestData['my_checkout_consent'])) {
return;
}
$order->updateMeta('my_checkout_consent', 'yes');
}
The confirmation is now stored with the order.
Complete Code
Here is the full working example:
add_action('fluent_cart/after_payment_methods', 'my_render_checkout_confirmation_checkbox', 20);
function my_render_checkout_confirmation_checkbox($args)
{
?>
<div class="fct_checkout_form_section my-checkout-consent" role="group" data-fct-checkout-form-section>
<div class="fct_form_section_body">
<div class="fct_checkout_agree_terms">
<label for="my_checkout_consent" class="fct_input_label fct_input_label_checkbox">
<input
type="checkbox"
class="fct-input fct-input-checkbox"
id="my_checkout_consent"
name="my_checkout_consent"
value="yes"
required
aria-required="true"
/>
I confirm that I have reviewed my order details.
</label>
<span
data-fluent-cart-checkout-page-form-error
class="fct_form_error fct_error_my_checkout_consent"
role="alert"
aria-live="polite"
></span>
</div>
</div>
</div>
<?php
}
add_filter('fluent_cart/checkout/validate_data', 'my_validate_checkout_confirmation_checkbox', 10, 2);
function my_validate_checkout_confirmation_checkbox($errors, $context)
{
$data = $context['data'] ?? [];
if (empty($data['my_checkout_consent']) || $data['my_checkout_consent'] !== 'yes') {
$errors['my_checkout_consent']['required'] = __('Please confirm that you reviewed your order details.', 'your-textdomain');
}
return $errors;
}
add_action('fluent_cart/checkout/prepare_other_data', 'my_save_checkout_confirmation_checkbox');
function my_save_checkout_confirmation_checkbox($data)
{
$order = $data['order'] ?? null;
$requestData = $data['request_data'] ?? [];
if (!$order || empty($requestData['my_checkout_consent'])) {
return;
}
$order->updateMeta('my_checkout_consent', 'yes');
}
Important Notes
This method works best on the standard FluentCart checkout page because FluentCart provides a hook directly above the Place Order button.
For modal checkout, FluentCart renders the checkout button in a different wrapper, so you may need a small JavaScript placement script if you want the checkbox in the exact same position there.
Also, never edit FluentCart core plugin files directly. Use a custom plugin, child theme, or your own add-on plugin so your changes are not lost during updates.
Final Thoughts
Adding a custom required checkbox to FluentCart checkout is straightforward when you use the proper hooks.
The key hooks are:
fluent_cart/after_payment_methods fluent_cart/checkout/validate_data fluent_cart/checkout/prepare_other_data
With these hooks, you can display the checkbox, validate it before checkout, and store the customer confirmation with the order.
