Creating an e-commerce site with Headway and WooCommerce is pretty easy! Headway has compatibility with WooCommerce built-in and you can even style some of the WooCommerce elements in the Headway Visual Editor. There is also a video at the end that goes over setting up!
Install Headway and WooCommerce
First, you’ll need to have Headway installed. See our documentation for how to Install Headway. Secondly, install WooCommerce. Go to Plugins » Add New and then search for WooCommerce to install and activate it.
You need to create the pages needed for WooCommerce. You can do this manually or after you install WooCommerce for the first time, there is an installation wizard after you activate WooCommerce. In that wizard, you will create your first product.
Once you are done settings things up (you don’t need to add ALL products before moving on to the next step but adding a few would be good).
First and foremost, you will use a content block to pull in the correct data for WooCommerce.
One thing that is a big source of confusion is that the Shop Base page that you set in WooCommerce settings, is actually a post type archive since products are added as a custom post type.
So to edit the shop base base page layout, in the Headway Layout Selector, you choose Archive » Post Type » Product. Use a content block set to default mode and it will pull the correct content automatically. No custom query is needed! Easy, right?
Next, to edit the layout for viewing the single products, you edit Single » Product. However, you can and should use inheritance if you can. The products will inherit their layout from Single if the Single » Product layout is not customized. If Single is not customized and is inheriting from Blog Index, then the Single » Product will also inherit from Blog Index.
Finally, the other pages, like Checkout, My Account, etc are all actual pages so they inherit from Single » Page, if customized, otherwise from Single, if customized, and so on.
Styling WooCommerce Design Elements
Since you use a content block for the WooCommerce layouts, the design elements are found in the Content Block area in Design Mode. Not all WooCommerce elements are able to be styled in Design Mode. For some of them, you will need CSS.
Finally, we have a video that goes over the setup in case you need it!