How to add custom code to your WooCommerce/WordPress site the right way

When it comes to working on a WooCommerce store, you’ll most likely, like the majority of us, reach a point where you need something custom — something that there is no actual default setting for in WooCommerce core, or something that there is no plugin developed for. Your majestic Googling skills eventually lands you the necessary code needed to make the desired change/s, now all you need to do now is, well .. add the code. And, to do this, you’ll need to know the right place and the correct way to add the custom code to your WooCommerce/WordPress site.

Sure, you can add the code to your theme’s functions.php file, or the style.css file if it’s a CSS change, but there are several reasons to NOT do that, such as:

a) is not a viable solution as these code changes will be wiped entirely when you update your theme (and you’ll need to then re-add the code)
b) a tiny mistake, like a stray character in the code can completely break your WordPress/WooCommerce site and make it inaccessible to both you and your site visitors
c) adding multiple code snippets to either one of these files will eventually make it difficult to manage

This article will show you how to add custom PHP/CSS code to your WordPress/WooCommerce site in an upgrade-proof way that isn’t going to break your site.

The tools

1. PHP code = Code snippets plugin

The Code snippets plugin makes it super easy for anyone, even non-techie folks to add custom code snippets to their WordPress/WooCommerce sites. It provides the user (you), with a clean graphical user interface (GUI), where you can add/manage snippets and run them on your site as if they were in your theme’s functions.php file, and enable/disable them as if they were normal plugins. It includes fields for a snippet title, visual editor-enabled description, tags, and a full-featured code editor.

Uhm! Code snippets use the eval() though …

Yes, it does! And, yes, the eval() language construct is very dangerous because it allows execution of arbitrary PHP code (see #)

However, keep in mind that the only code which is being passed to eval is code which you yourself (or your trusted source) provided, so it is really just as dangerous as the person who is using it.

And with that, a big, fat warning:

Only use code from reputable sources!! If you happen to come across something that doesn’t look right, then skip along and don’t use it — do your research first and make sure the code is clean before adding it to your site.

I’m sold! How do I go about adding my code?

1. Download the Code snippets plugin (https://wordpress.org/plugins/code-snippets/) and install it
2. A new “Snippets” menu will be added to your site — select the “Add new” option you see there
3. The following screen will open up — add your title, the code, and the description as you see here:

4. Click on “Save changes and activate”

That’s it!

Some extra gravy

Code snippets have this really neat feature (imagine a safety net), where it will automatically detect any syntax errors in the code and immediately deactivate it, preventing your site from breaking and becoming inaccessible.

2. CSS code snippets = The Customizer

If you are adding a CSS code snippet to your site, WordPress has a built-in custom CSS panel inside of the Customizer

Here’s how we’ll add a custom CSS code snippet via the customizer:

1. Open the customizer view from your dashboard (appearance > customize) and select “Additional CSS”
2. Add your CSS code, and click the blue “Publish” button in the top-right of the Customizer

Done!

What about child themes though?

Yes, you can totally create the child theme to preserve your customizations! There’s a fantastic tutorial here that outlines how that is done. Alternatively, use this free plugin to create a child theme: https://wordpress.org/plugins/child-theme-configurator/