How to customize the WooCommerce Fast Cart templates
There are two ways to replace or customize the template and the design of the popup cart and checkout in WooCommerce Fast Cart. You either use the built-in hooks, or override the templates as described below.
Please note that this is a developer-level task and if you don't know how to do it then you should ask your developer. If you don't have one then we recommend posting a job on Codeable to find a suitable expert:
Overriding the Fast Cart templates
You can find the templates/fast-cart folder in the plugin source directory. This folder has several files which you can override:
To override any of these templates, you can copy its content and create a file with the same name in a woocommerce/wfc/fast-cart/ folder within your theme.
Let’s say you have the Storefront theme and you want to override the cart-totals.php file. You need to write your code in this file:
There is also a templates/fast-checkout folder in the WooCommerce Fast Cart directory. This handles the checkout templates. The Fast Checkout templates will be used on your website if you have enabled the “Allow fast checkout” option in the WooCommerce Fast Cart settings. You can override the following files:
As with the 'fast cart' templates, you can override these files by copying them to a woocommerce/wfc/fast-checkout folder within your theme directory. So if you want to edit the checkout.php file in the Storefront theme, then you need to copy the main file content to this address:
And then make your changes.
Depending on your Fast Cart settings, a floating cart button can appear when the cart is not empty. This button can be overridden with your own custom template.
The original template can be found at woocommerce-fast-cart/templates/open-cart-button.php, please copy this file to the woocommerce/wfc/ directory in your theme.
When making modifications, in order to ensure continued functionality we recommend avoiding changes to the
<span> tags inside this template. You can replace the
<svg> portion with an
<img> tag or another embedded image of your choice.