Integrate Woocommerce into Genesis Framework

By themselves, both Woocommerce and Genesis are incredibly useful tools. Together, they can turn your WordPress site into a powerhouse. Here’s how to quickly integrate Woocommerce into Genesis.

Woocommerce works pretty well out of the box within Genesis, if your site is setup to not use sidebars. If your site uses sidebars, there are a few things you can do. What I show here gives you the most flexibility. In your Genesis Framework child theme, you need to do two things. First you’ll need to add a woocommerce.php template file.

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

<?php
 
/*
 Woocommerce template
 */
 
// force full layout
add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );
 
// remove page title
if ( is_product_category() ) {
  add_filter( 'woocommerce_show_page_title', '__return_false' );
}
 
// replace the loop
remove_action( 'genesis_loop', 'genesis_do_loop' );
 
add_action( 'genesis_loop', 'child_theme_do_loop' );
 
function child_theme_do_loop() {
  if ( function_exists( 'woocommerce_content') ) { 
    woocommerce_content();
  }
}
 
genesis();

Going through our sample Woocommerce template, we see a couple things I’ve added out of my own taste. On line 8, I tell Genesis to force a full width layout. This is just because I prefer to not have sidebars in my shop. On lines 11-13, I remove the page title if I’m looking at a category. Again, this is just personal taste.

The most important part of this template is replacing the main Genesis WordPress loop with the Woocommerce loop. We do that on lines 16-24. First we unhook the Genesis loop by removing genesis_do_loop from the genesis_loop. Then we add our own method to genesis_loop. This method doesn’t need much, just enough to call woocommerce_content. Woocommerce does the rest.

And lastly, to get rid of the annoying Woocommerce message about theme compatibility, you need to add a single directive somewhere in your functions.php file. This simply tells Woocommerce that we, in fact, are compatible.

1

add_theme_support( 'woocommerce' );