Fixing the layout
On the most part, WooCommerce templates will integrate nicely with most WordPress themes. Where you may run into problems is when the default WooCommerce content wrappers do not match your chosen theme’s. This will manifest itself by breaking your layout on WooCommerce pages and shifting your sidebars into incorrect positions. There are two ways to fix this; using WooCommerce hooks (resulting in maximum flexibility) or, since 1.4 using our catch-all woocommerce_content() function (less flexible).
Using woocommerce_content() (1.4+)
If you’re using 1.4 there’s an option to create a new template within your theme which will be used for all WooCommerce content. While an easy catch-all solution, it does have a draw back in that this template will be used for all WooCommerce pages. Product categories, user accounts, cart, checkout, everything. “Short-cuts lead to long delays” – you’ve been warned!
The easiest way to implement this is to copy/paste page.php within your theme, rename it was woocommerce.php and replace the standard page loop with <?php woocommerce_content(); ?>. Upload and you’re done!
Using hooks
First unhook the WooCommerce wrappers;
remove_action( ‘woocommerce_before_main_content’, ‘woocommerce_output_content_wrapper’, 10);
remove_action( ‘woocommerce_after_main_content’, ‘woocommerce_output_content_wrapper_end’, 10);
Then hook in your own;
add_action(‘woocommerce_before_main_content’, create_function(”, ‘echo “<section id=\”main\”>”;’), 10);
add_action(‘woocommerce_after_main_content’, create_function(”, ‘echo “</section>”;’), 10);
Making sure that the markup matches that of your theme. If you’re unsure of which classes or ID’s to use take a look at page.php for a guide.
