Case Study: African Cartel & WooCommerce

Written by Mark Forrester on November 16, 2011 Customer Stories, News.

A re-designed site called for a re-designed logo by Cobus Bester.

This is a follow-up case study post to “African Cartel – a Listings implementation case study“.

8 months ago I wrote a post on the blog about the launch of an online project I was involved with called African Cartel – its mission to discover and showcase the art of African artists. At launch the site was built on the Listings theme with the focus being on the artists, the Cart66 plugin was used to offer the e-commerce facilities.

Since launch it has received much success, with our short film receiving over 26,000 views and even a feature on CNN’s homepage, and many iterations with it being somewhat a guinea pig for me to try a variety of e-commerce plugins, all the while not jeopardising on the user experience. I’ve test driven Cart66, WP Commerce, and Jigoshop – some on the live site, some on the development server. All of them having their individual benefits, but all of them somewhat lacking from exactly what it was we needed.

Enter WooCommerce

A couple months back with the WooCommerce plugin in final stages of development it was the obvious choice to test drive our own product for this project. My wife and her business partner provided useful user feedback on the limitations of some of the previous plugins used, and where things could be simplified and improved.

Luckily we didn’t have many products to re-create as WooCommerce products, and only a few product variations, this because we’d specifically limited the amount of products African Cartel sold due to the limitations of our previous platforms. (Side note: From last week importing hundreds of products is no longer a concern thanks to the launch of the CSV product importer extension).

Now with the site using WooCommerce we’ve almost tripled the amount of products we sell and feel confident in listing more.

We use PayPal to take payments, with the plans to allow for South African payments with an SA payment gateway soon, once a currency converter is available.

A new engine behind the website called for a new theme

Listings was a fantastic theme to use with it’s powerful content builder quickly and efficiently allowing us to create the custom post types, and taxonomies we required – with it’s focus being on listing the artists. However, once the content structure was finalised and created the only custom post type we really needed was “Artists”.

With Version 2 we wanted the focus to be more on the art these artists wanted to sell, and given Listings was more suited for listing the people behind the art, with the products/art being somewhat disjointed we decided to experiment with the Argentum theme.

The theme port

Moving from the Listings theme we still needed to preserve the content structure the content builder had created for us – the “Artists” custom post type and various taxonomies to categorise the artists. De-activating Listings meant all the artists we had created and categorised disappeared from the WP backend. Luckily not from the database though, all the content was still there – just hidden.

The custom single artist template page.

Jeff wrote a simple, short plugin that activated the content schema and displayed it in the backend again, whilst Argentum, or any other theme was active. The realization is sometimes that certain pieces of functionality are better suited to plugins, while others to themes. We then copied a couple of the taxonomy archive and single artist template files to the Argentum theme folder.

Customizing Argentum

I loved the fact Argentum was responsive and the simple, clean, monotone styling. We felt the Listings mod we had developed for African Cartel was a little too colorful, and specifically designed around the township art, with the background image of the website portraying that. With Argentum we felt we could let the art, artist and blog content be more of the highlight and focus of the design.

The customised African Cartel homepage design (left), based on the Argentum theme (right).

The beauty of working with WooThemes is the template file structure is the same across all our themes, and the CSS is well structured and commented. I was therefore able to easily copy the top, fixed navigation of the Emporium theme into Argentum, as well defining some of my own page templates calling on layout and styling classes and IDs.

Working with LESS files

Some may have noticed, others not, that we have been experimenting with the dynamic styling language LESS in some of our latest themes to allow for easy and extensive customizations, by changing the bare minimum of CSS – in most cases just a line of code. I’d definitely recommend going to the LESS website to view and understand the benefits.

Compiling CSS/LESS files with the compiler. Simple and time saving.

Working with LESS files meant for only a few hours to create custom page templates that were responsive. More on LESS files in a follow up blog post soon.

Helping shape WooCommerce development

One thing I’m a firm believer in is using your own product regularly on external projects with clients and other amateur WooCommerce users. This to view it with a new set of eyes and to see where it’s shortcomings are in real life scenarios. African Cartel was a prime example of this that allowed us to improve our product offering and even work on new extensions for it that we thought useful.

The Shipping Table Extension

African Cartel required that we could add a weigh based shipping table with numerous conditions for particular locations, as well as a con-current courier shipping charge. WooCommerce Shipping Table extension was used, but adding a weight table at 100g intervals for various countries was a time consuming process with a very large table required.

