Over the course of a few years, the WooCommerce plugin by WooThemes has become the undisputed top choice for WordPress small business owners looking to add e-commerce functionality to their site. So if you ever wanted to create your own online storefront, using WooCommerce is one of the popular ways to go.
However, many Genesis Framework users that wished to add the plugin found that the theme doesn’t naturally support WooCommerce. The biggest issue being that the plugin somehow messed with the original layout of most Genesis Themes and would not work out of the box.
Integrating the plugin with the proper code became a real hassle for many, but thankfully, the wonderful developers over at StudioPress have been paying attention to our pleas and cries for help.
A couple years ago, StudioPress released the wonderful, Genesis Connect For WooCommerce plugin. This finally allowed all of us Genesis framework owners a simple way to integrate WooCommerce into their sites.
However, getting things to work properly is still not as simple as downloading the plugin and clicking the “Activate” button. There are a couple things you need to do before your site is ready for WooCommerce.
Before You Start
You would think this was obvious, but it’s still worth mentioning. Many opt-in to using a predesigned child theme like Dynamik or Eleven40Pro to name a couple. However, some chose to just stick with the default layout of the Genesis Framework.
This is absolutely fine, but I still like to suggest using a child theme. The plugin should work fine with the framework alone, so technically speaking, you don’t need to have a child theme to make it work. But the reason we seasoned WordPress users like to suggest using them is because we know that when updates come along, there is a higher chance of configurations going a bit haywire when you don’t use one.
If you don’t know how to create a child theme, there are some other plugins in the WordPress Plugin repository that let you easily create one with just a simple click. I’ve listed a couple below.
In short, if you have a child theme, great! If not, the tutorial below should still work on the Genesis Framework alone, however, the Genesis Connect plugin does specifically mention Child Themes, so if you run into configuration issues after following this tutorial, this could be the reason.
Installing the Plugin
Go into your dashboard, scroll down to Plugins and click ‘Add new’. Enter Genesis Connect into the search bar.
Now, install the Genesis Connect for WooCommerce plugin, and once you’ve done that, be sure to activate it. Once you have activated the new plugin, you will see this box pop up:
Highlight and copy that snippet of code before you click the BACK button. In case you don’t, here is the code below:
add_theme_support( 'genesis-connect-woocommerce' );
Setting up the plugin
Now that you have the code, go back into your Dashboard, go to Appearance > Editor. This is what your screen should look like.
Be sure you click on functions.php file and not custom_functions.php. Now just copy/paste the above code snippet and click the Update File button.
I choose to add the snippet at the bottom on the file (as you can see highlighted in the photo above) just before the close out code in the file. I figured by putting it there that it would be easier to find again if I need to, but there doesn’t seem to be a need to place it in a specific spot except that it should be in the (functions.php) file.
Now that you’ve added the correct code in the correct place and updated the file, you need to go back to your Plugins section in your dashboard and activate the Genesis Connect plugin again. As soon as it is activated, head over to the WooCommerce section in your dashboard and you should be good to go.
Your Genesis site is now ready to use WooCommerce to power your online store!
For more information on getting started with setting up WooCommerce, take a look at the Getting Started documentation on the WooThemes site. It contains all the information you need to get started with using the plugin.