Tutorial: How to Correctly Modify Your WooCommerce Website

In this post, I will go over the pros and cons of using the WordPress Code Snippets plugin, WordPress child theme, and WooCommerce templates for modifying your WooCommerce website functionality.

Although there is a vast majority of WordPress plugins, themes, and WooCommerce extensions out there to help you with this task, sometimes you need a special feature that just doesn’t happen to have a public solution yet. This situation requires you to develop the feature by yourself, or hire a developer to do so.

There are several ways to develop WooCommerce features and modify your website. The following methods that I am going to describe in this post (WordPress Code Snippets plugin, WordPress child theme, and WooCommerce templates) are the most popular ones.

* The image above is part of the woocommerce.php code. Don’t worry – we are not going to make any coding in this post.


WooCommerce (and WordPress) modifications can be roughly divided by two approaches – PHP and CSS modifications. Choosing the best approach varies between modification needs, and both can sometimes achieve the same result with similar costs.

However, when deciding on an approach to apply, there are some methods and guidelines that you should follow by to correctly modify your WooCommerce website.

For making PHP modifications, you can use the following methods:

  1. Create WordPress hooks via the Code Snippets plugin or by creating a WordPress child theme.
  2. Make direct changes to the WooCommerce core files via WooCommerce template files.

For making CSS modifications, you can use the following methods:

  1. Use a CSS plugin such as Simple Custom CSS or Jetpack.
  2. Create a WordPress child theme.

Important: In any case, never make changes to your WordPress plugins, themes, or WooCommerce core files. When WordPress will automatically update your site, modifications to these files will be overridden by new releases of them.

Code Snippets Plugin

Code Snippets plugin allows you to add WordPress Hooks (also known as filters and actions) to your website, which allows you to modify or add to the functionally of WooCommerce (and WordPress) using standard practices.

Both WooCommerce and WordPress have many tags (similar to placeholders) throughout their code which points to specific functionalities within their product. This allows developers to add (action) or modify (filter) these functionalities in a safe manner and not be overridden by future plugin/theme releases.

For example, the WooCommerce tag woocommerce_single_product_image_html is in charge of the product’s image functionality in a product page. It controls which product image will we see and what happens when we click on it. For developers, this tag gives the possibility of using hooks to modify the default functionality of the product’s image.

The tag’s default behavior when clicking on the product image is to open the product’s image URL. Using hooks, we can alter this functionality and have clicking on a product’s image open a specified link instead – for example in affiliate websites, the product URL.

A con for using Code Snippets (and in general, WordPress hooks) comes when you want to add or modify a functionality which doesn’t have a tag. However, looking at the number of tags available, this doesn’t seem like a likelihood scenario.

Another con to notice is that the Code Snippets plugin isn’t meant to manage CSS modifications, thereby you’ll be required to manage CSS modification in another way.

WordPress Child Theme

WordPress child theme is a way to handle both PHP modifications via WordPress hooks (similarly to the Code Snippets plugin, however managed via the child theme’s functions.php file), and CSS modifications (via the child theme’s style.css file).

Unlike the Code Snippets plugin which allows you to create and manage hooks in an easy to use interface, disabling a hook for example in a child theme would require you to edit the entire functions.php file and put the hook inside a comment block or delete it from the file.

Another con, similarly to the Code Snippets plugin, comes when you want to add to or modify a functionality which doesn’t have a tag. However, similar to the templates method, you can make direct changes to the theme’s PHP files by copying them to your child theme and WordPress will use these files rather than the ones in your parent theme. In the case of functions.php – it is loaded in addition to the parent’s functions.php.

Just to clarify – similar to the Code Snippets plugin, using your child theme’s functions.php you can control both your theme, WooCommerce plugin, and WordPress functionality using hooks. However, using child theme templates you can only control your theme functionality. Please continue and read the next section to understand more about the pros and cons using this child theme’s template method.

If you already have a third party child theme installed (e.g. Storefront Boutique), it ins’t possible yet to create a grand child theme. Also, if you’ve already created a child theme but now want to replace your parent theme – you will need to create another child theme which points to your new parent theme.

WooCommerce Templates

WooCommerce templates are duplicates of the WooCommerce plugin core files. We can choose to run a template file over a core file and modify it without making any change to the core file.

On the one hand it is a pro since it is as if we are modifying the core files, but in a safe way and an update to the WooCommerce plugin won’t override our changes. On the other hand it is a con as updates are important as they fix security issues, bugs, and provide more features which aren’t going to be available for us.

Unlike the Code Snippets plugin and WordPress child theme con regarding not being able to modify or add to a functionality which doesn’t have a tag, template files allows us to make direct changes to the WooCommerce core files rather than use WordPress hooks.

Another pro for templates is making quick-and-dirty changes. Generally speaking, modifying the core files to receive a result is faster than creating a hook functions.

Best Practice

Since the Code Snippet plugin has more pros compared to the other methods described above regarding PHP modifications, and since its con is unlikely to rise in most situations – the Code Snippets plugin is my best practice for PHP modifications. Since the plugin doesn’t manage CSS modifications, I would recommend using a CSS plugin such as Simple Custom CSS for that task.

In the next post we will get our hands dirty, and I will demonstrate how to link your product image to an affiliate URL by changing the product image default functionality using the Code Snippets plugin, a child theme, and WooCommerce templates.

I hope this post will help you in creating better and lasting changes to your WooCommerce websites. Let me know in the comments below if you have any questions or feedback.

Published by

Yaniv Friedensohn

I am a Codeable developer (only top 3% of developers are accepted) specializing in creating advanced WordPress and WooCommerce solutions for clients worldwide. Projects include developing a custom shopping workflow and adding functionality to existing plugins. You can contact me at [email protected]