Interface tweaks to the table rate shipping extension.

Using our real content, and live implementation of the extension on African Cartel we quickly realised it’s limitations and load intensity with so many table fields. Mike used this feedback to work on a version 2 of the extension with a far more intuitive and efficient interface, drastically reducing the load time, and the time spent entering the data via adding options to duplicate checked rows. View more on the table rate shipping extension here.

The Product to Media Link Extension

This extension was actually as a result of custom functionality we required for African Cartel. When in a blog post, on a page, or in our case on an artist profile page we wanted to allow particular images (art portfolio items) to be linked to products (art) in WooCommerce. It was quite a simple extension for Jeff to make, but we realised the custom functionality we required was actually quite a common, and useful feature of many other e-commerce stores, blogging about their products – linking the blog with the shopfront better. View more on the extension here.

Even more to come

With African Cartel we’ve seen the importance of interlinking different content types, e.g. artists, musicians, authors to different product types like art, music, books. We are working on an extension that makes the bridge easy. With your product you can associate a post to it that can then be displayed as a widget on your product listing page. See the below screenshots as a working example.

Linking a post, from the Artist custom post type, to a product.
The outcome - An artist linked to a product.

The next plan in the pipeline is to display an artist’s associated products as art pieces available for purchases on their individual artist listing page. But that’s a story for another blog post…

Disclaimer: The site is an ever-evolving work in progress and I’m not claiming it’s going to work flawlessly in the dreaded Internet Explorer.

Would you like to feature on our blog? Share your experiences working with WordPress and our themes and if we believe it will benefit our community we’ll publish it. Contact us.

10 Responses

  1. Manalina
    November 17, 2011 at 12:11 am #

    Love the African cartel project. Gonna pay them a visit fo sure and spread the word.

    Also love the interlink content type features 🙂

    • Ryan Ray
      November 17, 2011 at 1:15 am #

      Thanks for the kind words, and for sharing the project. I’m sure Mark and Co appreciate the help! I know I need some art for my apartment, should probably pick up some for Christmas. 🙂

      • Manalina
        November 17, 2011 at 1:23 am #

        You’re welcome. They’re doing a great job.

        (The same goes for my place. Would be great too as gift :))

        • Xenia
          November 17, 2011 at 3:03 pm #

          Hi Manalina (and Ryan), Great to hear your feedback on the site, Woo has really helped us work magic on it!

          These artworks do make a great gift and will brighten up any wall, try order soon to make it in time for Christmas, we can do gift wrapping aswell on request! We will also have some Christmas bead and wire decoration goodies on the site very soon. Feel free to follow us on Twitter for updates (@africancartel).

  2. Charlie
    November 17, 2011 at 10:34 am #

    The redesigned site looks fantastic. For clarification though, you could have added the WooCommerce components to the original Listings design, right? I agree that the redesign puts more focus on the products which seems inline with your goals. Well done.

    • Mark Forrester
      November 17, 2011 at 1:23 pm #

      Thanks Charlie. Correct it should work fine with Listings, although we haven’t integrated it to the extent we would like yet. We have plans for some cool stuff soon though!

      • Brice
        November 17, 2011 at 10:48 pm #

        Any chance on getting you to expand on the “cool stuff” you mentioned?

  3. Xenia Forrester
    November 17, 2011 at 3:05 pm #

    Thanks for the awesome post! It really captures African Cartel and Woo commerce functionality perfectly. The site redesign and the Woocommerce plugin has made such a difference for front end and back end usability! Good times!

    All the best,
    Xenia and The African Cartel Team

  4. Robin
    November 28, 2011 at 11:33 pm #

    I was eager to visit the site and see not only how Woo Commerce had been used, but to see the great SA art…..

    However, the site is only displaying the mobile version… apparently the site is seeing my laptop as a mobile device…

    I revisited after a couple of weeks and it still is the same…

    I’m on IE 8.0 (I know,I know… )…

    Just thought you might want to know…..

  5. Steffen Bang Nielsen
    December 2, 2011 at 4:47 pm #

    @Mark Forrester: You write “The realization is sometimes that certain pieces of functionality are better suited to plugins, while others to themes”.

    Any chance of seeing Content Builder as a plugin?