WooCommerce is arguably the best eCommerce plugin for WordPress. Getting it to integrate well with the Genesis Framework is essential for our eCommerce sites at LimeCuda. Unfortunately, out of the box, WooCommerce will break your defined Genesis layouts and display full-width above your sidebars. Thankfully, this can be fixed in a few, quick steps.
* If you are using a premium child theme and you don’t want to modify those files, try the Genesis Connect for WooCommerce plugin
- Add the following to your theme’s
functions.phpfile - Create a new file in your child theme called
woocommerce.phpand add the following code: - Finally, go back to your
functions.phpfile and declare support for WooCommerce
Now, just add the styling to match your child theme and you’ll have a beautifully integrated eCommerce experience for your site.
Are you using WooCommerce for your eCommerce sites? Check out the PayPal Payments Advanced plugin we developed for WooCommerce
Hi Josh,
Informative article.
Do I still need to apply these changes if I have the “Genesis Connect” plugin installed?
Hey Jim,
No, it looks like that plugin will take care of the layout issues for you. I’ll actually add that as a quick solution for Genesis users working with premium child themes.
Thanks!
Hi Josh
I just read your article and wanted to let you know about a theme I recently developed which integrates WooCommerce and Genesis using the Genesis Connect plugin. The plugin works perfectly and I simply created a number of additional functions in the theme functions.php file and also added a new WooCommerce CSS file and changed a couple of templates to help with responsiveness.
The theme is called ENVY. You can view the demo at http://envy.krolyn.com – I’d love to know your thoughts.
Thanks
Jon
Hey Jon, the theme looks great! I would love to talk to you sometime and pick your brain about life in the Genesis child theme business.
I’d be happy to, Josh. Email me on the registered address with this forum and we can setup a time to Skype! Glad you like the theme 🙂 Cheers, Jon
Works on enterprise pro as well!
Hey Josh thank you so much for sharing this. I am trying Genesis for the first time and I am facing the same issue. But this worked for me. You saved a lot of time of mine.
You are awesome!! The genesis connect plugin hasn’t been updated in quite a while and it didn’t seem to be playing nice with my theme. Plus, I prefer to have stuff “baked in” rather than relying on a plugin when I can. I searched the internet for a simple tutorial and everyone seemed to require the connect plugin. Found your site, added your code snippets and a bit of css, and I’m golden! Thank you so much!
I haven’t given your code a try but like some have mentioned, the Genesis Connect plugin is really outdated. I’m working with a Genesis child theme (Epik) for the first time and the desktop version looks great, but the mobile version is a horror show. I’m wondering if deactivating the Connect plugin, removing the support in the functions file, then replacing it with your code will work.
Thanks.