How to correctly add custom code to WooCommerce and WordPress

One of WooCommerce’s greatest strengths is that you have full control over every part of your site. You can customize how things look on the front-end by modifying the way variation prices display, take full control of how shipping costs are calculated, conditionally show / hide checkout fields based on products that are in the cart, or anything else you can think of. And even on the admin side you can customize things to fit your needs.

Nine times out of ten, there will be a plugin available to help you customize your site the way you need to. But for that one time there isn’t, you’ll need to add some custom code to your site. A lot of the articles in this blog consist of custom snippets, so I figured that a quick guide showing the best way to add these would be helpful.

There are multiple correct ways to add custom code to your site, and there are also incorrect ways. The “best” way depends on a number of different things and I’ll dive into all of the possibilities in this post. But first, here are some catch-all answers for the tl;dr version.

The Short Answer

If you aren’t sure where to place the code snippet you’ve found on the internet, choose one of the following plugins to quickly and easily add the code to your site in an upgrade safe way.

PHP

If adding PHP code, use the Code Snippets plugin.

CSS

If you are adding a CSS snippet to your site, WordPress now has a built in custom CSS panel inside of the Customizer. Alternatively, you can use the Simple Custom CSS and JS plugin if you need a few more options.

JavaScript

If you’re looking to add a JS snippet, use either Custom JavaScript Editor or Simple Custom CSS and JS.

 

The Detailed Answer

What you should not do.

So where it the “best” place to put custom code? Well, it depends on a few different variables – mainly related to your theme. But let’s start with some of the things that you should not do in order to get an understanding on why doing it the correct way is important.

1. You should not edit WordPress core files.
2. You should not directly edit plugin files, like WooCommerce.
3. You should not edit your theme’s files if it is a pre-made theme you have downloaded or installed from somewhere.

The main reason the above three items are important to avoid is that WordPress, plugins, and your theme will receive updates and your changes will be lost. Furthermore, you could interfere with something that was not meant to be changed or edited – causing a multitude of possible problems.

What you should do.

If you are using a custom theme that was built for your site and will not be receiving updates, then you can add custom code directly to the theme. This is one of the best options for this scenario as the files are already being loaded on your site.

If the theme you are using will be receiving updates, and you aren’t using a child theme – then you can create a child theme and add code directly to your child theme. Here is a guide on creating child themes. If you are using a child theme already but you created it, the same applies.

If your theme and child theme are pre-made and could receive updates, then you need to create a grandchild theme. Okay, that’s not true – there is no such thing as a grandchild theme :). If you are using a pre-made child theme, then you can’t edit those files directly either.

So you now know if you can add custom code to your theme files or not, but where should you add your snippet? PHP snippets will generally go in the functions.php file, and CSS can go in style.css.

Did you fit into the last category of needing a grandchild theme? Then I would recommend using one of the plugins I listed at the beginning of this article. Regardless of your theme though, there is another option.

You can always create your own custom plugin! Creating a plugin may sound intimidating, but it’s actually quite simple. In my opinion, this is the best option in a lot of cases. You could create a plugin to house all of your custom snippets. This makes it easy to keep track of, and you can deactivate the plugin when doing some debugging trying to figure out why something isn’t working correctly (in the event that a snippet you got off of some random blog, like this one, causes problems).