We’re big fans of the WooCommerce eCommerce plugin, which generally integrates well with WordPress themes.
When using it with the Genesis Framework there are often compatibility issues, or at the very least you’ll see this warning message in your WordPress admin panel:
Your theme does not declare WooCommerce support – if you encounter layout issues please read our integration guide or choose a WooCommerce theme
Visting the WooCommerce documentation on third-party theme compatibility gives several options to resolve this issue. We prefer to use the last method, hooks, which WooCommerce says is more flexible and similar to what they use with their own themes and the Twenty Ten and Eleven themes.
Although we haven’t used it much, another popular option is the Genesis Connect for WooCommerce Plugin.
For our basic needs, we’ll skip the plugin route and use the functions below to integrate the two seamlessly.
How We Integrate WooCommerce into Genesis Child Themes
Using the WooCommerce documentation, we’ll place the following code in our child theme’s functions.php file:
[gist id=”c11192a0132d494c3448″ file=”woocommerce-genesis-theme-support.php”]
Using remove_action, we remove the WooCommerce hooks woocommerce_before_main_content and woocommerce_after_main_content which output the WooCommerce wrappers.
We’ll then add our own functions to replace the WooCommerce before and after wrappers, using markup found in genesis/lib/framework.php. This could be further simplified by hardcoding your markup, but this way you keep the Genesis checks to make sure the markup is correct depending on if the site is set for html5 or xhtml.
It also keeps the Genesis hooks in place, which ensures compatibility with plugins and custom functions that may use those hooks.
Genesis Breadcrumbs or WooCommerce Breadcrumbs?
In our case, we want to use the Genesis Breadcrumbs, so we’ll add this function below to remove the WooCommerce Breadcrumbs:
[gist id=”c11192a0132d494c3448″ file=”replace-woocommerce-breadcrumbs-genesis.php”]
If you prefer to use the WooCommerce Breadcrumbs instead:
[gist id=”c11192a0132d494c3448″ file=”replace-genesis-breadcrumbs-woocommerce.php”]
The last step is to add this to your functions.php file to remove the WooCommerce Admin warning:
[gist id=”c11192a0132d494c3448″ file=”remove-woocommerce-admin-theme-support-warning.php”]