Installing Woocommerce and Genesis together often result in a website that doesn’t look good. Out of the box, Woocommerce will shift the elements of your entire Genesis website to the top and this will break your website. Fortunately there’s two options to resolve this issue and get Woocommerce and Genesis working together as intended.
- Download and install the Genesis Connect for Woocommerce plugin from the WordPress plugin database.
- Get your hands dirty and edit the functions.php and css files of your Genesis website.
Option 1 is a no-brainer, whilst option 2 need some explanation:
First we need to add the below code to the functions file of your Genesis theme:
Then we need to create a new Woocommerce page template and put this in your main theme folder:
And finally we need to connect Woocommerce with Genesis by putting this into your theme’s functions file:
The only thing that is left now, is to edit your theme’s css file to make the Woocommerce style match your Genesis theme.