In a recent Business Bloomer Club Slack thread, a WooCommerce store owner managing a wholesale platform wanted to prevent customers from editing their billing and shipping details on the checkout page.
This restriction was necessary to maintain data consistency with their Fishbowl Inventory system, as mismatches could lead to order processing errors.
Here’s a guide on setting specific checkout fields as read-only or fully disabling them to prevent customer edits.
Step 1: Set Checkout Fields to Read-Only
To prevent edits while still displaying billing and shipping details, you can set specific fields as “read-only.” This approach works for text input fields but does not apply to dropdowns, such as country or state.
Here’s an example code snippet to make fields read-only:
add_filter( 'woocommerce_checkout_fields', 'make_billing_shipping_fields_readonly', 9999 );
function make_billing_shipping_fields_readonly( $fields ) {
// Set billing fields to read-only
$fields['billing']['billing_first_name']['custom_attributes']['readonly'] = 'readonly';
$fields['billing']['billing_last_name']['custom_attributes']['readonly'] = 'readonly';
$fields['billing']['billing_company']['custom_attributes']['readonly'] = 'readonly';
// Repeat for other fields as needed
return $fields;
}
Step 2: Disable Dropdown Fields and Add Hidden Fields for Order Data
For dropdown fields like “Country” and “State,” setting them as read-only won’t work. Instead, use the disabled
attribute to prevent edits. However, keep in mind that disabled fields do not get submitted with the order, so you’ll need to add hidden fields to pass the data along.
Example code for disabling dropdowns and adding hidden fields:
add_filter( 'woocommerce_checkout_fields', 'disable_billing_shipping_dropdown_fields', 9999 );
function disable_billing_shipping_dropdown_fields( $fields ) {
// Disable dropdown fields
$fields['billing']['billing_country']['custom_attributes'] = array( 'disabled' => 'disabled' );
$fields['billing']['billing_state']['custom_attributes'] = array( 'disabled' => 'disabled' );
return $fields;
}
// Add hidden fields to save country and state information
add_action('woocommerce_after_order_notes', 'add_hidden_country_state_fields');
function add_hidden_country_state_fields( $checkout ) {
$current_user = wp_get_current_user();
$user_id = $current_user->ID;
// Hidden fields for billing
echo '<input type="hidden" name="billing_country" value="' . esc_attr( get_user_meta( $user_id, 'billing_country', true ) ) . '">';
echo '<input type="hidden" name="billing_state" value="' . esc_attr( get_user_meta( $user_id, 'billing_state', true ) ) . '">';
}
Explanation of the Code
- Read-Only Fields: The
readonly
attribute prevents customers from editing specific fields but still submits them with the order. - Disabled Dropdowns: Dropdowns are set to
disabled
to prevent edits, but since they won’t submit data, hidden fields are added to capture country and state information from user meta. - Hidden Fields: The
woocommerce_after_order_notes
hook injects hidden fields into the checkout form, ensuring that the correct values are saved with the order.
Conclusion
By combining read-only and disabled fields with hidden inputs, you can effectively prevent WooCommerce customers from modifying billing and shipping details on the checkout page. This approach ensures consistency between WooCommerce and inventory management systems without requiring complex plugins or customizations.