Wordpress Developers in Bromley, London

5th Floor, Old Town Hall, Catford Road, London, SE6 4RU, UK
  • Testimonials
  • Our Work
  • Contact
  • Blog

How to make a WordPress Theme, Woocommerce Compatible from scratch

June 1, 2016 by louie171 6 Comments

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.

Web Hosting
  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)

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
// 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
1
2
3
4
5
6
7
8
9
10
11
12
13
<?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).

PHP
1
2
3
4
5
6
7
8
// 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’ .

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
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.

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* 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).

 

 

 

Share this:

  • Twitter
  • Facebook

Filed Under: E-commerce, Ecommerce, PHP, Programming, Theming, Woocommerce, Wordpress

Comments

  1. Danny Machal says

    June 21, 2016 at 2:00 pm

    Hello!

    DevDmBootstrap3 creator here. I was wondering if you could email me a copy of your child theme? I’d like to make it available for people to download on the support site. You will be credited in full. Lets talk about it ! danny @ devdm . com

    – Danny

    Reply
    • louie171 says

      June 21, 2016 at 6:57 pm

      hi Danny,

      I certainly will do, I’ll contact you in the next few days.

      cheers

      Reply
  2. martijn says

    February 7, 2017 at 11:25 am

    does this work for every theme? I had a go at it but it didn’t really work out great..I tried it with snaps theme

    Reply
    • louie171 says

      February 7, 2017 at 11:30 am

      sorry to hear that martijn , is the snap theme bootstrap based , some of the css in the example is bootstrap.

      Reply
  3. ravindra says

    August 30, 2017 at 1:38 pm

    Hello ,
    thank you for sharing .
    I use your code but products are not showing on product pages in my theme .

    Reply
    • louie171 says

      August 30, 2017 at 2:37 pm

      you’ll need to adapt the code to your particular theme

      Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

  • WordPress Development London
  • Minimum Viable Product
  • WordPress Support
  • WordPress Plugin Development, UK
  • Web Application Development
  • PHP Development company in London
  • Laravel Developer London
  • Intranet Website Developers, London UK
  • Web Design Bromley
  • Referral Program
  • About
  • WordPress Plugins
  • WordPress Expert Help and Support, London
  • Web Application Development
  • Using WordPress as a Company Intranet

© 2018 · Green Box Wordpress Developers in London - 5th Floor, Old Town Hall, Catford Road, London, SE6 4RU ·

Green Box Woocommerce Specialists in London is rated 10 out of 10.
Based on 8 customer reviews.