I’ve used a number of starter themes for WordPress and each time I found myself spending time at the beginning of a project removing things built into the “blank” theme that conflicted with what I wanted to do. Adding WooCommerce to the mix only increased the complexity and need to spend time at the beginning of a project repeating the same steps before I actually began working on what makes a website project unique.

Bareshelves is a Woocommerce theme that works well with my particular workflow and it allows me to start constructing a custom website right away without worrying about conflicts built into the starter theme.

Bareshelves has a handful of interesting features and the structure makes it easy to stay organized when making woocommerce websites.

 

CSS Structure

There are four CSS files: the default styles that come with the theme for wordpress and for woocommerce, and the custom styles added when developing the site. The default files are full of basic rules found in any project. The primary and wcfront file is for everything else.

 

Function Structure

There are two function files: the default functions such as theme support and nav menu registration, and the custom functions for anything else the site needs.

 

Basic Templates and WooCommerce Template Overrides

In addition to the required wordpress files, I’ve included an optional template structure that works well for my needs. For custom page types that need a lot of customization, I write new page-template files. A homepage template is included by default, and a standard template for all other pages. The content of the header and footer may be customized in the template-content files without fear of modifying their position in the page which is defined in header.php and footer.php.

It’s very easy to be unique when making a WooCommerce store and my approach includes a number of helpful WooCommerce features that I like implemented from the ground floor. Specifically, the single product page, its parts, and the shop archive page feature significant changes and a restructuring from the default WooCommerce templates.

Take a look at the examples below that follows this type of structure.

Not every feature pictured is included in Bareshelves, to keep the theme bare and ready for customization, but a fresh install will be recognizably related.

 

Easy Code Snippet Insertion

Often it is necessary to put code in the head or in the footer. By simply putting those code snippets in head-snippets.php or footer-snippets.php, the code will be added to every page in the desired locations.

 

Head Implementation

 

Footer Implementation

 

 

All Files

 

Note: All Visual Studio Code examples used in this description are using my custom color theme for Visual Studio Code called Code Distinction, which clearly differentiates HTML, Javascript, and PHP.