Customize template files for WooCommerce and Fluid Checkout

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 used by Fluid Checkout, Fluid Checkout PRO or add-ons, you will need to:

1. Understand the template files directory structure
2. Copy the template file from the plugin into your child theme or custom theme
3. Let Fluid Checkout plugins know it needs to use your copy of the template file

Template files directory structure #

All template files from WooCommerce or new ones created for Fluid Checkout, Fluid Checkout PRO and our add-on plugins are located inside the /templates directory inside the respective 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
    ⊢ account-matching
      ⊢ checkout
      ⊢ (etc...)
    ⊢ cart
      ⊢ cart
      ⊢ checkout
      ⊢ global
      ⊢ (etc...)
    ⊢ (... other features)

Add-on plugins template files structure #

The template files structure is the same for all Fluid Checkout Add-ons, only changing the plugin folder name.

- <add-on-plugin-name>/templates
  ⊢ compat
    ⊢ plugins
    ⊢ themes
  ⊢ <plugin-short-name>
    ⊢ <feature-name>
      ⊢ checkout
      ⊢ (etc...)
    ⊢ (... other features)

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.

As a last step, you need to let Fluid Checkout plugins know it needs to use your copy of the template file as explained further down not this article.

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.

As a last step, you need to let Fluid Checkout plugins know it needs to use your copy of the template file as explained further down not this article.

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.

As a last step, you need to let Fluid Checkout plugins know it needs to use your copy of the template file as explained further down not this article.

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

As a last step, you need to let Fluid Checkout plugins know it needs to use your copy of the template file as explained further down not this article.

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.

As a last step, you need to let Fluid Checkout plugins know it needs to use your copy of the template file as explained further down not this article.

Let Fluid Checkout plugins know it needs to use your copy of the template file #

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