Amber Weinberg: Freelance Web Developer specializing in semantic WordPress, Mobile, CSS and HTML5 Development

The Blog

Developing Custom WooCommerce Themes

Posted on 04/11/12 in blog, development about , , , , ,

I recently had a project that required working with WooCommerce. WooCommerce is a free eCommerce framework from the makers of WooThemes. I’ve never been a fan of working with premade themes or frameworks for WordPress, as the devs tend to code completely different than I do and it’s frustrating to have to learn someone else’s style. However, I’ve been a fan of WP eCommerce for simple cart needs, so I thought WooCommerce would be just as easy to use, but a bit more robust.

Turns out, as usual, things were quite a bit more difficult. WooCommerce doesn’t have great documentation, and a lot of what they do have is incorrect. Also, searching around Google, while always very, very helpful when trying to do crazy custom things in WordPress itself, didn’t yield very much in tutorials or help for WooCommerce. Bleh, me thinks.

Installing WooCommerce is just as easy as installing any other plugin, so I’ll skip the basic how-tos and jump right in to some of the more difficult items.

Templating System

In order to get custom templates for your cart, you’ll need to copy WooCommerce’s template files from the plugin to your theme. However, the information on their website is quite incorrect, or at least didn’t work the way they said it would.

On their site, they mention you need to move the files to yourtheme/woocommerce/templates in order for the cart to automatically pick up the new files. I tried this and nothing. I tried yourtheme/woocommerce and nothing. Finally, I just dumped all the template files directly into yourtheme/ and it worked like a charm.

Show Cart Details

My client wanted a little cart amount and total in the header of their site, which is something very basic to want on an eCommerce site. However, looking through their documentation again proved fruitless. The one article they had on the subject didn’t work, which was:

// Ensure cart contents update when products are added to the cart via AJAX (place the following in functions.php)
add_filter('add_to_cart_fragments', 'woocommerce_header_add_to_cart_fragment');
 
function woocommerce_header_add_to_cart_fragment( $fragments ) {
	global $woocommerce;
 
	ob_start();
 
	?>
	<a class="cart-contents" href="<?php echo $woocommerce->cart->get_cart_url(); ?>" title="<?php _e('View your shopping cart', 'woothemes'); ?>"><?php echo sprintf(_n('%d item', '%d items', $woocommerce->cart->cart_contents_count, 'woothemes'), $woocommerce->cart->cart_contents_count);?> - <?php echo $woocommerce->cart->get_cart_total(); ?></a>
	<?php
 
	$fragments['a.cart-contents'] = ob_get_clean();
 
	return $fragments;
 
}

This actually ended up completely breaking the site if I recall correctly. Fortunately after getting help from a dozen other developers, including one from WooCommerce itself, I was able to get the correct snippet (and they updated their site to reflect this as well)

<?php global $woocommerce; ?>
 
<a class="cart-contents" href="<?php echo $woocommerce->cart->get_cart_url(); ?>" title="<?php _e('View your shopping cart', 'woothemes'); ?>"><?php echo sprintf(_n('%d item', '%d items', $woocommerce->cart->cart_contents_count, 'woothemes'), $woocommerce->cart->cart_contents_count);?> - <?php echo $woocommerce->cart->get_cart_total(); ?></a>

Custom Category Loops with Category Images

Another search around the web and some quick coding and I was able to get a list of categories with their category image (a Woo function) to display on the homepage in the slider.

<?php $all_categories = get_categories( 'taxonomy=product_cat&hide_empty=0&hierarchical=1' );
 
					foreach ($all_categories as $cat) {
 
						//print_r($cat);
 
						if($cat->category_parent == 23) {							$category_id = $cat->term_id;
							$thumbnail_id 	= get_woocommerce_term_meta( $cat->term_id, 'thumbnail_id', true );
							$image = wp_get_attachment_url( $thumbnail_id );
							echo '<li><a href="'. get_term_link($cat->slug, 'product_cat') .'"><img src="'.$image.'" alt="'. $cat->name .'"/><div>'. $cat->name .'</div></a>';
						}
					}
?>

WooCommerce Documentation

All in all, I think their documentation could use a healthy dose of updating and reorganization. They have their front-end code and basic functions which are separated into four different sections: Codex: Theming, and General: Snippets, General: Theming and General: Frontend – which all of these should really be together under one area.

