Add a Custom Field to Prevent Placing an Order in WooCommerce

Recently a client needed a checkbox field added to the checkout page on a WordPress + WooCommerce website.

The button needed to be placed directly above the “Place Order” field so that it would be very visible when someone gets ready to place their order. It also needed to prevent the person from placing their order until the field was checked.

Here’s how I implemented it.

The Checkout Field Editor plugin didn’t work for this

It would have been nice to use the Checkout Field Editor plugin since we already had it installed, and we were using it to add several other custom fields to the checkout page. Unfortunately, although the field editor allows you to add fields on the checkout page, it doesn’t allow you to add fields directly above the “Place Order” button. Instead, it can only place fields higher up the page.

I confirmed that by contacting technical support for the plugin.

Putting the button in the right place

WPDesk has a Visual Guide to WooCommerce checkout hooks that is immensely helpful with customizations like this. Here’s an excerpt. The arrow shows where I needed to place the new field.

From the hook guide, I found that I would ned to use the woocommerce_review_order_before_submit hook to call the code that I would write to display the checkbox.

Code to display the checkbox

Someone had posted to StackOverflow a code snippet that will display a checkbox and another snippet that will validate whether or not the field had been selected.

Here’s what I ended up with to cover both bases:

add_action( 'woocommerce_review_order_before_submit', 'mp_add_reviewed_order_checkbox', 5 );
function mp_add_reviewed_order_checkbox() {
    $checkout = WC()->checkout();
    $field = array(
            'type'              => 'checkbox',
            'label'             => __( 'I acknowledge that I have reviewed and approved the shipping charges before I complete checkout.', 'mp-checkout-customizations' ),
            'required'          => true,
            'class'             => array( 'form-row-wide', 'terms'),
            'validate'          => array( 'terms' ),
    );
    woocommerce_form_field( 'mp-ack-check', $field, $checkout->get_value( 'hpullet-ack-check' ) );
}
    
// Form field validation
add_action( 'woocommerce_before_checkout_process', 'mp_not_approved_shipping' );
function mp_not_approved_shipping() {
    if ( !isset( $_POST['mp-ack-check'] ) ) {
        wc_add_notice( __( 'Please review and approve the shipping charges.' ), 'error' );
    }
}

Bundling the code

I bundled the code into a plugin to make it easy to install and maintain. I prefer that approach over putting it into the theme’s function file, particularly since a change like this isn’t theme-specific. I want it to continue to work even if I later change the theme.

After modifying, debugging and testing the code in a development environment, I moved it to the production environment and tested it again to make sure everything worked properly.

The final results

Now the message is displayed above the “Place Order” field on the checkout page:

If someone tries to check out before they click the approval checkbox, they’ll be shown a message like this near the top of the page:

Conclusions

WooCommerce provides a lot of flexibility for checkout page customizations.

It usually requires some research to determine the best way approach, but because WooCommerce is so widely used, there’s a lot of free information available on how to customize it.