Safely add code snippets to your WooCommerce website


There are a few ways you can add code snippets to your WooCommerce website:

  1. using the functions.php file in your theme
  2. using the functions.php file in your child theme
  3. using a 3rd-party code snippets plugin (preferred method)
  4. writing a custom plugin

In this article, we’ll only walk you through the steps of adding a code snippet using a 3rd-party plugin as that is our preferred method.

Using the functions.php file in your theme or child theme

Most of the information you can find online about adding code snippets to your WooCommerce or WordPress website tells you to use the functions.php file in your theme or child theme (we are also guilty of that).

However, this method poses serious risks to your website while you are adding the code snippets.

One of the most important risks is to lose the customizations you added to the functions.php file when you update the theme or child theme.

Even when the child theme is website specific, which is usually good practice when making customizations to your website, child themes are meant to customize only the current (parent) theme being used, and not for making all kinds of customizations. When adding other customizations to the child theme functions.php file, you might need to go through and port all the necessary code snippets when changing the theme of your website.

Another risk is that if you unknowingly add bad or broken code to the functions.php file, you might break your website and take it offline. If you are not able to diagnose and quickly fix the broken code, you might need to hire someone else to fix it for you. Losing revenue during the time the website is offline, and spending the extra money to get someone to help you.

Using a 3rd-party code snippets plugin (preferred method)

Using a 3rd-party code snippets plugin allows you to maintain all of your customizations in a secure place, without running the risks associated with changing PHP code directly on the theme or child theme functions.php file or needing to know the ins and outs of how custom plugins are created.

We recommend adding code snippets with the plugin Code Snippets.

Not only it will allow you to easily add code snippets, but it also helps you stay organized with the code snippets you add, activate/deactivate when needed, prevent you from breaking the website when trying to save bad or broken code, and also exporting existing code snippets that you may want to use on another website.

How to add code snippets with the Code Snippets plugin

1. First, go to WP Admin > Plugins > Add new, then search for “code snippets”.

2. Install and activate the plugin Code Snippets.

3. Go to WP Admin > Code Snippets > All snippets, then “Add new”:

4. Add a title and code for your code snippet, then click “Save Changes and Activate”:

Don’t forget to check for code resources before using them

Don’t forget to add “bail” checks if your code is trying to access external classes or functions. That will prevent “fatal errors” from happening if the code is using a class or another resource that is not available when running the code snippet.

In the example above, we are modifying Fluid Checkout by moving the shipping methods to after the shipping address. Since we will need to access a Fluid Checkout class to make the necessary changes, first, we need to check if that class is available before using it.

This is done by adding the following line of code at the beginning of the function:

// Bail if Fluid Checkout steps class is not available
if ( ! class_exists( 'FluidCheckout_Steps' ) ) { return; }

Also, note that the `return` statement might be different depending if you are using an `action` or `filter` hook. If your code snippet uses a `filter` hook, you’ll need to return the value of the first parameter received by the hook.

What does `your-text-domain` in the code snippets stand for?

The text-domain is a string used by PHP/WordPress to identify what group of translations (domain) should be used to get a specific translation for that sentence.

If you are adding this code to a child theme or a customization plugin, you should replace `your-text-domain` with the actual text-domain used by the child-theme or plugin.

If you are adding it as a code snippet through the Code Snippet plugin, as suggested by our article, you can leave this as is and change only the actual text that will be displayed.

In case you have a multi-language website, you’ll need to add this code to a child theme or custom plugin and use the correct `text-domain` in order to be able to translate the sentence into other languages.

See more about how to translate Fluid Checkout plugins

Writing a custom plugin

It is possible to write a custom plugin to add the necessary code snippets and make all kinds of changes to other plugins and even the theme.

While it is a very good practice, as it allows you to keep a separate code base for the customizations of your website, this method requires technical knowledge of how plugins are created and maintained.

For that reason, we are not going to provide instructions on how to create a custom plugin at this point.