How to customize WooCommerce or Fluid Checkout template files

Because too many plugins and themes have their own versions of WooCommerce template files, Fluid Checkout needs to force its template files to be used to ensure maximum compatibility with various plugins and themes.

In order to customize a template file that Fluid Checkout uses, you need to:

1. Understand the Fluid Checkout template files directory structure
2. Copy the template file from the Fluid Checkout plugin into your child theme or custom theme
3. Tell Fluid Checkout to use your template file.

If you had done customizations to template files prior to version 2.3.0, you might need to upgrade your customizations to the new file structure:

1. Upgrading customizations from versions prior to Fluid Checkout Lite 2.3.0

Template files directory structure #

All template files from WooCommerce or new ones created for Fluid Checkout are located inside the /templates directory inside the Lite or PRO plugin folder.

The template files are separated into different directories to allow enabling/disabling each feature separately (ie. templates/fc/feature-x/), and also to compatibility template files only when the respective components are activated (ie. templates/compat/plugins/plugin-x/).

Within each feature directory, you’ll find the corresponding subdirectories of the well-known WooCommerce templates directory.

Fluid Checkout Lite template files structure #

- fluid-checkout/templates
  ⊢ compat
    ⊢ plugins
    ⊢ themes
  ⊢ fc
    ⊢ checkout-page-template
      ⊢ cart
      ⊢ checkout
      ⊢ global
      ⊢ (etc...)
    ⊢ checkout-steps
      ⊢ cart
      ⊢ checkout
      ⊢ global
      ⊢ (etc...)
    ⊢ (other features...)

Fluid Checkout PRO template files structure #

- fluid-checkout-pro/templates
  ⊢ compat
    ⊢ plugins
    ⊢ themes
  ⊢ fc-pro
    ⊢ address-book
      ⊢ cart
      ⊢ checkout
      ⊢ global
      ⊢ (etc...)
    ⊢ cart
      ⊢ cart
      ⊢ checkout
      ⊢ global
      ⊢ (etc...)
    ⊢ (... other features)

Upgrading customizations from versions prior to Fluid Checkout Lite 2.3.0 #

Since Fluid Checkout Lite version 2.3.0, template files were moved to this simpler and more consistent directory structure. If you have customized template files prior to that version, you may need to update your project to use this new template directory structure.

Some the template files were renamed as follows:

• templates/fc/footer-checkout.php –> templates/fc/checkout-page-template/checkout/page-checkout-footer.php
• templates/fc/header-checkout.php –> templates/fc/checkout-page-template/checkout/page-checkout-header.php

These changes does not affect the template files of Fluid Checkout PRO.

Copying template files into your child theme or custom theme #

Customizing Fluid Checkout template files #

Although Fluid Checkout template files are located within its feature subfolders, they need to be copied to your child theme using the well-known WooCommerce templates directory structure:

- your-child-theme
  ⊢ woocommerce
    ⊢ cart
      ⊢ cart.php
    ⊢ checkout
      ⊢ page-checkout-footer.php
      ⊢ form-contact-login-modal.php
    ⊢ global
      ⊢ form-login.php
  ⊢ (etc...)

Basically, you drop the part within the Fluid Checkout files structure referring to its different features.

See at the top of each template file the location where you need to place your copy inside the child theme or custom theme. See examples below:

fluid-checkout/templates/fc/checkout-steps/global/form-login.php

<?php
/**
 * Login form
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/global/form-login.php.

fluid-checkout/templates/fc/checkout-steps/checkout/form-contact-login-modal.php

<?php
/**
 * Checkout contact login substep
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/checkout/form-contact-login-modal.php.

Customizing template files of compatible plugins and themes #

Template files from compatible plugins or themes that were changed by Fluid Checkout are a bit different as you’ll need to check in that plugin or theme what is the correct location to place your copies. As a rule of thumb, it is the same place where you would place these files when not using Fluid Checkout.

- your-child-theme
  ⊢ woo-stripe-payment
    ⊢ checkout
      ⊢ checkout-banner.php
  ⊢ woocommerce-germanized
    ⊢ checkout
      ⊢ order-submit.php
  ⊢ (etc...)

Compatibility template files are those present in the folders fluid-checkout/templates/compat/ and fluid-checkout-pro/templates/compat/ within Fluid Checkout Lite and PRO respectively.

As with Fluid Checkout own templates, you drop the part within the Fluid Checkout files structure referring to each different compatible component when copying these files.

Some compatible plugins and most themes will still use the same folder woocommerce within your child theme or custom theme.

See at the top of each template file the location where you need to place your copy inside the child theme or custom theme. See examples below:

fluid-checkout/templates/compat/plugins/woocommerce-germanized/checkout/order-submit.php

<?php
/**
 * The Template for inserting the static order submit button within checkout.
 *
 * This template can be overridden by copying it to yourtheme/woocommerce-germanized/checkout/order-submit.php.

Telling Fluid Checkout to use your template file instead #

For better compatibility with so many plugins and themes, Fluid Checkout needs to force using its own template files. Because of that, you’ll need to add a code snippet to your website to tell Fluid Checkout that your customized template files need to be used instead.

The file names in the code snippet need to follow the well-known WooCommerce templates directory structure, dropping the parts referring to the Fluid Checkout feature subdirectories or referring to the compatible plugin or theme.

See the example below:

/**
 * Override plugin template files with the theme version.
 */
function fluidcheckout_override_template_with_theme_file( $override, $template, $template_name, $template_path ) {
    // Change this list with the partial path
    // to the template files you want to override,
    // following the WooCommerce templates directory structure.
    $override_templates_list = array(
        'global/form-login.php',
        'checkout/form-contact-login-modal.php',
        'checkout/checkout-banner.php',
        'myaccount/related-subscriptions.php',
    );

    if ( in_array( $template_name, $override_templates_list ) ) {
        $override = true;
    }

    return $override;
}
add_filter( 'fc_override_template_with_theme_file', 'fluidcheckout_override_template_with_theme_file', 10, 4 );

If you add a template file to the list but the file does not exist in your child theme or custom theme, Fluid Checkout will load its own template files instead, or the original files from WooCommerce or compatible plugins or themes.

Where to add the code snippet #

Unless you are developing a completely custom theme, we do not recommend changing the functions.php file of your theme directly.

If you are using a custom child theme, the ideal location to add the hook is the functions.php file of the child theme.

You can also add the code snippet above with the Code Snippets plugin or a similar one. For more information about adding code snippets and customizations, check our article:
How to safely add code snippets to your WooCommerce website