How and Where to Add Custom JS, CSS, and PHP Codes

You may sometimes need to add custom JavaScript, CSS, or PHP code to your site for custom functionality or styling. This guide shows the safest place to add each type of code, from every CartFlows page down to a single step.

Choose Where to Add Your Code

Pick the place that matches where you want the code to run:

• All CartFlows pages — CartFlows → Settings → Global CSS & Scripts.
• One funnel — the funnel’s Funnel Settings → General.
• One step — the step’s Settings → General.
• Your whole website — a code snippets plugin, or Appearance → Customize → Additional CSS for CSS.

CartFlows loads its code in this order: global first, then funnel, then step. When two rules style the same element, the step’s rule wins, so you can set a shared style globally and fine-tune it on a single step.

Add CSS or JavaScript to All CartFlows Pages

Use Global CSS & Scripts for code that should run on every funnel step, such as brand fonts, button styles, or a script every funnel needs.

Step 1. From your WordPress dashboard, go to CartFlows → Settings.

Step 2. Click Global CSS & Scripts under Utilities in the left menu.

Step 3. Add your code:

• Global JavaScript — JavaScript that runs on every CartFlows page.
• Global CSS — CSS that applies to every CartFlows page.

Paste the code on its own. CartFlows adds the script and style tags for you.

Step 4. Click Save Settings.

Your code now loads on every CartFlows funnel step, including your Store Checkout.

Add CSS or JavaScript to One Funnel

Use this for code that only one funnel needs, such as styles for a seasonal sale funnel.

Step 1. Go to CartFlows → Funnels and open the funnel.

Step 2. Click the Funnel Settings (gear) icon at the top right, then click General.

Step 3. Add your code to Funnel Custom JavaScript or Funnel Custom CSS.

Step 4. Click Save Settings. The code applies to every step in that funnel.

Add CSS or JavaScript to One Step

Use this for code that only one page needs, such as a tweak to a single checkout or thank you page.

Step 1. Open the funnel and click the Settings (gear) icon on the step you want to change.

Step 2. Click General in the left menu.

Step 3. Add your code to Custom JavaScript or Custom CSS.

Step 4. Click Save Settings. The code applies to that step only.

Add Code to Your Whole Website

Use a Plugin

For code that should run across your whole site, not just CartFlows pages, a code snippets plugin is the simplest and safest option. It works for JavaScript, CSS, and PHP, and your snippets stay active after theme updates.

We recommend:

• Code Snippets
• WPCode
• Woody Code Snippets

Add CSS with the Customizer

To add site-wide CSS without a plugin, go to Appearance → Customize → Additional CSS.

Add Custom PHP

Use a Child Theme

Add your PHP code inside the functions.php file of your child theme. You can open it from Appearance → Theme File Editor in your WordPress dashboard (on some themes, it’s under Tools → Theme File Editor). A code snippets plugin from the list above works for PHP too.

Using a child theme keeps your custom code safe when you update the theme. If you’re not familiar with child themes, see this guide to creating a WordPress child theme.

Frequently Asked Questions