BW Manufacturing

One thing I learned early on from my colleagues is to try not to directly modify public plugins because once they’re updated you run the risk of all your custom code being overwritten! Case in point, WooCommerce is a plugin that has a lot of template files that could be pretty easily modified to suit your needs for a project, but I argue that you should instead go a different route.

Just as WordPress itself has a ton of hooks readily available to use for any customization to a theme you may need to make, WooCommerce comes with its own giant bundle that you can browse here. There are many benefits to using these over direct plugin modification. Here are a few:

All of that aside, it’s a good thing there are so many hooks we can use for WooCommerce because there’s a lot bundled into the plugin that you may like to change or remove. There are other plugins that can do this, but then that means you have another plugin installed and you’ll have to keep track of what it’s for and so on. Another thing we tried to avoid when possible is hiding with CSS. Sometimes it’s a perfectly acceptable option, but if you can stop the code you don’t want from rendering at all then that’s always the preferred option.

In our case usually the design we wanted to go for didn’t fit what WC offered out of the box whatsoever. This goes for the catalog view, single Product view, cart, etc. so I had to get familiar with how to make these modifications pretty quickly. One of my favorite series of resources I’ve used many times over the years is the WooCommerce Visual Hook Guide from Business Bloomer. This article gives a good idea of the types of things you may be able to accomplish. Unfortunately it’s been a long time since it has been updated, but most of the information is still good which gives you an idea of how great hooks are to begin with!

For this project in particular it starts with removing all of the things we don’t want. You can use the remove_action function to remove pieces of WooCommerce you may not need. For example remove_action(‘before_shop_loop’, ‘woocommerce_result_count’) will remove the woocommerce_result_count callback from the before_shop_loop hook and we can omit the results without having to resort to styling.

Once we had all the items removed that we didn’t want then we can follow up with the add_action function to then pass our own functions with the code we do want to display. To keep this tidy and organized I like to create a wc directory in the theme and then other sub directories within that pertain to what I’m modifying so maybe it’s single_product or shop_loop. You can then use the get_template_part WordPress function, for example, to load your own custom code!

I didn’t cover the add_filter or remove_filter functions, but they’re very similar. You can kind of think of it as filters are for modifying what’s there (button labels, titles, existing functionality like Product tabs) and actions are there for you to insert your own unique code or remove code entirely.

Overall I hope this made you a believer in using hooks provided to you not only for WooCommerce, but WordPress in general. It’s a real game changer once you become familiar with them since you’ll see use cases continually over your development journey with WordPress as you build more and more websites.