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;
	<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>
	$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) {
						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?

Chat with me about this on Twitter