In this tutorial I explain how you can add a custom sidebar to WooCommerce pages within your Genesis theme. I assume you’ve installed Genesis, WooCommerce and the Genesis connect to Woo plugin.
Do we need a custom sidebar for WooCommerce pages?
If all of your theme pages, post, archives etc. are full width you probably don’t need an extra sidebar for your WooCommerce pages. In that case you most likely can use the Genesis primary sidebar. In all other cases a custom sidebar is preferred. This has the advantage of displaying only webshop widgets on WooCommerce pages.
Registering the widget area
Below is the code that we use to register a custom widget area for the WooCommerce pages. Add this snippet to your functions.php and save the file. Don’t forget to update the textdomain.
Now, when you navigate to Appearance > Widgets a new widget area with the name Webshop Sidebar is visible.
Adding the sidebar to the WooCommerce pages
With the following chunk of code we unhook the default Genesis sidebar and add our newly made webshop sidebar. At line 9 we check if the page is a WooCommerce page. This returns true if we’re on a page which uses WooCommerce templates (cart and checkout are standard pages with shortcodes and thus are not included). More information about WooCommerce conditional tags can be found here.
Add the above code to the functions.php of your Genesis child theme.
Display the WooCommerce sidebar
Finally, add this snippet to your theme’s function.php.
When there are no widgets added to the new widget area, the widget description is visible when your logged in.
In my opinion every Genesis theme which supports WooCommerce needs a custom sidebar for the webshop pages. It will keep your content clean and separates your webshop widgets from other pages, blog post etc. Last but not least, it’s good for your webshop’s conversion.
I´m working with the Season Pro theme and I have the opposite problem. I want to change the default layout with the side bar for the full content one.
How could I get that?
Frank Schrijvers says
You can just set the page to full-width on the (shop)page settings.
Thanks for posting this, I was having difficulty using my standard method.
Your code is working great for the catalog and single product pages (have it on a couple different Genesis Based sites)but I can’t seem to get it to work with the cart and checkout pages. I’ve tried adding || is_page(array()) to the woocommerce if statement both id and slug and neither method works.
Do you have any suggestions?
Frank Schrijvers says
Is the checkout set to have a sidebar in the page settings?