How can we help?

Customizing checkout fields and adding custom checkout fields

Table of Contents

Adding custom checkout fields #

Custom checkout fields can be added or changed on Fluid Checkout in the same way as for the original WooCommerce checkout.

There are two main ways you make changes to the checkout fields on your WooCommerce checkout page:

  1. Using a checkout fields editor plugin (recommended)
  2. Using a code snippet

You should also be aware of some caveats regarding checkout field customizations when using Fluid Checkout. Read the section “Checkout field order caveats” in this article.

Using a checkout fields editor plugin #

Fluid Checkout is compatible with most checkout fields editor plugins for basic changes to the WooCommerce checkout fields. Basic changes would be:

  1. Change field label, description, and placeholder text
  2. Change field size and CSS classes
  3. Change field order (with caveats, see below)
  4. Remove or disable existing fields
  5. Add custom fields

Currently, we recommend using the plugin Checkout Field Editor for WooCommerce (by Themehigh), as we have tested and added full compatibility with it.

Advanced checkout fields customizations #

For advanced features, such as adding conditional fields and sections, you’ll need a compatible plugin and the Fluid Checkout PRO version, which is not yet available for everyone.

Currently, Fluid Checkout is only compatible with advanced features of the Checkout Field Editor for WooCommerce PRO (by Themehigh). Please note that to use these advanced features you’ll need the PRO version of both Fluid Checkout PRO and Checkout Field Editor for WooCommerce PRO (by Themehigh).

Using a code snippet #

Making changes to checkout fields via a custom PHP code snippet is significantly more difficult than using a checkout field editor plugin. However, there are times when simple changes can be done via code snippets instead of having yet another plugin installed.

Fluid Checkout is fully compatible with the native WooCommerce filter hooks used to make changes to the checkout fields, be it to change labels, add new fields, or remove existing fields. Those filter hooks are:

  1. woocommerce_billing_fields
  2. woocommerce_shipping_fields
  3. woocommerce_checkout_fields

Some examples of code snippets:

Making changes to billing fields using the filter hook woocommerce_billing_fields:

/**
 * Change billing address 1 field description.
 */
function fluidcheckout_change_billing_address_1_field_args( $fields ) {
	// Bail if field is not present
	if ( ! array_key_exists( 'billing_address_1', $fields ) ) { return $fields; }
	
	$fields[ 'billing_address_1' ][ 'label' ] = __( 'Address line 1', 'your-text-domain' );
	$fields[ 'billing_address_1' ][ 'label' ] = __( 'Address line 1 description here', 'your-text-domain' );
	$fields[ 'billing_address_1' ][ 'placeholder' ] = __( 'Apartment, suite, unit...', 'your-text-domain' );
	
	return $fields;
}
add_filter( 'woocommerce_billing_fields', 'fluidcheckout_change_billing_address_1_field_args', 300 );

Making changes to shipping fields using the filter hook woocommerce_shipping_fields:

/**
 * Change shipping phone field label.
 */
function fluidcheckout_change_shipping_phone_label( $fields ) {
	// Bail if shipping phone not available
	if ( ! array_key_exists( 'shipping_phone', $fields ) ) { return $fields; }
	
	$fields[ 'shipping_phone' ]['label'] = __( 'Phone', 'your-text-domain' );
	
	// Uncomment the line below to change the field description
	// $fields[ 'shipping_phone' ]['description'] = __( 'Your best phone number', 'your-text-domain' );
	
	// Uncomment the line below to remove the field description
	// $fields[ 'shipping_phone' ]['description'] = null;
	
	return $fields;
}
add_filter( 'woocommerce_shipping_fields', 'fluidcheckout_change_shipping_phone_label', 300 );

Making changes to billing fields using the filter hook woocommerce_checkout_fields:

/**
 * Swap the position of the billing first and last names to display the last name field first.
 */
function fluidcheckout_billing_last_name_first( $checkout_fields ) {
	// Remove field size and position classes
	if ( false !== ( $key = array_search( 'form-row-first', $checkout_fields['billing']['billing_first_name']['class'] ) ) ) { unset( $checkout_fields['billing']['billing_first_name']['class'][ $key ] ); }
	if ( false !== ( $key = array_search( 'form-row-last', $checkout_fields['billing']['billing_last_name']['class'] ) ) ) { unset( $checkout_fields['billing']['billing_last_name']['class'][ $key ] ); }
	
	// Change priority and add new appropriate size and position classes
	$checkout_fields['billing']['billing_first_name']['priority'] = 20;
	$checkout_fields['billing']['billing_first_name']['class'] = array_merge( $checkout_fields['billing']['billing_first_name']['class'], array( 'form-row-last' ) );
	$checkout_fields['billing']['billing_last_name']['priority'] = 10;
	$checkout_fields['billing']['billing_last_name']['class'] = array_merge( $checkout_fields['billing']['billing_last_name']['class'], array( 'form-row-first' ) );

	return $checkout_fields;
}
add_filter( 'woocommerce_checkout_fields', 'fluidcheckout_billing_last_name_first', 300 );

If you are unsure about how to add the code snippet, check our article:
How to safely add code snippets to your WooCommerce website

There are a couple of things you need to keep in mind though:

  1. Fluid Checkout runs its fields customizations with a priority of 100 and 200, so any changes should be made with a higher priority. We recommend using a priority higher than 300.
  2. Some plugins might use an even higher priority, for instance, Checkout Field Editor for WooCommerce (by ThemeHigh) uses a priority of 1000, so ensure your customization code run at priority higher than that when using this plugin.

In case your changes are not taking effect, please try a higher priority value and see if it solves the issue.

Checkout field order caveats #

There is a limitation in Fluid Checkout regarding adding new fields, where the fields added to the shipping or billing section that does not have a correspondence in the other section will be displayed after the common fields.

For example, if you have custom fields for “Start date” and “End date” for an insurance policy added to the billing section, these fields will be displayed after the common billing address fields regardless of the order (priority) set for those fields via a checkout fields customization plugin or code snippet. However, if you add the corresponding fields to the shipping section, the fields will be displayed in the correct order as defined for both the billing and shipping sections.

Corresponding fields are fields that have the same ending on their field keys, for instance:

  1. billing_address_1 -> shipping_address_1
  2. billing_start_date -> shipping_start_date
  3. billing_end_date -> shipping_end_date

Although not ideal, this limitation is what makes it possible to use the option “(billing) same as shipping address” with a decent user experience.

We have a task on our back to try to improve this in the future.

Compatibility with Checkout Fields Manager for WooCommerce By QuadLayers #

The plugin Checkout Fields Manager for WooCommerce (by QuadLayers) is not compatible with Fluid Checkout.

We’ve tried to add compatibility with it without success. This problem is due to how Fluid Checkout saves the user data during checkout and the way Checkout Fields Manager for WooCommerce (by QuadLayers) processes its custom fields or changes to existing fields.

As a workaround, we suggest you replace the plugin WooCommerce Checkout Manager (by QuadLayer) with the similar compatible plugin Checkout Field Editor for WooCommerce (by Themehigh).

We’ll keep a task in the backlog to add compatibility with WooCommerce Checkout Manager by QuadLayers in the future, however, and to be honest, it will take a while until we consider working on this task again.

Search Keywords #

customize fields, checkout fields, form fields, customize checkot, fiels

What are your Feelings