Create an e-commerce WordPress site with Headway Themes and WooCommerce

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.

Setup WooCommerce

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).

Setup Headway

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.

woocommerce-shop-base-page

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?

woocommerce-shop-base-ls

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.

woocommence-design

Video

Finally, we have a video that goes over the setup in case you need it!

 

Spread the word!

6 Responses

  1. Thanks for posting this. The video and screen shots were particularly helpful. Any additional posts and videos about Headway and WooCommerce would be greatly appreciated!

  2. A client just asked for a shop so this was just what I was looking for 🙂
    Any additional tutorials or tips for WooCommerce integration and styling would be very welcome indeed!

  3. Beautiful! We are going to have the ability to have our own e-commerce shop separate from the Personal Websites given to us by our corporate office. I was wondering how to set that up but you have answered that question for me!

  4. I”m using HWT 4.0.5 and the single product page is not there so it is inheriting the layout from the front page. I can’t figure out how to edit or clone the layout for the single product so that I can see the information of the single product.

Leave a reply

Copyright © 2016 Vesped Inc. All Rights Reserved. Proudly Powered by Headway and WordPress