Customizing existing checkout field and adding custom checkout fields

Customizing existing checkout field and adding custom checkout fields

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

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 and Checkout Field Editor for WooCommerce (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:
  1. /**
  2.  * Change billing address 1 field description.
  3.  */
  4. function fluidcheckout_change_billing_address_1_field_args( $fields ) {
  5. // Bail if field is not present
  6. if ( ! array_key_exists( 'billing_address_1', $fields ) ) { return $fields; }
  7. $fields[ 'billing_address_1' ][ 'label' ] = __( 'Address line 1', 'your-text-domain' );
  8. $fields[ 'billing_address_1' ][ 'label' ] = __( 'Address line 1 description here', 'your-text-domain' );
  9. $fields[ 'billing_address_1' ][ 'placeholder' ] = __( 'Apartment, suite, unit...', 'your-text-domain' );
  10. return $fields;
  11. }
  12. 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:
  1. /**
  2.  * Change shipping phone field label.
  3.  */
  4. function fluidcheckout_change_shipping_phone_label( $fields ) {
  5. // Bail if shipping phone not available
  6. if ( ! array_key_exists( 'shipping_phone', $fields ) ) { return $fields; }
  7. $fields[ 'shipping_phone' ]['label'] = __( 'Phone', 'your-text-domain' );
  8. // Uncomment the line below to change the field description
  9. // $fields[ 'shipping_phone' ]['description'] = __( 'Your best phone number', 'your-text-domain' );
  10. // Uncomment the line below to remove the field description
  11. // $fields[ 'shipping_phone' ]['description'] = null;
  12. return $fields;
  13. }
  14. add_filter( 'woocommerce_shipping_fields', 'fluidcheckout_change_shipping_phone_label', 300 );

Making changes to billing fields using the filter hook woocommerce_checkout_fields:
  1. /**
  2.  * Swap the position of the billing first and last names to display the last name field first.
  3.  */
  4. function fluidcheckout_billing_last_name_first( $checkout_fields ) {
  5. // Remove field size and position classes
  6. if ( false !== ( $key = array_search( 'form-row-first', $checkout_fields['billing']['billing_first_name']['class'] ) ) ) { unset( $checkout_fields['billing']['billing_first_name']['class'][ $key ] ); }
  7. if ( false !== ( $key = array_search( 'form-row-last', $checkout_fields['billing']['billing_last_name']['class'] ) ) ) { unset( $checkout_fields['billing']['billing_last_name']['class'][ $key ] ); }
  8. // Change priority and add new appropriate size and position classes
  9. $checkout_fields['billing']['billing_first_name']['priority'] = 20;
  10. $checkout_fields['billing']['billing_first_name']['class'] = array_merge( $checkout_fields['billing']['billing_first_name']['class'], array( 'form-row-last' ) );
  11. $checkout_fields['billing']['billing_last_name']['priority'] = 10;
  12. $checkout_fields['billing']['billing_last_name']['class'] = array_merge( $checkout_fields['billing']['billing_last_name']['class'], array( 'form-row-first' ) );

  13. return $checkout_fields;
  14. }
  15. 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:

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.
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, to be honest, it will take a while until we consider this working on this task again.

    • Related Articles

    • How to customize WooCommerce or Fluid Checkout template files

      Because too many plugins and themes have their own versions of the WooCommerce template files Fluid Checkout also uses, we needed to force our template files to be used to have better compatibility with the greatest number of plugins and themes. In ...
    • How to enable Google Pay and Apple Pay in the Express Checkout section?

      The Express Checkout section Fluid Checkout will display a new section for fast checkout when payment gateways support one or more of the Express Checkout payment methods. The express checkout methods usually include Google Pay, Apple Pay and other ...
    • Compatibility with Plugin Organizer

      The layout issues are caused by the lack of the changes applied by Fluid Checkout on the WooCommerce AJAX calls that generate the HTML for the order review. The scripts and styles are being loaded, but the HTML is different than expected to apply the ...
    • How to fix the order summary and progress bar being cut off by the site's header

      Order summary and progress bar is being cut off by the header Usually the site's header will only cut off the order summary and progress bar when the original theme's header is being used, by default Fluid Checkout will replace the theme's header ...
    • How to change the icon or icon color for the cart button on mobile

      Fluid Checkout only provides one icon for the cart button. However, it is possible to change the icon for the cart button to match what is used for the website's theme or any other icon. There are a few ways to do it, which one to use will depend on ...