How to make a WordPress Theme, Woocommerce Compatible from scratch

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)

// unhook default woo wrappers
remove_action('woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10);
remove_action('woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10);


// hook in our new theme wrappers
add_action('woocommerce_before_main_content', 'gbb_theme_wrapper_start', 10);
add_action('woocommerce_after_main_content', 'gbb_theme_wrapper_end', 10);

function gbb_theme_wrapper_start() {


    get_template_part('template-part', 'head');

    get_template_part('template-part', 'topnav');

    echo '<div class="container" >
      
        <div class="row">
        <div class="col-md-8"> This column is 8 column width
  
       ';
}

function gbb_theme_wrapper_end() {

    echo '</div>'; // close col-md8
    
    
    //  sidebar column (right aligned)
    echo '<div class="col-md-4"> This column is 4 column width <br/>';
    get_sidebar('shop'); // woocommerce sidebar  (see sidebar.php)
    echo '</div>';  // close sidebar column

    echo '</div>'; // close row 
    echo '</div>'; // close container
}

// declare woo support
add_action('after_setup_theme', 'woocommerce_support');

function woocommerce_support() {
    add_theme_support('woocommerce');
}


/* see sidebar.php to see sidebar-1 (which woocommerce takes to be 'shop' sidebar  */
function gbb_widgets_init() {
    register_sidebar(array(
        'name' => __('GB Default Sidebar', 'stick_themename_or_textdomain_here'),
        'id' => 'sidebar-1',
        'description' => '',
        'before_widget' => '<aside id="%1$s" class="widget %2$s">',
        'after_widget' => '</aside>',
        'before_title' => '<h3 class="widget-title">',
        'after_title' => '</h3>',
    ));
}

add_action('widgets_init', 'gbb_widgets_init');

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:

<?php
/**
 * The sidebar containing the main widget area.
 */

if ( ! is_active_sidebar( 'sidebar-1' ) ) {
	return;
}
?>

<div id="secondary" class="widget-area" role="complementary">
	<?php dynamic_sidebar( 'sidebar-1' ); ?>
</div><!-- #secondary -->

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).

// unhook default woo wrappers
remove_action('woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10);
remove_action('woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10);


// hook in our new theme wrappers
add_action('woocommerce_before_main_content', 'gbb_theme_wrapper_start', 10);
add_action('woocommerce_after_main_content', 'gbb_theme_wrapper_end', 10);

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’ .

function gbb_theme_wrapper_start() {


    get_template_part('template-part', 'head');

    get_template_part('template-part', 'topnav');

    echo '<div class="container" >
      
        <div class="row">
        <div class="col-md-8"> This column is 8 column width
  
       ';
}

function gbb_theme_wrapper_end() {

    echo '</div>'; // close col-md8
    
    
    //  sidebar column (right aligned)
    echo '<div class="col-md-4"> This column is 4 column width <br/>';
    get_sidebar('shop'); // woocommerce sidebar  (see sidebar.php)
    echo '</div>';  // close sidebar column

    echo '</div>'; // close row 
    echo '</div>'; // close container
}

 

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.

/* see sidebar.php to see sidebar-1 (which woocommerce takes to be 'shop' sidebar  */
function gbb_widgets_init() {
    register_sidebar(array(
        'name' => __('GB Default Sidebar', 'stick_themename_or_textdomain_here'),
        'id' => 'sidebar-1',
        'description' => '',
        'before_widget' => '<aside id="%1$s" class="widget %2$s">',
        'after_widget' => '</aside>',
        'before_title' => '<h3 class="widget-title">',
        'after_title' => '</h3>',
    ));
}

add_action('widgets_init', 'gbb_widgets_init');

 

 

 

 

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).