Add WooCommerce Support to Underscores

In my last post I explained how to add your own custom options to the WordPress customizer in the Underscores theme. Today I am going to show you how to add *basic *WooCommerce support to your custom theme.

In an effort to keep your theme organized and stick with the precedent of how Underscores already works open your <a href="https://github.com/Automattic/_s/blob/master/functions.php">functions.php</a> file and scroll to the bottom where all the other includes are… included required. This snippet will simply rqeuire a file named woocommerce.php which you will need to create in the inc directory. Be sure to create this file before refreshing your site after adding require statement, your site will not work if you have not created the file.

/*** Load WooCommerce compatibility file. */ require get_template_directory() . '/inc/woocommerce.php';

The first thing you may have noticed after installing WooCommerce and your Underscores based theme is the nice banner at the top of your dashbaoard reminding you that the current theme does not include support for WooCommerce.

Note: While this may seem like a complex checking of various parts of the theme to make sure it will work with WooCommerce… it is not a guarantee that the theme works!

To make this banner go away it is as simple as adding one single line to your inc/woocommerce.php file. This single line uses the add_theme_support() function to tell WordpPress that the theme supports a specific feature, the same way you add support for post thumbnails or post formats .

add_theme_support( 'woocommerce' );  

If you were to look at your shop page just by adding the theme support line, you’ll notice it doesn’t look quite right. Your sidebar is probably under the content. Simply put it doesn’t look right.

One of the great (and potentially confusing things) things about WooCommerce is that it will work with any WordPress theme. With one small caveat that if its not built a certain way you need to do some small tweaking. There are two ways to do this:

  1. Create a woocommerce.php template file with the woocommerce_content() function.
  2. Using hooks to add a custom HTML wrapper to fit your theme.

Today I am using the hooks method, it’s my personal preference and I feel like it is a simpler route. If you really want a custom shop template that is not the same as the rest of your site, the woocommerce.php template file may be for you.

For an unmodified Underscores theme the wrapper below should work out of the box for you. If you downloaded Underscores and customized it on underscores.me then you may need to replace the _s prefix with your own. The functions are very simple and just echo out the expected HTML you want to see before and after the WooCommerce loop. The default wrapper needs removed and then you add the custom function to that same action.

function _s_wrapper_start() {  
    echo '<div id="primary" class="content-area">';
}
remove_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10 );  
add_action( 'woocommerce_before_main_content', '_s_wrapper_start', 10 );

function _s_wrapper_end() {  
    echo '</div>';
}
remove_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10 );  
add_action( 'woocommerce_after_main_content', '_s_wrapper_end', 10 );  

I hope this has been helpful!