How to safely add code snippets to your WooCommerce website

How to safely add code snippets to your WooCommerce website

Introduction

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 (our 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 (our 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. 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:
  1. // Bail if Fluid Checkout steps class is not available
  2. if ( ! class_exists( 'FluidCheckout_Steps' ) ) { return; }
Also, note that the `return` statement might be different depending on the action or filter hook you are using. If your code snippet uses a filter hook, you'll need to return the value of the first parameter.

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

The text-domain is a string used by PHP/WordPress to identify what translation file should be used to get a 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.

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 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. If you want to know more about this method, please write us in the comments.

    • Related Articles

    • How to translate Fluid Checkout plugins into your language

      Fluid Checkout plugins are 100% translatable We make all our plugins fully localized/translatable. All labels and other texts added or changed by the plugin are translatable using the built-in WordPress functions. This is very important for all users ...
    • Scope of support

      The plugin support includes Help with any issues specifically relating to the plugin you have purchased from us. Any issues relating to using our plugins with third-party plugins that we officially integrate with. Advice on how to use our plugins in ...