What is the best way to add custom PHP / HTML / CSS / JavaScript (JS) code to your WooCommerce (WordPress) website?
Whether you’re new to using custom code snippets to achieve the ultimate customization for your website or not, the method presented in this guide is the best way to do it.
If you add custom code snippets to your website by following this method, your added code will be:
- Easy to add, use, modify directly from the WordPress admin panel.
- Easy to activate and deactivate each snippet of code at will, without deleting it.
- Easy to keep your custom code separate from your plugins and/or theme or child theme.
- Most importantly, your code will be well organized, well purposed and easy to maintain/update when needed.
Let’s jump right in.
The Best Way to Add Custom Code to Your WooCommerce Site
Out of the many ways you could add custom code, using the Code Snippets plugin is the best way. You can use it to add all types of code used by WooCommerce and WordPress: PHP, HTML, CSS and JavaScript.
Let’s add a piece of code to our website in 3 easy steps.
1. Install the Code Snippets plugin
Head to your WordPress Admin panel, to Plugins, to Add New. Search for Code Snippets.
The first result that comes up is likely the plugin we’re looking for. Hit Install Now and then Activate.
In your admin panel, a new tab will have shown up called Snippets. I recommend going to Snippets > Settings and adjusting to your personal preference.
Personally, the only modification I make is I like to disable the option Highlight all instances of a currently selected word. I find it slow and it makes it harder to edit the code inside the editor.
2. Check the Snippet examples that the plugin comes with
Next you should go to All Snippets and have a look at the 5 code examples that come as standard, but are disabled by default.
The first snippet, Example HTML shortcode uses PHP code to add some HTML somewhere on your site.
The second snippet, Example CSS snippet shows how you can add CSS code also by using PHP.
The third is a good example for adding JavaScript Code, and the final two are pure PHP (they edit content on your site by using WordPress style hooks called actions and filters).
The easiest way to add your first piece of code using the plugin is to go to All Snippets after you’ve looked through them, and hit Clone on the one that has the type of code you’re looking to add.
3. Add your own custom code
After cloning the snippet example that most closely resembles the type of code you’ll add, you should go back to All Snippets and edit it.
Give it a name that describes what your custom code will do, and optionally you can add a more detailed description and/or tag below.
For most pieces of code that change things on the front-end of your website (the part that site visitors and shoppers see), you should select Only run on site front-end.
Finally, remove the “example” code and add your own custom modifications, as per your own code or as found in guides such as those here on Woolearnr.
Here is an example of a PHP code snippet that adds a new in label for newly published products inside your WooCommerce Catalog and Single Product pages, as per our guide.
Note: it is not recommended to add additional empty newlines at the beginning or end of your code snippet, as I’ve found these can cause PHP errors.
The plugin expects the beginning and end of your snippets to look like the examples that we’ve clones at Step 2.
Alternative ways to add custom code to WooCommerce
There are many ways to add custom code to your site, but the one above is the best way for most cases. You will be able to do most things using the above plugin.
Perhaps the only notable exception is when editing theme templates, for which you’ll still need to use a FTP Client or File Manager to edit those files directly, however for now this is beyond the scope of a custom code snippet.
Additional methods include adding the additional code to your theme or child theme.
For PHP, HTML and JavaScript code, you’d use similar styles of coding as the example snippets above, but you’d insert them inside your functions.php file using the Theme Editor inside WordPress (Appearance menu).
For additional CSS code, you’d use the theme Customizer (also inside the Appearance menu), and then the Additional CSS tab.
But if you opt to use these methods and keep adding custom code to your site, you’ll eventually end up with a very hard to manage, long file with a lot of custom code.
You won’t be able to keep your modifications separate, and you won’t be able to disable a piece of code without deleting it from your website (and hopefully saving it somewhere else first in case you’ll need it again in the future).
The Code Snippets method solves all these problems and allows you to easily add, edit, maintain, and enable/disable various pieces of code at will. That is why it’s the best way.
Let’s put this guide to use!
We hope you enjoyed and found useful help inside this guide!
We suggest heading over to our blog and looking around for all the various code snippets we provide that you can use to easily customize your WooCommerce site fast!