WooCommerce Custom Theme Integration

This weekend I spent some time integrating WooCommerce with a WordPress site using the Colorway theme by InkThemes. I used the hook method indicated in the link below. I learned a great deal and I thought I would share it here in case I was able to save another programmer some time.

While this example applies to the version of the Colorway theme I was using, I hope the information below will explain how to create these content wrappers for any theme.

It Started With a Basic Example

I found this document at WooThemes that helped me get started.
https://docs.woothemes.com/document/third-party-custom-theme-compatibility/

The basic gist of the hook method is that you surround the WooCommerce content on the ‘shop’ and other WooCommerce pages with the same wrappers you use on other pages so the WooCommerce content will be more likely to match other content on your site and not break your layout, or to place custom wrappers you can use to apply new styles to the WooCommerce content.

It’s Rarely That Easy

In some cases this will be as easy as choosing the wrapper tags for your content based on your page.php file or from the HTML source code of other pages generated by your theme, making up your own wrappers for the content, or even accepting the default <section id="main"></section> wrapper tags and going from there.

In other cases you will have to look closely at the HTML structure of your page and figure out what tags need to be opened and closed by your ‘my_theme_wrapper_start’, and ‘my_theme_wrapper_end’ functions.  Basically these two tags need to take care of any and all document structure that is not handled by ‘get_header’, ‘get_footer’, or ‘get_sidebar’.

This Is What I Ran Into

In my case, the first thing I noticed is that because of programming in the theme I was using, some of the closing tags needed to come before the sidebar and some needed to come after. While I might have handled that by finding or creating an after_sidebar or before_footer hook, I chose to do away with the sidebar completely in this case. Another thing I noticed is that the ‘shop’ page was not affected by the page template choice on the settings of the WP ‘shop’ page, so choosing full-width-template did no good there.

The reason the closing tags needed to be split around the sidebar before we removed it is because the content block was in the same container as the sidebar block. It would not have been an issue if get_header had opened that container and get_footer had closed it but in this case it was opened by tags on page.php before the_content and needed to be closed after get_sidebar. I got rid of the sidebar so I could close these tags in one fell swoop.

The second thing I found out is that, in the case of my theme, I needed to close a container tag that was opened by get_header because it was a container that contained both the header and the content, but not the footer. It’s just the way the  theme was written. The lesson here was to make sure I knew what the responsibility of the ‘my_theme_wrapper_end’ function. I learned this by comparing the HTML structure of normal pages to the pages generated by WooCommerce and seeing what was missing, then adding what was missing to one of the two my_theme_wrapper functions.

The last thing I noticed was that I needed an opening and closing clearfix in the closing tags before the footer.

I hope to make video demonstrating this procedure for anyone this may help but for now this article will have to do. Hope it helps!

This Is the Code I Used to Integrate WooCommerce With the Colorway Theme

I placed the following code in the functions.php file of my child theme. It could be placed in the functions.php of your parent theme if you don’t have a child theme.

[php]
// The following code block remained untouched from the WooCommerce example in the link above
// First unhook the WooCommerce wrapper
remove_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10);
remove_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10);

// 2015-11-23 Remove sidebar from 'shop' and other WooCommerce pages so I can close the content wrappers that would have needed to be split around the sidebar. Now I can close the content block (and the container containing the header and content in this case) with only the 'woocommerce_after_main_content' hook and the 'my_theme_wrapper_end' function
remove_action( 'woocommerce_sidebar', 'woocommerce_get_sidebar', 10);

// This code block also remains untouched from the WooCommerce example in the link above
add_action('woocommerce_before_main_content', 'my_theme_wrapper_start', 10);
add_action('woocommerce_after_main_content', 'my_theme_wrapper_end', 10);

// Hooking in our new customized functions to place the wrappers our theme requires:
function my_theme_wrapper_start() {
 echo '<!--Start Content Grid--><div class="grid_24 content"><div class="content-wrap"><div class="sl">';
}

function my_theme_wrapper_end() {
 echo '</div></div></div><div class="clear"></div><!--End Content Grid--></div><!--End Container Div-->';
}
[/php]