They do have a free forum, but it wasn’t much use after searching around. I’m not sure if having a paid membership would help here, but since the client wasn’t up for paying for that, it wasn’t an option I was able to check out.

Final Thoughts on WooCommerce

It was a bit challenging finding the correct files for changing items the client wanted changed, particular the titles and headers. The files are split apart quite strange

I think WooCommerce has some potential, and I might be willing to check it out some more if I have time, but I’m also contemplating trying Jigoshop, which is based off very similar code, but supposedly works a lot nicer and has better support. We’ll see…

Amber Weinberg specializes in clean and semantic HTML5, CSS3, responsive and WordPress development. She has over 15 years of coding experience and is super cool to work with. Amber is available for freelance work, so why not hire her for your next project?

Like this post? Please share it on Twitter or Facebook.

  • I use my own base theme, called Hijinks…there’s a link to it in my “Extras” section

  • Matthew Oliveira

    That’s super helpful, thanks Amber, I’ll take a look. I’m a Drupal dev and have only done a couple WordPress sites, so I’ve yet to build up my own base theme yet.

  • What download button? I see no such thing. Please direct me to the page where I can sign up for the free forum. Thanks

  • What download button? I see no such thing. Please direct me to the page where I can sign up for the free forum. Thanks

  • I can not seem to make a new thread. It just takes me to make a support ticket and when I click that link the page does not load.

    All I want to do is use an image for the “Add to cart” or at least change the current css. I have tried and tired to overwrite it in my style.css, but nothing ever changes. I used firebug and was able to theme it, copying that code to style.css did nothing though…

    I like this plug-in, but some of the simplest things to do with it, are in fact the hardest.

  • Jesse

    Heads up, everyone. The latest version of WooCommerce (1.6.1) eliminates the loop-shop.php template. If you’ve made modifications to this file and saved it to your WordPress theme, those modifications will go kaput with this upgrade.

    This was spectacularly lousy timing for me. I just finished a ton of work for a client using WooCommerce, and I made a ton of customizations to the loop-shop.php file.

  • Yeah, I had to make some heavy modifications to some of my plugins as well. It’s painful and annoying, but part of the price I guess of being involved with a young and dynamic project like WooCommerce. And as lousy as it is to spend the time fixing code after a big update like 1.6, once I’m done with it I can honestly say that each time the core code is always better, and my plugin code is always better for it. So given the option of WooCommerce continuing to push forward with new and ever better releases, or stagnating due to backwards-compatibility concerns, I’ll take the new and better releases. Woo!

  • shavindra

    What did they replace it with?

    Loop-shop cause me a lot of headache… and did take a lot of time to figure how to manipulate it… but once I got hang of it after so much time it manage to get it behaving just the way I wanted it to… and do some serious customizations….

    Hope upgrade is easier and can be manipulated?

    PS: after a site is done and as long as it work as it should…. do not ever press upgrade button unless absolutely necessary

  • Even River

    I used Hybrid Framework to desin WooCommerce Themes. But I don’t think itβ€˜s helpful for WooCommerce develpment, you still must deep into the WooCommerce and study how it works, then coding yourself. This is the WooCommerce theme I developed: http://colorvila.com/themes/proshop/
    Any issues about WooCommerce themes welcome discuss with me.

  • Roy

    Yeah I too had to redo a lot of work after the loop-shop incident but nonetheless the theme is done. If anyone is interested, here is the theme (yes it is a premium theme but well worth it )
    http://bravo-woo.splashingpixels.com

  • Eliminating loop-shop does make it easier to theme because you can change the *content* of the loop, instead of the loop itself. Leaving the loop alone will cause less problems. Plus there’s the added bonus that you can include the loop in your own custom loops using get_template_part

    content-product.php is the product content template.

    This is simular to the changes in twenty-eleven vs twenty-ten themes πŸ™‚

  • Evert

    I suspect that the fact that a project uses a free plugin like woocommerce should be an indication as to the budget the client has (or rather: has not). Please, Amber, correct me if I am wrong, but small clients have no idea of what a website actually is and usually have high demands and little money. I have done my fair share of these projects using woocommerce only to have to pay for plugins out of my own pocket or write my own plugin (if I have no money myself at the time) an pay for it in hours.

  • Not necessarily true – most clients are willing to pay, there’s just not a good eCommerce plugin for WordPress right now, and WooCommerce comes closest. Sometimes I direct a client to a hosted eCommerce solution, like CoreCommerce or Shopify, but then those don’t have a real nice blog functionality, or a nice page CMS, os then you’d have to host a second version of the site just for the blog.

    Who can ever figure out how to have a fantastic eCommerce and WP site together is going to be rich πŸ˜›

  • Apart from the fact that you occasionally run into problems creating custom themes, what elements of WooCommerce would you say are inadequate?

  • James….read anyone’s comments on this post and that will tell you what’s inadequate.

    One good example – the latest update to the plugin totally blew up my client’s site….but Woo is telling him he has to update because of a JS error in the latest version. I’ve never had a plugin change their codebase so drastically that it broke several clients’ sites.

  • I don’t think that’s an example of the plugin being ‘inadequate’ by definition.

    I appreciate the inconvenience that update may have caused but really… this is not our responsibility. Our job is to improve WooCommerce with each release and communicate our changes. Not to make sure there are no conflicts with every single developers clients sites. I would recommend reading our release posts / changelogs and testing your site(s) in a staging area before just upgrading on a live site. There will always be the occasional update which will need your attention. This is part and parcel of the evolution of a plugin which aims to be the best.

    WooCommerce is not a normal WordPress plugin and shouldn’t be treated as such.

  • Steven

    Unfortunately I have a lot of complaints about WooCommerce. The Documentation is absolutely terrible.

  • Luke

    Hey James,

    What’s the link to your Public Forums..?

  • Stew

    I get the impression this blog’s author isn’t very experienced with CMS theme development. I was nearly put off using WooCommerce by the comments on this blog, but I was pleasantly surprised by the ease with which WooCommerce can be manipulated to suit designs.

    After developing themes for Joomla!, Drupal, ZenCart and WP (that list wasn’t in order of preference) I’ve found WooCommerce the best free e-commerce plugin I’ve encountered yet.

    I don’t mean to troll, but bashing something as complex as an e-commerce plugin over trivial personal shortcomings can unwittingly put other developers off giving it a shot – as it nearly did me – so I thought it important to post this, late a reply as it is.

  • Actually I’m very experienced in theme development. So much so, I’m currently authoring a book on advanced theme development.

    Experience or not, that doesn’t excuse the plugin’s lack of good documentation and support, which is what my main grips are. Basic theming with it is easier. Advanced customisation isn’t without good documentation.

    I will agree with you however, that WooCommerce does seem to be the best free eCommerce platform around, and the more I work with it, the better it’s gotten. However I’ve had to pretty much hack and slash my way through everything.

  • Wow…….. now I know how noobish I am. Trying to promote and teach people about WooCommerce but I myself is a frigging noob when it comes to things like this :argh:

    salute to coders who can actually get around these codes…

    I’m still stuck with installing WooCommerce on a non-woocommerce theme (Skeptical from WooThemes) but it looks like I failed hard. This is a test site and it’s a product page that sells membership with woocommerce but that a look at this:

    http://workshop.lamanwebwp.com/shop/premium-membership/

    I don’t think the methods above corrects my problem (lol sry imma noob). And I’m too frustrated to go to uservoice (loopy loop problem), can somebody help me?

    If this is spam for your site amber, please delete it….. i’m just asking for help =(

  • I’ve used woocommerce for 4 projects now and have pushed it to create some pretty specific functionality on two of these websites. I think with support it depends on who answers your question, I’ve asked quite a few questions whilst getting to grips with it and most of the time the replies have been excellent and speedy.

  • Hi Amber,

    In your first example, showing the cart details, the difference between the 2 is that the more complicated one is using ajax to update automatically. I’m not sure why it didn’t work for you though… It does for me.

    PS: Sorry if the advice is outdated.

  • Yep – I need to update this post. I’ve been able to dive in a lot deeper and am actually loving the plugin πŸ™‚

  • I have always received great support with urgency priority fro WooThemes. I also appreciate the file structure and amount of files as it resembles a complex, highly functioning piece of software (for free). WooCommerce files are also very well labeled compared to post other free plugins. This makes the learning all the function locations educational while teaching me to label my own code better. A++ for WooCommerce I will never use any other online shopping cart.

  • Shawn

    Hi Amber & everybody….

    Interesting comments….mixed bag of opinions!…lol

    Just started using woo products for a project…I’m not a coder more a marketing specialist(specially web video production & marketing) ….needed a wordpress site so I decided to try a woo theme

    Woo themes & framework has been quite easy to use and the video tutorials have been very useful…(James continue this but for everything)

    Things were running smooth and on time….adding the woocommerce plugin was also easy until I looked at the single product page…the sidebar & feature product image was out of wack…so I thought no problem….I’ll check out there great videos and documention at woo and that was when I hit the wall!….

    Looked through all there documents & videos….searched Google but found no detailed answers to fix the problem…just little bread crumbs here & there but no loaf of bread!

    I’m not a coder and the info about hooks & overrides is confusing….I’m sure for a developer it’s a cake walk but not for marketing/hacker designer me…

    What is the proper hook solution code to fixed the woo commerce single page layout problem with an existing woo theme?…and where do you put it?….can it be fixed in wordpress custom.css?…..or does a child page have to be created or not?……do you have to add style.css from my-theme into the child theme?….do you have to add functions.php form my-theme?…..

    All I have is questions….my head is spinning meanwhile I have to finish the project….I usually don’t touch web design but everything was running smoothly until I added woocommerce.

    Amber or anybody else….do know how to properly fix this problem?…with the proper hook code and full details on how to install it..

    help would be greatly appreciated….

    By the way I am on looking out for a good wordpress designer especially one that understands wordpress designs that work well for business videos

  • Unfortunately WooCommerce has terrible documentation, the best thing would be to try to get help from Woo themselves.

  • Loads of great info here… thanks Amber!
    I was recently asked to recommend either Jigoshop or WooCommerce for a freelance job. (I’d only ever worked with Prestashop & WPeC).
    After testing out both and running into similar issues (with mostly product page styling) I reluctantly settled for Jigoshop.

    I was truly hoping WooCommerce was going to be the shining beacon of success. Wrong!

    Personally, it took me too long to understand the loops and hooks before resorting to simply hacking the single-product.php template file.
    Still struggling to comprehend that the main ‘shop’ page isn’t using a page and that ‘theming’ WooCommerce is not that obvious (for me it wasn’t anyway)

    After separating everything with hooks and php template files I totally agree with Trevor’s comment: “Figuring out stuff is harder than it needs to be” and this was the deal breaker for me.

    PS – I’m not going to touch on WooCommerce tutorials and SEO for fear of a flame war in this comment thread πŸ˜‰
    Lets see how long it takes James Koster to reply and tell me that my decision was entirely incorrect and I should be punished for insinuating that WooCommerce is difficult to customize…

  • Just 20 minutes πŸ˜‰

    There’s nothing wrong with ‘hacking the single-product.php template file’. It’s a perfectly safe way of making changes as long as you copy the files to your theme.

    The shop page isn’t a page because it’s an archive of posts (products). I appreciate how that might be confusing but its the easiest way to give you the option to easily add content to your shop page.

    Why would I tell you that your decision is incorrect? “Horses for courses” as they say. Use whatever makes you feel good. πŸ™‚

  • I’ve actually reversed my decision and have come to love WooCommerce, I’ve written more about it on my second to newest blog post – I still think the documentation is terrible, which makes what is really something easy to work with that much harder. But once I figured out what was going on, it became a lot easier!

  • Matthew Pollard

    Hi Amber,

    I was wondering if you’ve found some good woocommerce tutorials? I would like to create my own custom woocommerce theme, but can’t find any decent tutorials.

    Thanks in advance!

  • Hi Amber,
    After reading only your article I think your problem with woocommerce was because of poor docs. Anyway I’m glad to hear from the above comments that you have now got the hang of it and love it. So maybe you can advice me.

    I have got a client who wants a ecommerce store but with the homepage featuring daily deals with countdown/product sold/deal price etc. I’m currently going through shopping cart and plugins for this purpose and haven’t decided on one yet. I’m very good at html/css and have developed few wordpress themes for customers. Are there any recommened plugins /extention for woocommerce I can use for developing that sites with daily deals on the home page?

  • Omar Lozada

    Followed your tutorial, everything went okay. I managed to get WooCommerce using a custom theme. I was wondering if you had problems like mine,

    When viewing the site’s cart page, the layout seems messed up,
    like this http://imgur.com/0WVx2pk

    Have you encountered similar issue like this one?