Bits & Babble

A blog in development.

Integrate Woocommerce into Genesis Framework

October 31, 2013  

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.

woocommerce.php
raw download
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();

<?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' );

add_theme_support( 'woocommerce' );

No Comments

By SPENCER SOKOL
  • About
  • Twitter
  • Studio 27

Categories

  • Alloy
  • Android
  • Appcelerator Titanium
  • Babble
  • Debugging
  • Genesis
  • iOS
  • s2Member
  • Woocommerce
  • Wordpress

About Spencer Sokol

Spencer co-founded Studio 27, a small web and application design and development company in Indianapolis. He has spent many years in both the development and testing side of the software industry, and generally avoids talking to people face to face.

Leave a Reply Cancel reply

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

  • About
  • Indianapolis Design & Development
Copyright © 2021 Spencer Sokol

Copyright © 2021 · Bits and Babble on Genesis Framework · WordPress · Log in