Making A Theme WooCommerce Compatible

Posted by leon on July 10, 2013 in Themes, Uncategorized, WooCommerce, WordPress |

I’ve posted twice in the past (once last year, and once more recently) about making your WordPress theme more WooCommerce-friendly. This should be my final installment of that series, where I tackle the Big Daddy of WooCommerce compatibility. The first thing you’ll probably notice is that the sidebar jumps below the content area on any woocommerce-specific page (checkout, cart, account, product listings, inventory, etc)”

What’s Going Wrong?

The source of the problem is that WooCommerce is hijacking “the loop” – the all-important routine in WordPress that makes your posts and pages show up. It does that so it can put your products on the same style page as the rest of the site. But in doing so, it adds extra style tags, which can (and often do) throw off other elements on the page.

How to Fix it

You really have two options to resolve this problem:

  1. Create a whole new template and use the “woocommerce_content()” function instead of the loop.
  2. Use a feature called “hooks”

WooCommerce does a nice job of explaining your two options on their “Third Party/Custom/non WC Compatible” page. The problem with Woo’s description is that (in my opinion) they leave out a couple of key points and don’t provide enough detail. That’s really what this post is about. Regarding creating a new template, my advice is: don’t bother. It often doesn’t give satisfying results, especially with themes that are not Woo-compatible, but are fairly complex. So let’s focus on hooks, and getting them done as simply and quickly as possible.

The Roadmap

You will be editing your actual theme files to make this happen. They are located in /wp-content/themes/your-theme-name. The files to look at are functions.php and style.css. You might need to refer to page.php or index.php just to see how things are laying out, but you shouldn’t have to edit it.

BONUS: if you are using WordPress Jetpack you don’t need to edit style.css. You can use the “Edit CSS” option instead.

  1. In functions.php you are first telling WooCommerce to NOT add the normal tags around catalog items, and then you tell it to add tags of your choosing.
  2. Then in style.css (or the Appearance->Edit CSS screen) you are going to add a few css styles to make the code you put in function.php actually do something.

Part 1: Edit functions.php

Cut and paste this whole thing into the top of your functions.php file, after the <?php line:

//this line removes the existing Woocommerce codes
remove_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10);
remove_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10);

//This line adds a new action which adds a tag BEFORE the woocommerce "stuff"
add_action('woocommerce_before_main_content', 'my_theme_wrapper_start', 10);

//This line adds a new action which adds a tag AFTER the woocommerce "stuff"
add_action('woocommerce_after_main_content', 'my_theme_wrapper_end', 10);

//This line adds a new css section tag called "woogrid" BEFORE the woocommerce "stuff"
function my_theme_wrapper_start() { echo '<section id="woogrid">'; }

//This line ends the new "woogrid" section
function my_theme_wrapper_end() { echo '</section>'; }

What this will do is insert a new section block named “woogrid” on your page. By itself, that doesn’t do anything. Now you need to identify what the “woogrid” style is going to do:

Part 2: Set up Your Styles

The style code below causes anything inside the <div =”woogrid”> block to be 614px wide, left-justified on the page, with a specific background color, etc. You will almost certainly have to modify that set of options for your own theme.

It also sets up the actual layout of items in your catalog (which naturally appear in an unordered list format (ie: <ul><li>product_information</li></ul>). Again, you’ll probably have to modify some of this to match your particular layout.

#woogrid {
border-right:1px dotted #ccc;
padding:15px 0px 30px 15px;
background-color: #fdfdfd;

#woogrid ul li {
width: 160px;
min-height: 250px;
border: 1px solid #000; display: -moz-inline-stack;
display: inline-block;
vertical-align: top;
margin: 5px; zoom: 1;

Once you have those two items in place, you should see the catalogue, inventory and product list pages start to get under control.

Tags: , ,


Leave a Reply

Copyright © 2012-2017 AdatoSystems Web Design All rights reserved.
This site is using the Desk Mess Mirrored theme, v2.5, from BuyNowShop.com.