WooCommerce Developers Tips: Top 5

/ Wordpress / by Paul Robinson / 0 comments
This post was published back on May 29, 2013 and may be outdated. Please use caution when following older tutorials or using older code. After reading be sure to check for newer procedures or updates to code.

I’ve recently been working on a WordPress theme which also involved adding a custom theme for the popular E-Commerce WordPress plugin WooCommerce. So to that end I’ve created a list of the 5 most helpful tips I can think of for those looking to start developing themes for the WooCommerce plugin.

Work With WooCommerce

This has to be one of the most important tips. Unless completely necessary to break the rule (and it generally isn’t), work with WooCommerce to help prevent problems when upgrading. Try to do everything through the many actions & filters available all throughout WooCommerce, and if you can’t? Copy the template files located in the plugin folder to a ‘woocommerce’ folder located in your theme. Just remember that when changing the layout it is advised to keep the do_action() calls you see so that any extensions you may add will work correctly.

Here is an example of using WooCommerce’s actions. I used this for a previous project to alter the breadcrumbs for use with Twitter Bootstrap.

You can see we create a function that is ran by WooCommerce and since we can’t replace WooCommerce’s default action we just remove it after adding our own. Simple. This can become pretty unsightly if you place all of these in your functions.php file though so with that, let’s move onto tip 2.

Separate Your Code

Keep your code neat by separating it into files, then include them into your functions.php file. There are lot’s of themes doing this, but I see them using the base PHP function require_once() that’s perfectly fine. However I prefer to use this method instead:

This will locate the template file, and then load it using require. However it has the added benefit of being able to be overridden by a child theme.

Change Variable Product Text

This is less of a tip & more of a ‘look here’. I’ve seen a lot of comments around the web asking how to change the ‘From:’ text on a variable product. It’s actually quite simple & can be done using one of WooCommerce’s many hooks (actions/filters). In particular the woocommerce_get_price_html filter. So it might look something like:

Add Theme Support

Don’t forget that as of WooCommerce version 2 you now need to declare theme support for WooCommerce to prevent a message from showing to the user in the WordPress admin. To do this is simple:

It seems like a really simple tip, and it is. It is amazing how many times I have seen it forgotten though. Finally onto my last tip.

Replacing WooCommerce Core JavaScript

This is a tricky one. There are many times I’ve been faced by the prospect of having to alter the JavaScript in WooCommerce due to a feature needed in variable products. Whatever the reason here is a way I’ve found to replace the JS file with your own but not risk (as) horrible consequences at upgrade time.

It may seem simple but just dequeue their JS & enqueue your own copy. Just like this:

Use the same tag for dependencies sake and you are good to go. Should an upgrade occur, the worst that can happen is it stops working. At which point you can quickly comment out your de/enqueue & debug the problem. No worrying about losing your changes (if you didn’t backup) since your modified file is safe in your theme folder.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

I'll keep your WordPress site up-to-date and working to its best.

Find out more