Generally, WooCommerce templates integrate nice with WordPress themes but not with the Genesis framework. It may cause problems with the theme layout. No need for panic, as we have the solution. We describe three ways to integrate WooCommerce with the Genesis framework.
1. The Genesis Connect for WooCommerce plugin
This plugin is a save choice and it is the most easy solution, especially if you don’t want to edit the functions.php of your Genesis child theme. This Plugin replaces the WooCommerce built-in shop templates with its own Genesis-ready versions. The con is that some of the templates are out of date.
You can download the plugin here.
2. BeardedGinger Method
This method from Josh Mallard is pretty straightforward. Nonetheless, it works like a charm. In just three simple steps you’re able to fix the layout of your site and integrate WooCommerce.
Step 1: Create a new function in your theme’s functions.php file
Step 2: Create a new file in your child theme directory with the name woocommerce.php. Add the following code to this file.
This template will be used for all the WooCommerce pages within your site. It removes the default loop and replaces it with the WooCommerce content.
Step 3: Declare support for WooCommerce in your functions.php
3. AlphaBlossom Method
I personally favour the AplhaBlossom method, which offers a complete solution. It’s one chunk of code that you place directly in your theme’s functions.php. I prefer to include it using include_once in the functions.php.
The remove action deletes the WooCommerce hooks and wrappers. New functions will replace the WooCommerce before and after wrappers. The xhtml markup seems unnecessary. We all build themes in HTML5, right?
The last step is declaring support for WooCommerce in your functions.php.
Conclusion
Every solution got its pros and cons. For bigger projects and theme development I prefer the latter method. If you’re not comfortable with editing the functions.php you may choose the plugin. And, for a quick solution option two is great. As a matter of fact, I’ve recently used this option in two smaller projects.
Frank, Thanks … your last recommendation worked. I like easy fixes from professionals such as yourself. Peace!
Thanks this was very helpful and a better solution!
After the update to Genesis Connect for WooCommerce broke my client’s site (PHP Fatal error: require_once(): Failed opening required ‘/www/wp-content/plugins/genesis-connect-woocommerce/lib/posts-per-page.php’ …) – I tried the AlphaBlossom method. It worked like a charm.
I use Genesis with Dynamik from Cobalt Apps, which makes it very easy to drop the code that normally goes into functions.php into the customs functions area.
Thank you!
For the life of me, I just cannot get my WooCommerce pages to display properly! I have tried every method (I think). Please help!
Hi Nathan, the first thing you should do is check your thumbnail settings under WooCommerce > Settings > Products > Display. Next you should regenerate the thumbnails. Hopefully this helps fixing the layout issues.
Thanks the solution was solid. It worked and now I am looking to set up my store.
Frank, I would like to know if we must copy the all the codes and paste it in any part of the functions.php or in a specific section and order?
Also, If you can confirm doing this on the editor section on WordPress.
Waiting for your reply. Thanks
Hey Andres,
If you follow the steps in the tutorial you can’t go wrong. If you use the BeardedGinger Method, not all the code has to be copy/past into your functions.php, but this is explained in the tut.
I would strongly not recommend to make these changes directly in the WordPress editor.
Frank
Thank you for this tutorial. I have successfully installed on RainaStudio.com And the warning message is gone. How do I integrate 2chekout with woocommerce?
I’m not familiar with 2checkout but on docs.woocommerce.com you can find more information; https://docs.woocommerce.com/document/2checkout-api-gateway/
Good recommendation,… now I’m wondering how to integrate woocommerce products in search page…
hi, I’m using Genesis as my parent theme and rebel childtheme from imagely, will this applies also to child theme? I follow the BeardedGinger Method(2nd method) and the third one AlphaBlossom Method but doesn’t work.. I look for forward to your response.
My problem is with the product gallery (the images located just below the primary image of the product) – i am talking on the single product page the product gallery images when click will not display, thus can’t be zoom.
thank you. 🙂
Yes, this should work with every chil theme. For adding support for the gallery, zoom and lightbox function have al ook at: https://woocommerce.wordpress.com/2017/02/28/adding-support-for-woocommerce-2-7s-new-gallery-feature-to-your-theme/