How to Get Started With WooCommerce Programming

Throughout that book, we mostly avoided using any code. We believe that anyone is able to build a great WooCommerce site.

But many of you are developers and are keen to dive into the WooCommerce code. In this exclusive tutorial, taken from WooCommerce Explaind, we’re going to show you some WooCommerce programming basics. 

Your First WooCommerce Code Change

Let’s tackle our first WooCommerce code change. I’d like to add some text to the “Cart” page, right underneath the mean heading. This image shows where I’d like to add the text:

There is no way to do this using the WooCommerce admin area, so I’m going to look at the plugin files. We’re going to look for a logically named file called cart.php inside our WooCommerce templates folder.

• Log into your WordPress site files.
• Go to /wp-content/, then /plugins/.
• Open the /woocommerce/ folder, then open /templates/ and finally /cart/.
• Select the file called cart.php and open it in your text editor.

• This next image shows the first 40 lines of the cart.php file:

• There is a lazy way to add our text to the Cart page. We could simply write “Hi there” directly into the file, as on Line 17 below:

• This lazy change really does work. If you save the cart.php file with this new text, you can refresh your “Cart” screen and it does show on your site.

However, this lazy approach has some significant drawbacks. If you update WooCommerce, it will remove your code change. You could avoid this by copying the cart.php file to your main theme folder.

Nonetheless, my favorite (and the most elegant) approach is to use a hook. This right here, woocommerce_before_cart, is a hook. This allows me to run some code in that spot.

In this tutorial I’m going to recommend that we create a plugin to put our text here.

Yes, you could write this code in your theme’s function.php file. However, if your theme ever gets updated or changed, then your code is gone. Another advantage of using a plugin is that it’s very easy to activate or deactivate from the “Plugins” screen inside WordPress.

This is not a book about writing WordPress plugins, so we’re going to use a helpful plugin: Pluginception. Pluginception allows you to easily create a new blank plugin in WordPress.

Keep in mind that adding code for WordPress can easily cause a white screen of death, particularly as you’re testing your code. You really don’t want to do this on your live site. So, please use the testing site you’ve been working on throughout this book.

• Go to “Plugins” in your site. Search for and install “Pluginception”.
• Under the “Plugins” link, you’ll see a “Create a New Plugin” link.

We really have two options here. Our first option is to create one plugin for all of our code snippets. We could call it our WooCommerce plugin. The disadvantage is that if you ever need to deactive part of the code, you have to edit the plugin. If we make a different plugin for each change we want to do, then it’s easy to turn them on or off individually. Sometimes people have a fear of having too many plugins and slowing down WordPress with it. In reality, the number of plugins has nothing to do with WordPress’ speed. They key to a fast site is the quality of code in your plugin. If you have one terribly-written plugin, it will slow everything down, but if you have 10,000 excellent plugins your site should not be slow at all.

• On the “Create a New Plugin” screen, the only required field is the “Plugin Name”. All of the other fields are optional.
• Click “Create a new plugin and activate it!” when you’re finished.

• WordPress will now show you a warning. Read this carefully. What we’re about to do is definitely not wise on a live site, but we’ll be fine on our test site.
• Click “I understand”.

• To prove that it is there, I will go to plugins, and sure enough you can see our newly created plugin.

• Inside the plugin editor, I’m going to write the code for our plugin:

First, we define a function. We need to give the function a unique name that no-one else will ever use, so I’m using my personal name: patrick_woocart_prefix. This function simply echoes “You have been eaten by a Grue” which is a joke taken from Zork, an old computer game: https://en.wikipedia.org/wiki/Zork.

Second, I will call the function add_action. I am taking the woocommerce_before_cart action that we saw earlier on Line 16 from our cart.php file. Next, I’m including the function we just defined.

• Click “Update file”.
• Visit the front of your site, and you’ll see the new text on your Cart screen:

You can now use this plugin to write anything you want. It could be an announcement, a special offer, or anything else that you wish. To remove this text, you can simply disable the plugin.

This approach is a personal preference, and I know some other WordPress developers disagree. However, I really prefer to create small plugins with specific tasks rather than one giant plugin that has multiple purposes.

If you enjoyed this introduction, check out WooCommerce Explained, the comprehensive introduction to WooCommerce.