How can I add a required checkbox labeled ‘Add my notes to this product’ in WooCommerce’s block-based checkout and ensure it is saved in the order details?

Hello guys how are you? Welcome back to my blog therichpost.com. Guys today in this post, I will tell you How can I add a required checkbox labeled ‘Add my notes to this product’ in WooCommerce’s block-based checkout and ensure it is saved in the order details?

Guys if you are new in  WordPress or in  WooCommerce then please check the below links for some good tutorials:

1. WooCommerce Hooks
2. WordPress Tricks
3. WordPress Hooks
4. Dokan

Here is the working steps and please follow carefully:

Got it! You want to add a new checkbox field labeled something like “Add my notes to this product” in the WooCommerce block-based checkout and ensure it is required before checkout.

Since WooCommerce’s block-based checkout does not provide direct PHP hooks like the classic checkout, you’ll need to use custom JavaScript and WooCommerce filters to achieve this.

Steps to Add a Required Checkbox in Block-Based Checkout

1. Add the Checkbox to the Checkout Form

You can use JavaScript to dynamically add the checkbox to the checkout page.

function add_custom_checkbox_script() {
    if ( is_checkout() ) {
        ?>
        <script>
        (function($) {
            $(document).ready(function() {
                // Create the checkbox field
                var checkboxHtml = '<p class="form-row validate-required" id="custom_note_checkbox_field">' +
                                   '<label for="custom_note_checkbox" class="checkbox">' +
                                   '<input type="checkbox" id="custom_note_checkbox" name="custom_note_checkbox" value="yes" required> Add my notes to this product' +
                                   '</label></p>';
                
                // Append checkbox before the order notes field
                $('div.wp-block-woocommerce-checkout-order-note-block').before(checkboxHtml);
                
                // Ensure the checkbox is checked before proceeding to checkout
                $(document.body).on('checkout_place_order', function() {
                    if (!$('#custom_note_checkbox').is(':checked')) {
                        alert('Please check the "Add my notes to this product" box before proceeding.');
                        return false;
                    }
                });
            });
        })(jQuery);
        </script>
        <?php
    }
}
add_action('wp_footer', 'add_custom_checkbox_script');

2. Save the Checkbox Value in the Order Meta

To store the checkbox value when the user checks out, add this to functions.php:

add_action( 'woocommerce_checkout_update_order_meta', function( $order_id ) {
    if ( isset( $_POST['custom_note_checkbox'] ) ) {
        update_post_meta( $order_id, 'custom_note_checkbox', 'Yes' );
    } else {
        update_post_meta( $order_id, 'custom_note_checkbox', 'No' );
    }
});

3. Display the Checkbox Value in the Admin Order Page

To show whether the customer checked the box in the order details:

add_action( 'woocommerce_admin_order_data_after_billing_address', function( $order ) {
    $custom_checkbox = get_post_meta( $order->get_id(), 'custom_note_checkbox', true );
    echo '<p><strong>Add Notes to Product:</strong> ' . ( $custom_checkbox === 'Yes' ? 'Yes' : 'No' ) . '</p>';
});

Final Result

✅ A checkbox labeled “Add my notes to this product” will appear above the order notes in the checkout form.
✅ Users must check the box before completing the checkout.
✅ The selection is saved in the order details for reference.

Let me know if you need any tweaks! 🚀

Ajay

Thanks