Using WordPress Graphene theme with WooCommerce

I’ve recently been updating a WordPress site that uses the template Graphene, which needed to have an eCommerce shop added – and WooCommerce was chosen.

The problem was that on the WooCommerce pages, Graphene’s right column of widgets started appearing under the main content, with a gap where they should have been.  I didn’t seem to be alone with this issue, but none of the suggestions that I found quite solved it.

e.g. Google search for ‘Graphene Woocommerce‘.

While investigating how pages are created with WooCommerce, I found that in wp-content/plugins/woocommerce/templates/global there is a wrapper-end.php and wrapper-start.php – these add some extra <div> wrappers around the WooCommerce section on the page – playing with those wasn’t quite enough to fix this issue, and editing those files wouldn’t be a good idea anyway in the long run.

<div> or </div> in the wrong place?

The issue seemed to just be a case of a <div> or </div> being in the wrong place so that the sidebar (in this case <div id="sidebar1">) wouldn’t sit in the right place on the page.

To cut a long story short, I edited the functions.php file in the child theme (you’re using a child theme, right!?), and add this:

(Based on this forum post by Luko.)

What this does is remove (with remove_action) what WooCommerce would normally add before and after its place on the page and then add a new version.

In my case, the </div> ends the <div id="content-main"> (where the main page content is, and in this case where the WooCommerce stuff is) and the <div id="extra-div"> then surrounds the sidebar1 section.  This is because after the sidebar1 there are two end divs (</div></div>).

Everything in the right place – I hope this helps somebody else!