While hunting for a solution for WooCommerce last night, I ran into Jigoshop. So it turns out WooCommerce is based on Jigoshop. Word on the web is that WooCommerce split from Jigoshop. The products are fairly similar on the surface and indeed share this problem.
The problem is that the navigation column for WordPress is pushed down below the main content on the ‘shop’ link and on product pages in WooCommerce. I searched all over for this last night and found all sorts of crazy fixes. As you can see in the screenshot below, the navigation column is pushed down on the right of the page, it should be up and level with the main content. Of course! Why does this happen? Both of these ecommerce plugins replace the page layout code with their own! So unless your theme is exactly like the default WordPress theme, they are probably going to break your layout somehow.
I uninstalled WooCommerce and installed Jigoshop on the advice of one persons comments saying they did and the issue went away. No not for me. A bit annoying to have to delete a bunch of extra pages when you uninstall but livable. Jigoshop unfortunately, had the same issue. Jigoshop support and other forums had posts saying to modify such and such hooks in functions.php and do some difficult rewrites of pages in the WooCommerce and/or Jigoshop plugins templates and theme folders respectively. Too much, I was almost ready to install VQmod, a mod that allows you to rewrite php on the fly! Yeah that deserves it’s own post. But I waited.
I did some more googling and the same unsatisfactory answers came up; this has been an issue for over a year apparently. Unwilling to try those solutions, I uninstalled Jigo, reinstalled WooCommerce and went to bed.
So I slept on it. I dreamt of a solution. Wow who would have thought of it. When I awoke I realized that solution had absolutely nothing to do with the real world and would not work. I skipped breakfast and sat down some twenty minutes ago now. I looked in the WooCommerce folder and into the template folder and took a new look at loop-product.php. No the offending code wasn’t there. I next looked in the “wp-content/plugins/woocommerce/templates/shop” folder, (a bit of a hunch but I had to start somewhere). So there are 2 files in there that look promising. wrapper-start.php and wrapper-end.php. I open wrapper start.php and there is the offensive code:
So I give it the first modification that comes to mind. I go to my WordPress themes folder and grab the code from “page.php”.
So I modify the code thus:
I upload that, refresh the page and VOILA! WUNDERBAR! It works. I am delightfully surprised by this easy fix. So delighted I actually blog about it.
And now you can too. If you need help with your blog, php code, database, Content Management System, CSS layout, HTML or just about anything else on the web, give a holler 808 283 7651 and ask for Jesse or go to my main Maui web design site and email me. I’ll take care of you.