Integrate WooCommerce with Genesis

1. The Genesis Connect for WooCommerce plugin

This plugin is a save choice and it is the most easy solution, especially if you don’t want to edit the functions.php of your Genesis child theme. This Plugin replaces the WooCommerce built-in shop templates with its own Genesis-ready versions. The con is that some of the templates are out of date.

genesis connect woocommerce plugin

You can download the plugin here.

2. BeardedGinger Method

This method from Josh Mallard is pretty straightforward. Nonetheless, it works like a charm. In just three simple steps you’re able to fix the layout of your site and integrate WooCommerce.

Step 1: Create a new function in your theme’s functions.php file

function woocommerce_setup_genesis() {

Step 2: Create a new file in your child theme directory with the name woocommerce.php. Add the following code to this file.

* WooCommerce Template
* Template used for all WooCommerce views for your site
//* Remove standard post content output
remove_action( ‘genesis_loop’, ‘genesis_do_loop’);
//* Add WooCommerce content output
add_action( ‘genesis_loop’, ‘woocommerce_setup_genesis’ );

This template will be used for all the WooCommerce pages within your site. It removes the default loop and replaces it with the WooCommerce content.

Step 3: Declare support for WooCommerce in your functions.php

//* Declare WooCommerce Support
add_theme_support( ‘woocommerce’ );

3. AlphaBlossom Method

I personally favour the AplhaBlossom method, which offers a complete solution. It’s one chunk of code that you place directly in your theme’s functions.php. I prefer to include it using include_once in the functions.php.

* Integrate WooCommerce with Genesis.
* Unhook WooCommerce wrappers and
* Replace with Genesis wrappers.
* Reference Genesis file:
* genesis/lib/framework.php
* @author AlphaBlossom / Tony Eppright
* @link
// Add WooCommerce support for Genesis layouts (sidebar, full-width, etc) – Thank you Kelly Murray/David Wang
add_post_type_support( ‘product’, array( ‘genesis-layouts’, ‘genesis-seo’ ) );
// Unhook WooCommerce Sidebar – use Genesis Sidebars instead
remove_action( ‘woocommerce_sidebar’, ‘woocommerce_get_sidebar’, 10 );
// Unhook WooCommerce 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 new functions with Genesis wrappers
add_action( ‘woocommerce_before_main_content’, ‘youruniqueprefix_my_theme_wrapper_start’, 10 );
add_action( ‘woocommerce_after_main_content’, ‘youruniqueprefix_my_theme_wrapper_end’, 10 );
// Add opening wrapper before WooCommerce loop
function youruniqueprefix_my_theme_wrapper_start() {
do_action( ‘genesis_before_content_sidebar_wrap’ );
genesis_markup( array(
‘html5’ => ‘<div %s>’,
‘xhtml’ => ‘<div id=content-sidebar-wrap>’,
‘context’ => ‘content-sidebar-wrap’,
) );
do_action( ‘genesis_before_content’ );
genesis_markup( array(
‘html5’ => ‘<main %s>’,
‘xhtml’ => ‘<div id=content class=hfeed>’,
‘context’ => ‘content’,
) );
do_action( ‘genesis_before_loop’ );
/* Add closing wrapper after WooCommerce loop */
function youruniqueprefix_my_theme_wrapper_end() {
do_action( ‘genesis_after_loop’ );
genesis_markup( array(
‘html5’ => ‘</main>’, //* end .content
‘xhtml’ => ‘</div>’, //* end #content
) );
do_action( ‘genesis_after_content’ );
echo ‘</div>’; //* end .content-sidebar-wrap or #content-sidebar-wrap
do_action( ‘genesis_after_content_sidebar_wrap’ );

The remove action deletes the WooCommerce hooks and wrappers. New functions will replace the WooCommerce before and after wrappers. The xhtml markup seems unnecessary. We all build themes in HTML5, right?

The last step is declaring support for WooCommerce in your functions.php.

//* Declare WooCommerce Support
add_theme_support( ‘woocommerce’ );
view rawfunctions.php hosted with ❤ by GitHub


Every solution got its pros and cons. For bigger projects and theme development I prefer the latter method. If you’re not comfortable with editing the functions.php you may choose the plugin. And, for a quick solution option two is great. As a matter of fact, I’ve recently used this option in two smaller projects.

Speak Your Mind