Add a custom sidebar to WooCommerce pages

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.

Conclusion

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.