WordPress and WooCommerce – how to add custom code?

How to add custom code to WooCommerce and WordPress
Author Bartosz Gajewski
Updated:
2020-12-11
Reading time:
5 minutes read
Category:
Blog

One of the greatest things about WordPress and WooCommerce is that you can modify and customize your website in whatever way you want. You can use numerous plugins, different themes, or extensions. You can even write your code to create a solution exactly for your needs. In this article, I’ll show you three ways to add custom code to WooCommerce and WordPress.

Three ways to add custom code to WooCommerce and WordPress

Which method should you use?

All three methods are working, but they differ in terms of complexity and safety. I will explain each of them in detail, but if you don’t know which solution to use, please read this paragraph first.

If you are a complete beginner in WordPress and the thought of adding custom code scares you, you can choose a plugin to add a custom code to WooCommerce and WordPress. This is the simplest solution, which doesn’t require any code knowledge skills. However, please have in mind, that those plugins may be the target of attacks on your website.

If you’re looking for the safest solution and you don’t want to be dependent on your theme, choose Must Use Plugins. Adding Must Use Plugins seems complicated, but if you learn this functionality, adding another custom code will be very easy. I can also add that this is the way recommended by our developers.

If creating Must Use Plugin is a little too much for you, you can use your child theme functions.php file. It’s also o good solution, but be careful and follow a few rules. Most of all, remember to add your code to a Child theme.

Add custom code to WordPress with a plugin

I don’t think I’ll surprise anyone with the fact that you can use a plugin to add custom code to WordPress. There are quite a few of them in the WordPress repository. In this article, I will show you how to use the Code Snippets plugin.

Easy solution…

This solution is getting more and more popular. Why is that? First of all, it is the simplest one. In most cases, all you have to do is just install an additional plugin, paste the code and everything is ready. It doesn’t require any knowledge of the code and paying additional attention.  What’s more, all the plugins are free and available in the WordPress repository.

Its simplicity makes it an extremely tempting solution for beginner WordPress users. I get it. If you are a complete rookie, probably using a plugin to add your custom code is the right move. Unfortunately, this solution has its disadvantages.

…but not safe.

Have in mind that it’s not the safest solution. By their specific characteristics, plugins like Code Snippets may be the target of attacks on your website. If you want to use this option, remember to use regularly updated plugins, and additionally secure your website. However, it will be best if you’ll use one of the other solutions presented in that article.

Enough with all the descriptions and theories. It is time to move on to a proper guide.

How to add a custom code with the Code Snippets plugin?

To add a new snippet, just go to Snippets in the WordPress menu and click the Add New button. You can also use the Add New link in the WordPress menu directly.

add new snippet in Code Snippets plugin

On a new page, you can add your snippet. In this example, I’ll use the custom code from my earlier article on How to add a United Arab Emirates city in WooCommerce.

Enter the Title of your custom code. It should be self-describing so that you will be able to easily determine how it works. You can add a Description for additional information.

new custom code in Code Snippets plugin

You can also add some tags, and priority. If everything is complete, save changes and activate the snippet.

Save new custom code in Code Snippets plugin

You can do it on the same page or in the All Snippets list.

Activate new custom code in Code Snippets plugin

If the snippet is correct, your custom code should work well and be active on your website.

Add Custom Code to functions.php in WordPress

This is certainly the most popular solution for adding custom code in WordPress. In many articles or documentation, you can find information to add a certain code to the functions.php file of your theme. How to do it? It’s not that complicated.

Remember to use Child Theme

We strongly recommend adding your custom code to the Child Theme functions.php file rather than to your original Theme. There are two main reasons to do that. If you add your custom code to the functions.php file of your regular theme, all the changes will be lost with each update of the theme. What’s more, it’s much more likely to crash your website by making a mistake in the code or deleting an important element of previously added code.

If you want to learn more about using Child Themes in WordPress, check out the official Theme Handbook.

Remember that adding code to the functions.php file of your theme will make you dependent on it. If you decide to change your theme or debug an error on another theme, the code added earlier won’t work. That’s why this solution is best to add changes to your theme rather than adding changes to the website functionality.

How to add Custom Code to functions.php in WordPress?

Add The Code To Your Theme Functions.php From WordPress Dashboard

Just go to Appearance > Theme Editor. Make sure that you are editing your Child Theme, and select Theme Functions (functions.php).

Child Theme functions.php file

There you can paste your custom code.

Add Custom Code to functions.php in WordPress

Make sure there’s no closing ?> tag and Update File.

Add The Code To Your Theme Functions.php From cPanel or FTP

To do that, use File Manager of your cPanel or FTP client. In both situations go to public_html folder > [WordPress Folder] > wp-content > themes > [theme folder] > functions.php.

Add the Custom Code in Functions.php from FTP client

Open and edit that file. Scroll down the way to the end of the file, paste the code and save it. This method is better than using the WordPress Dashboard. If anything in the code is wrong and it’ll cause any issues on your website, it can easily be reverted.

Add Custom Code using Must Use Plugins

Must Use Plugins, or simply mu-plugins, are plugins installed differently than regular plugins. They are installed in the wp-content/mu-plugins directory. Must Use Plugins don’t need (and cannot) be activated. They cannot be deactivated either. Plugins are active and work as long as they are in the mu-plugins directory.

Must Use Plugins are an ideal way to add additional functionality related to the site, things that should always work, even when you change your theme. It’s also a very secure solution. Adding Custom Code using Must Use Plugins is recommended by our developers.

How to add Must Use Plugin?

As you will see, adding Must Use Plugin is not that difficult. First, in the wp-content directory  create a new mu-plugins folder. You can use File Manager of your cPanel or FTP client. In the new directory, create a new file. I added just simply custom_code.php file. Open the file for editing and add your custom code. Remember to start with <?php, but don’t add closing ?> tag. Your code should look like this:

<?php

//your custom code

Save the file and Must Use Plugin should be active and working. Basically, you can use the mu-plugins like an old functions.php to add custom code to WooCommerce and WordPress. You can add many or even all of our snippets in one file.

You can find your Must Use Plugins in the WordPress Dashboard. Just go Plugins > Installed Plugins > Must-Use. It’ll be just the name of the file that you have added.

Must-Use plugin in WordPress

If you want to include additional information about the custom code in WordPress, you can add a typical plugin comment at the beginning of the file, with information about the name, author, and version:

/*

Plugin Name: My custom code

Description: Functions extending the capabilities of my website

Version: 1.0

Author: Bartosz Gajewski

*/

With that additional comment, your mu-plugin should look like this:

Must-Use plugin in WordPress with additional information

Summary

I hope that no matter which method of adding custom code to WooCommerce and WordPress you choose, this article has been useful for you. The suggestions presented in this article should help you not only to add custom code, but also reduce the risk associated with adding it.

Comments
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Check out our case studies

Dream Home Story
Dream Home’s Story

Read Octolize Case Study about Dream Home – a provider of furniture and products for the home and office.

2 minutes read
Vitrek’s Story

Read Octolize Case Study about Vitrek – a provider of innovative global solutions for High Voltage Test and Measurement.

2 minutes read
EnglishSpeakingMum’s Story

Read Octolize Case Study about EnglishSpeakingMum – Polish dedicated and involved parenting blogger.

2 minutes read

Join over 10,000 subscribers

Stay up to date and get WooCommerce tips & Octolize news right to your inbox!