Call   0208 3131682   Mon-Fri 9am-6pm

How to make a WordPress Theme, Woocommerce Compatible from scratch

beginners guide to theming Woocommerce

In this post I’ll going to explain how I took a WordPress Bootstrap Theme and made it Woocommerce Compatible. I couldn’t find many good tutorials on this so I’m writing this one, so that it might help someone else.

The Process to make a theme Woocommerce Compatible

I’m going to take the very nice DevDmBootstrap3 theme and make it Woocommerce Compatible.

  1. I created a child theme of DevDmBootstrap3
  2. I added the required stuff needed to that child theme

I’ll skip over 1 (there are plenty tutorials of how to do that out there), and move right onto 2.

Complete code below (can be put in functions.php)

Sidebar Code for Woocommerce (wp-content/themes/THEME/sidebar.php )

The DevDmBootstrap3 theme didn’t have a sidebar.php so I added one to my child theme with the following:

Explanation of Code

Remove the Woocommerce default wrappers (this drops wraps the Woocommerce content in the theme, so everything looks nice), see remove_action lines.

Next, we need to make our own wrappers so Woocommerce can nicely be wrapped into the theme and all looks good. See functions gbb_theme_wrapper_start() and gbb_theme_wrapper_end(), in these functions I wrap the content in the theme (todo this on different themes this will vary slightly).

Roughly speaking the contents of the 2 wrapper functions will be output between the header.php and footer.php files of the theme you are using.  As you can see below I’ve added content to drop in relevant stuff from the DevDmBootstrap3 theme such as the menu e.g. ‘topnav’ .

 

Essentially what I’ve done is created a bootstrap row with 2 columns: column 1 is two thirds width and column 2 is one third width.

Column 1 (col-md-8)

This contains the main Woocommerce content.

Column 2 (col-md-4)

This contains the Woocommerce sidebar.

After that I declare Woocommerce support in the theme, and lastly create a sidebar for the theme (that I can use as my Woocommerce sidebar). The sidebar can be seen in the themes sidebar.php template file (which I created for this theme as it didn’t have one).

And thats about it in nutshell as they say, hope you find this useful.

 

 

 

 

References:

Woocommerce third party theming

Theming Jigoshop , this is the best resource I could find (Jigoshop is a fork of Woocommerce or vice versa)

 

Update 27 June 2016

To Download the latest version of the Woocommerce Compatible theme click here

In this version there is no sidebar on woocommerce pages (except on cart / checkout, this can be switched on/off via devdm-theme-options is needed).

To have a sidebar in the shop / product page etc this can be setup via the wrapper functions see file: make_theme_woocommerce_compatible.php (as in the tutorial above).

 

TODO at a later date I will do a part 2 to this tutorial to  create the rollover cart contents script (that will be put in the header to quickly preview whats in the cart).

 

 

 

6 Comments

Leave a Reply