Skip to content
Fluid Checkout
  • Features
  • Demo
  • Pricing PRO
  • Docs
  • Support
  • My account
0,00 € 0 items
Home / Docs / How to customize WooCommerce or Fluid Checkout template files

How can we help?

Getting started

  • How to translate Fluid Checkout plugins into your language

Account & Purchases

  • Finding my invoice, adding billing details and VAT number

Customizations

  • International phone numbers — formatting and validation for phone numbers based on country rules
  • Move the “Phone” field to the first step (contact step)
  • How to change the icon or icon color for the cart button on mobile
  • Customizing checkout fields and adding custom checkout fields
  • How to customize WooCommerce or Fluid Checkout template files
  • How to add a new house number field and make it required
  • How to safely add code snippets to your WooCommerce website

Licenses

  • New versions updates are not appearing on my website

Features

  • International phone numbers — formatting and validation for phone numbers based on country rules
  • Edit cart at checkout — change quantity or remove items from the cart directly at the checkout page
  • Express checkout — quick payment buttons for Google Pay, Apple Pay and other payment methods

Development

  • Changelog format and semantic version numbers
  • Changelog – Fluid Checkout PRO & Lite

How to customize WooCommerce or Fluid Checkout template files

Table of Contents
  • Template files directory structure
    • Fluid Checkout Lite template files structure
    • Fluid Checkout PRO template files structure
  • Upgrading customizations from versions prior to Fluid Checkout Lite 2.3.0
  • Copying template files into your child theme or custom theme
    • Customizing Fluid Checkout template files
    • Customizing template files of compatible plugins and themes
  • Telling Fluid Checkout to use your template file instead
    • Where to add the code snippet

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.

For example, when copying the file:
– fluid-checkout/templates/fc/checkout-page-template/checkout/page-checkout-footer.php
place your copy at:
– your-child-theme/woocommerce/checkout/page-checkout-footer.php

Another example, when copying the file:
– fluid-checkout-pro/templates/fc-pro/cart/cart/cart.php
place your copy at:
– your-child-theme/woocommerce/cart/cart.php

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.

For example, when copying the file:
– fluid-checkout/templates/compat/plugins/woocommerce-germanized/checkout/order-submit.php
place your copy at:
– your-child-theme/woocommerce-germanized/checkout/order-submit.php

Another example, when copying the file:
– fluid-checkout-pro/templates/compat/plugins/woo-stripe-payment/checkout/checkout-banner.php
place your copy at:
– your-child-theme/woo-stripe-payment/checkout/checkout-banner.php

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

For example, when copying the file:
– fluid-checkout/templates/compat/plugins/woocommerce-subscriptions/myaccount/related-subscriptions.php
place your copy at:
– your-child-theme/woocommerce/myaccount/related-subscriptions.php

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

What are your Feelings
Still stuck? How can we help?

How can we help?

Updated on March 3, 2023
Customizing checkout fields and adding custom checkout fieldsHow to add a new house number field and make it required
Table of Contents
  • Template files directory structure
    • Fluid Checkout Lite template files structure
    • Fluid Checkout PRO template files structure
  • Upgrading customizations from versions prior to Fluid Checkout Lite 2.3.0
  • Copying template files into your child theme or custom theme
    • Customizing Fluid Checkout template files
    • Customizing template files of compatible plugins and themes
  • Telling Fluid Checkout to use your template file instead
    • Where to add the code snippet
Fluid Checkout

Frictionless Multi-step Checkout for WooCommerce

© 2021-2023 Fluidweb OÜ

Terms | Refunds | Privacy Policy | Cookies

Products
  • All products
  • Fluid Checkout PRO
  • Fluid Checkout Lite
  • Google Address Autocomplete for WooCommerce
Company
  • Support
  • My account
  • About
  • Home
  • Home
  • Features
  • Pricing PRO
  • Demo
  • Docs
  • Support
  • My account