How to customize the required field text in the new block checkout?

Hi @pinksharpii ,

Thanks for reaching out!

I understand you’d like to customize the error message for a custom checkout field you created using the guide here: https://developer.woocommerce.com/docs/cart-and-checkout-additional-checkout-fields/#rendering-a-text-field

Totally possible! WooCommerce supports adding your own validation and sanitization rules using WordPress action hooks. You can jump straight to the relevant section here: https://developer.woocommerce.com/docs/cart-and-checkout-additional-checkout-fields/#validation-and-sanitization

Here’s a quick example that shows how you could add a custom error message when a field doesn’t meet certain criteria:

add_action(
	'woocommerce_validate_additional_field',
	function ( WP_Error $errors, $field_key, $field_value ) {
		if ( 'namespace/gov-id' === $field_key ) {
			$match = preg_match( '/[A-Z0-9]{5}/', $field_value );
			if ( 0 === $match || false === $match ) {
				$errors->add( 'invalid_gov_id', 'Please ensure your government ID matches the correct format.' );
			}
		}
	},
	10,
	3
);

You can update this line to change the message:

$errors->add( 'invalid_gov_id', 'Please ensure your government ID matches the correct format.' );

Feel free to adjust the validation logic or the message to match your needs.

I hope this helps!

Hi @pinksharpii ,

Thanks so much for reaching out!

Could you walk us through how you added the field on your end? If you can share the steps you took, that’ll give us a clearer picture of what might be going on and help us point you toward the most relevant solution.

Hello pinksharpii,

Thank you for your reply.

I understand you have created new checkout fields on your site using the developer documentation.

Please note that the custom code falls outside our support policy scope. We may guide you with general direction but for more accurate guidanace I recommend you contact a professional developer. You can find a good developer at Codeable.io or WooExperts.

Let me know if you have any questions.

Have a great day!

I just use CSS. For example, the Phone field:

.wc-block-components-address-form__phone .wc-block-components-validation-error span {
	font-size: 0;
}
.wc-block-components-address-form__phone .wc-block-components-validation-error span:after {
	content: "A phone is needed in case of delivery issues";
	font-size: 12px;
}