Adding WooCommerce Support to Libre 2

The Theme Team is hard at work adding support for WooCommerce to some of our popular themes, and last week I wrapped up my first rotation. My project was to add WooCommerce support to an existing free theme, Libre 2.

Despite being a long-time WordPress user, I have relatively little experience with WooCommerce and its design and development. Thankfully, I was able to pull the majority of the code’s structure from our favorite starter theme, Underscores.

From there, it was a matter of making stylistic changes to better match the plugin to the theme. I originally designed and developed Libre 2, so I had the benefit of working on a theme I’m familiar with. This gave me an advantage, as I didn’t have to try to interpret another designer’s vision and extend it to work with the plugin.

Sometimes this type of implementation is challenging, especially when a theme isn’t designed with e-commerce in mind. Libre 2 was developed as a bare-bones blogging theme, but thankfully it didn’t pose too many problems.

The most time-consuming part of the conversion was refactoring the header, swapping floated elements for a more versatile flexbox layout. The fixed-position header had to accomodate the site title and branding, navigation menu, social links menu, and the new WooCommerce mini cart along a horizontal line. That was a challenge, but after some experimentation, I found a nice balance between each of the elements, such that the customer can use as many or as few as necessary.

The next big change was the form styles; the original styles were minimal to match the theme’s design, but these made it harder to read and follow more complex sets of fields (like billing and shipping information). I compromised by adding simple borders around the fields and buttons when using WooCommerce, to give them more definition and make them more recognizable as inputs.

Finally, tables are prevalent in WooCommerce. We typically don’t consider styling complex tables for a blog theme, and as such they’d been left minimally styled in Libre 2. This needed to be fixed for the cart, orders, and checkout areas, which use large tables for presentation of product and checkout information. They needed padding, border, and font adjustments to make them readable.

What did I learn from my first foray into WooCommerce conversion? Looking at a product in a different context can often show gaps or potential enhancements in its design that, when addressed, help it to become a more robust offering. In the case of Libre 2, taking a simple blog theme and extending it to work as an e-commerce theme added value while staying true to its original, minimalist design.

Check out the results here!