We’re big fans of the WooCommerce eCommerce plugin, which generally integrates well with WordPress themes.
When using it with the Genesis Framework there are often compatibility issues, or at the very least you’ll see this warning message in your WordPress admin panel:
Your theme does not declare WooCommerce support – if you encounter layout issues please read our integration guide or choose a WooCommerce theme
Visting the WooCommerce documentation on third-party theme compatibility gives several options to resolve this issue. We prefer to use the last method, hooks, which WooCommerce says is more flexible and similar to what they use with their own themes and the Twenty Ten and Eleven themes.
Although we haven’t used it much, another popular option is the Genesis Connect for WooCommerce Plugin.
For our basic needs, we’ll skip the plugin route and use the functions below to integrate the two seamlessly.
How We Integrate WooCommerce into Genesis Child Themes
Using the WooCommerce documentation, we’ll place the following code in our child theme’s functions.php file:
[gist id=”c11192a0132d494c3448″ file=”woocommerce-genesis-theme-support.php”]
Using remove_action, we remove the WooCommerce hooks woocommerce_before_main_content and woocommerce_after_main_content which output the WooCommerce wrappers.
We’ll then add our own functions to replace the WooCommerce before and after wrappers, using markup found in genesis/lib/framework.php. This could be further simplified by hardcoding your markup, but this way you keep the Genesis checks to make sure the markup is correct depending on if the site is set for html5 or xhtml.
It also keeps the Genesis hooks in place, which ensures compatibility with plugins and custom functions that may use those hooks.
Genesis Breadcrumbs or WooCommerce Breadcrumbs?
In our case, we want to use the Genesis Breadcrumbs, so we’ll add this function below to remove the WooCommerce Breadcrumbs:
[gist id=”c11192a0132d494c3448″ file=”replace-woocommerce-breadcrumbs-genesis.php”]
If you prefer to use the WooCommerce Breadcrumbs instead:
[gist id=”c11192a0132d494c3448″ file=”replace-genesis-breadcrumbs-woocommerce.php”]
The last step is to add this to your functions.php file to remove the WooCommerce Admin warning:
[gist id=”c11192a0132d494c3448″ file=”remove-woocommerce-admin-theme-support-warning.php”]
Victoria Bampton says
Thanks for sharing that!
Unklejon says
WTF was that all about am I missing something new in Lightroom
Victoria Bampton says
Oh sorry Jon! Looks like you’re following me personally on Disqus, and I replied to a post about the new shopping cart I’m integrating into the website.
Unklejon says
Small world – apparently my better half is just about to do the same thing for her new business. Thre is some great training on Lynda.com on the subject if you have membership.
Cheryl Jones says
Thank you so much! I used the Genesis connect plugin but for some reason my sidebar kept appearing underneath the content on the shop page. After hours of banging my head against the wall I found your post and it worked perfectly! Thanks 1000x
Mette says
I have been using Genesis Connect for WooCommerce. Unfortunately it does not work with the latest version of Genesis. Does the code above for the functions.php work with Genesis 2.1.2?
Tony Eppright says
Hi Mette, it should work fine. I will be working on this code to improve it shortly and will test again soon.
Gary says
Per @Cheryl Jones, your solution solved the sidebar displaying under the product issue for me. Thanks.
Patricia Erlandson says
Great info, hade the same issue as Gary. Thanks a lot
Jason says
I was having some issues with the Genesis Connect plugin and image uploads. These code snippets solved the problem nicely without needing to use a plugin. Thanks for sharing!
I am noticing a bit of a strange behavior though. If I am logged into the admin area and view my site, the primary sidebar appears below the main content. If I am not logged in, then no sidebar appears as expected. Does anyone know what would cause the sidebar to appear when logged in? It’s more of an annoyance than anything, but if possible I would like to stop it from appearing.
Tony Eppright says
Hi Jason, I’m glad that this was helpful.
I noticed that issue recently and am trying to find time to improve the code. I hope to get to it soon and update the code if I can find a good fix.
Lifeontheflip says
Is this solution compatible with the Genesis Connect WooCommerce Plugin? Also, what is meant by ‘youruniqueprefix’ in your snippet?
Thanks!
Ron
Tony Eppright says
Hi Ron,
No, you don’t want to use this with Genesis Connect. I haven’t used Genesis Connect, but I wanted a simple function so I use this instead. I recommend looking at Genesis Connect as I’m sure it is more extensive, but for me this does what I need to incorporate WooCommerce into my themes.
The ‘youruniqueprefix’ is a filler…you should change that to something unique to your theme. It’s best practice to use a unique prefix for your functions so that it doesn’t conflict if someone else happens to use the same function name.
So if you named your function “my_theme_wrapper_start” and you installed a plugin that happened to use the same function name then it will crash your site. By adding a unique prefix, you’ll significantly reduce the chance of having this type of conflict.
Radhapriya Elise McCabe says
What if you want a full-width shop page instead of having a sidebar?
Tony Eppright says
@radhapriyaelisemccabe:disqus I’ve updated the code with a fix so that it now supports Genesis Layouts and removes the redundant sidebar.
Martin says
Hi Thanks for this. I’ve tried the code but am still getting the problem of the sidebars appearing below content on a product page. I’m using the genesis eleven40 pro theme. Any ideas?. Thanks
Tony Eppright says
Hi Martin, I just tried with eleven40 pro and it worked as it should. Make sure your code has these lines in it:
// Add WooCommerce support for Genesis layouts (sidebar, full-width, etc)
add_post_type_support( ‘product’, ‘genesis-layouts’ );
// Unhook WooCommerce Sidebar – use Genesis Sidebars instead
remove_action( ‘woocommerce_sidebar’, ‘woocommerce_get_sidebar’, 10 );
I recently updated the code (last week) and sometimes the old code is cached and showing. Here’s the gist to the current code in case it’s still caching the old code here:
https://gist.github.com/AlphaBlossom/c11192a0132d494c3448#file-woocommerce-genesis-theme-support-php
I tried all sidebar layouts and they all worked correctly. Let me know how it goes.
Martin says
Hi Tony, thanks so much for following this up. It was my fault. It worked once I cleared my browser cache. Should have thought of that before posting. I appreciate your help and the code, which was just what I needed. Thanks
Tony Eppright says
Hi Martin, glad to hear you got it sorted! Really happy that I could help!
Ciaran Whelan says
I wanted to share this article, but for such a great content site it seems to lack in the most important thing. Sharing the content. Please add so I can share this post with my colleges without having to copy paste the URL to an email or Facebook.
Tony Eppright says
Thank you, Ciaran. I have added the share button to make things easier for our readers. I appreciate your input!
silverporl says
Hello. Thanks for this awesome code snippet, works fine for me with the latest version of Genesis and WooCommerce. However I wish to display different sidebar widgets on the taxonomy and single product pages, ideally using the Genesis Simple Sidebars plug-in. Does anybody know how this can be achived? I kind of had it working using the Genesis Connect Plugin but then other errors were occurring. I guess I could also register another sidebar area, stick the Widgets I wish to display (such as the cart widget) in there. But then I am not sure what code needs adding to the above to replace the standard primary sidebar with my custom sidebar? Any advice and code ideas on this would be greatly appreciated. Many thanks in advance!
Tony Eppright says
Hi @silverporl:disqus, glad to hear it helped! I haven’t tried to do what you’re doing, but you should be able to do it using the standard Genesis hooks.
Genesis Simple Sidebars should work for the single product pages since you can select them in the wp admin.
For the taxonomy pages, you should be able to use a conditional statement to remove the default sidebar and replace it with your new sidebar.
You could also copy over the WooCommerce template files (only the ones you need) into your theme and modify the template file to show the correct sidebar. Doing it this way you don’t have to worry about modifying the WooCommerce core files, so they won’t get overwritten with updates.
Let me know if you get stuck and I’ll do my best to help.
silverporl says
Hi Tony, thanks for your reply. In the end I solved it with this code in my functions.php.
// NEW WIDGET AREA FOR SINGLE PRODUCT AND TAXONOMY VIEW
if ( function_exists(‘register_sidebar’) )
register_sidebar(array(‘name’=>’Single Product Sidebar’,
‘before_widget’ => ”,
‘after_widget’ => ”,
‘id’ => ‘product_sidebar’,
‘description’ => ‘Widgets in this area will be shown on the single product view and taxonomy pages only.’,
‘before_title’ => ”,
‘after_title’ => ”,
));
// content-single-product.php HOOK to get into the page to add single product sidebar.
add_action(‘woocommerce_after_single_product’, ‘single_product_sidebar_hook’);
function single_product_sidebar_hook() {
remove_action(‘genesis_sidebar’, ‘ss_do_sidebar’);
add_action(‘genesis_sidebar’, ‘genesis_single_product_sidebar’);
function genesis_single_product_sidebar() {
dynamic_sidebar (‘product_sidebar’);
}
}
// add sidebar to taxonomy pages
add_action(‘woocommerce_archive_description’, ‘pv_remove_sidebar’);
function pv_remove_sidebar() {
remove_action(‘genesis_sidebar’, ‘ss_do_sidebar’);
add_action(‘genesis_sidebar’, ‘genesis_single_product_sidebar’);
function genesis_single_product_sidebar() {
dynamic_sidebar (‘product_sidebar’);
}
}
Inspired by: https://wpgenesis.blogspot.de/2013/06/custom-sidebar-for-single-product-view.html
Slightly modified to suit my needs. I had to use “ss_do_sidebar” instead of “genesis_do_sidebar” as I also have the Genesis Simple Sidebars Plug-in installed to use on other “static” pages via the wp-admin.
Hope this will help somebody searching for a solution in the future.
Tony Eppright says
awesome, thanks for sharing @silverporl:disqus! The Genesis/Woocommerce function in the article restores the Genesis default sidebars (removing the WooCommerce sidebars) so it should work normally with the Genesis layout functions.
Glad you got it working!
Devprolabs Media says
WOW amazing tutorial. I need some code for SEO option in woocommerce page & single product. Thanks Tony!
Tony Eppright says
Awesome, glad I could help a little 🙂
Mike says
Is it possible to use Woocommerce breadcrumbs only in the Woocommerce pages and keep Genesis breadcrumbs for all non-Woocommerce pages
Thanks!
Tony Eppright says
Hi @disqus_1Iqjn00Hwj:disqus, I haven’t tested it, but you should be able to use a conditional statement, something like:
add_action( ‘get_header’, ‘youruniqueprefix_remove_wc_breadcrumbs’ );
function youruniqueprefix_remove_wc_breadcrumbs() {
if( is_woocommerce() ) {
remove_action( ‘genesis_before_loop’, ‘genesis_do_breadcrumbs’ );
} else {
remove_action( ‘woocommerce_before_main_content’, ‘woocommerce_breadcrumb’, 20, 0 );
}
}
Give it a shot and let me know if you have any issues and I’ll take a closer look.
Mike says
Hi, Tony,
Sorry to take so long to get back to you – your suggestion worked great! Here’s the code I wound up with:
// Use Woocommerce breadcrumbs for Woocommerce
// Use Genesis breadcrumbs for everything else
add_action( ‘get_header’, ‘youruniqueprefix_remove_wc_breadcrumbs’ );
function youruniqueprefix_remove_wc_breadcrumbs() {
if( is_woocommerce() ) {
remove_action( ‘genesis_before_loop’, ‘genesis_do_breadcrumbs’ );
} else {
remove_action( ‘woocommerce_before_main_content’, ‘woocommerce_breadcrumb’, 20, 0 );
}
}
Let me know if you see any potential issues I’m overlooking.
Thanks again,
Mike
Tony Eppright says
Hey @disqus_1Iqjn00Hwj:disqus , Looks great. Glad to hear it worked for you!
Mike Dickson says
Hi,
Everything seems to working in Genesis Integration above but I’m still getting “Your theme does not declare Woocommerce support”
I have your recommended code:
// Remove WooCommerce Theme Support admin message
add_theme_support( ‘woocommerce’ );
at the end of my functions.
I also tried similar code from Woocommerce but it didn’t work either.
Any Ideas?
What are the ramifications? Can I just ignore the warning or does Woocommerce execute differently depending on the declaration of Woocommerce Support?
Thanks,
Mike
Tony Eppright says
Hi @disqus_3ttnTFYlKf:disqus , I’m not sure why that’s not working, unless they’ve made a recent change that I’m not aware of.
As far as I know it’s only a nag, no effects other than reminding you that your theme may not be compatible so if you.
Might be worth contacting Woo support to see if they’ve changed this code.