Prevent Customer Edits to Billing and Shipping Details

Prevent customers from editing billing and shipping details on your WooCommerce checkout using a simple code snippet and the readonly attribute for data integrity.

Tags: PHP, WordPress
🕒 6 mins read
Prevent Customer Edits to Billing and Shipping Details

As a WooCommerce store owner, you sometimes need a firm grip on the information your customers provide during checkout. Whether it’s for pre-filled details based on previous orders, specific campaign requirements, or simply to avoid confusion with subsequent purchases, the ability to prevent customers from editing certain checkout fields can be invaluable.

Imagine a scenario where a returning customer is placing an additional order. If their billing or shipping information has changed since their last purchase, and they inadvertently update it during this new checkout, it could lead to fulfillment errors or billing discrepancies. You might prefer to maintain the initially provided details for specific orders or user segments.

This guide will walk you through a simple yet effective method to make specific or even all billing and shipping fields on your WooCommerce checkout page read-only, ensuring the information remains as you intend it, without the risk of it being accidentally or intentionally altered by the customer.

The Pitfall of the disabled Attribute

You might initially think of using the disabled HTML attribute to prevent field edits. However, WooCommerce relies on the data within these fields to process the order. A crucial point to remember is that disabled input elements in an HTML form are not submitted! This means if you were to disable required fields like the billing first name or email, the order would fail to process altogether. Therefore, the disabled attribute is not a viable solution for most checkout fields, especially the mandatory ones.

The Preferred Method: Utilizing the readonly Attribute

The ideal approach is to leverage the readonly HTML attribute. This attribute visually prevents users from modifying the field’s value, but crucially, the value of a read-only input element is still submitted with the form. This allows you to lock the information for the customer’s view and editing while ensuring WooCommerce receives the necessary data to complete the order.

Implementing Read-Only Fields in WooCommerce Checkout

To make specific billing and shipping fields read-only, you can add a small snippet of code to your WordPress website. This code utilizes a WooCommerce filter hook that allows you to modify the checkout fields before they are displayed to the customer.

Here’s the code you can use:

/**
 * Disable specific billing and shipping fields on the WooCommerce checkout.
 *
 * @param array $fields Array of checkout fields.
 *
 * @return array Modified array of checkout fields.
 */
function yasglobal_disable_checkout_fields( $fields ) {
	// Disable specific billing fields by their field name
	$fields['billing']['billing_first_name']['custom_attributes'] = array( 'readonly' => true );
	$fields['billing']['billing_last_name']['custom_attributes']  = array( 'readonly' => true );
	$fields['billing']['billing_company']['custom_attributes']    = array( 'readonly' => true );
	$fields['billing']['billing_address_1']['custom_attributes']  = array( 'readonly' => true );
	$fields['billing']['billing_address_2']['custom_attributes']  = array( 'readonly' => true );
	$fields['billing']['billing_city']['custom_attributes']       = array( 'readonly' => true );
	$fields['billing']['billing_postcode']['custom_attributes']   = array( 'readonly' => true );
	$fields['billing']['billing_phone']['custom_attributes']      = array( 'readonly' => true );
	$fields['billing']['billing_email']['custom_attributes']      = array( 'readonly' => true );

	// Disable specific shipping fields by their field name
	$fields['shipping']['shipping_first_name']['custom_attributes'] = array( 'readonly' => true );
	$fields['shipping']['shipping_last_name']['custom_attributes']  = array( 'readonly' => true );
	$fields['shipping']['shipping_company']['custom_attributes']    = array( 'readonly' => true );
	$fields['shipping']['shipping_address_1']['custom_attributes']  = array( 'readonly' => true );
	$fields['shipping']['shipping_address_2']['custom_attributes']  = array( 'readonly' => true );
	$fields['shipping']['shipping_city']['custom_attributes']       = array( 'readonly' => true );
	$fields['shipping']['shipping_postcode']['custom_attributes']   = array( 'readonly' => true );

	return $fields;
}
add_filter( 'woocommerce_checkout_fields', 'yasglobal_disable_checkout_fields', 10, 1 );

How to Implement This Code:

There are several ways to add this code to your WordPress site:

  • Your Theme’s functions.php File (Not Recommended for Beginners): You can directly edit the functions.php file of your active theme. However, this is generally not recommended as any changes will be lost when you update your theme.
  • A Child Theme’s functions.php File (Recommended): Creating and using a child theme is the best practice for making customizations to your theme. You can add the code snippet to the functions.php file of your child theme. This ensures your changes are preserved even when you update your parent theme.
  • A Code Snippets Plugin (Recommended for Ease of Use): Several free and reputable plugins like “Code Snippets” allow you to add and manage custom PHP code snippets directly from your WordPress dashboard without editing theme files. This is often the most user-friendly approach.

Customizing Which Fields to Make Read-Only:

The provided code snippet makes a specific set of billing and shipping fields read-only. To customize this, simply comment out or remove the lines corresponding to the fields you do want to remain editable.

For example, if you only want to prevent editing of the billing address fields, you would keep these lines:

$fields['billing']['billing_address_1']['custom_attributes']  = array( 'readonly' => true );
$fields['billing']['billing_address_2']['custom_attributes']  = array( 'readonly' => true );
$fields['billing']['billing_city']['custom_attributes']       = array( 'readonly' => true );
$fields['billing']['billing_postcode']['custom_attributes']   = array( 'readonly' => true );

And remove or comment out the lines for other fields like billing_first_name, billing_email, etc.

Handling Dropdown Fields (Country and State):

It’s important to note that the readonly attribute is primarily applicable to text and textarea input types in HTML. Applying it directly to dropdown fields like “Country” or “State” will not have the desired effect of fixing their selected value. To achieve a similar outcome for dropdown fields, you would need a different approach, potentially involving JavaScript to prevent changes after the initial selection or by programmatically setting the value and preventing the dropdown from being interactive. We will explore methods for handling dropdown fields in a separate tutorial.

Locking Down All Checkout Fields Using a Loop

If you have a scenario where you need to make all billing and shipping fields read-only on the checkout page (for instance, when a customer is placing an additional order with pre-filled, non-editable details), you can use a foreach loop to iterate through all the fields under the billing and shipping sections.

Here’s how you can modify the code to achieve this:

/**
 * Disable all billing and shipping fields on the WooCommerce checkout.
 *
 * @param array $fields Array of checkout fields.

 * @return array Modified array of checkout fields.
 */
function yasglobal_disable_all_checkout_fields( $fields ) {
	foreach ( $fields['billing'] as $key => $field ) {
		$fields['billing'][$key]['custom_attributes'] = array( 'readonly' => true );
	}

	foreach ( $fields['shipping'] as $key => $field ) {
		$fields['shipping'][$key]['custom_attributes'] = array( 'readonly' => true );
	}

	return $fields;
}
add_filter( 'woocommerce_checkout_fields', 'yasglobal_disable_all_checkout_fields', 10, 1 );

This code snippet loops through each field within the billing and shipping arrays and applies the readonly attribute, effectively locking all the fields in those sections.

Conclusion

By strategically using the readonly attribute and the woocommerce_checkout_fields filter hook, you can gain precise control over the editability of your WooCommerce checkout fields. This allows you to maintain the integrity of crucial customer information, prevent unintended modifications, and streamline the checkout process for specific scenarios, ultimately contributing to a smoother and more reliable experience for both you and your customers. Remember to implement the code correctly using a child theme or a code snippets plugin and to test your checkout thoroughly after implementation.