WooCommerce Developers Tips: Top 5
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
function el_breadcrumb() { $defaults = apply_filters( 'woocommerce_breadcrumb_defaults', array( 'delimiter' => ' <i class="icon-chevron-right"></i> ', 'wrap_before' => '<nav class="row"><div class="span12 woocommerce-breadcrumb" itemprop="breadcrumb">', 'wrap_after' => '</div></nav>', 'before' => '', 'after' => '', 'home' => _x( 'Home', 'breadcrumb', 'woocommerce' ), ) ); $args = wp_parse_args( $args, $defaults ); woocommerce_get_template( 'shop/breadcrumb.php', $args ); } add_action('woocommerce_before_main_content', 'el_breadcrumb'); remove_action('woocommerce_before_main_content', 'woocommerce_breadcrumb', 20); |
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:
|
1 |
locate_template('inc/woocommerce_functions.php', true, true); |
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:
|
1 2 3 4 5 6 7 |
function el_variable_price_filter($price) { return str_replace('From:', 'From', $price); } add_filter('woocommerce_get_price_html', 'el_variable_price_filter'); |
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:
|
1 |
add_theme_support( 'woocommerce' ); |
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:
|
1 2 |
wp_dequeue_script('wc-add-to-cart'); wp_enqueue_script( 'wc-add-to-cart', get_template_directory_uri() . '/js/add-to-cart-variation.js' , array( 'jquery' ), false, true ); |
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.
