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-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>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:
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 (
Everything in the right place – I hope this helps somebody else!