Search

Third party / custom / non-WC theme compatibility

For 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 themes. This will manifest itself by breaking your layout on WooCommerce pages and shifting your sidebars into incorrect positions.

This problem can potentially affect the shop page, the single product page and the taxonomy pages (categories and tags) because WooCommerce uses templates of its own to display these pages (and its impossible for WooCommerce to know exactly what markup your theme uses). Other “pages” (checkout, cart, account) are not affected because they use your theme’s page.php template.

There are two ways to resolve this; using hooks (for advanced users/developers) or using our catch-all woocommerce_content() function inside your theme.

Using woocommerce_content() ↑ Back to Top

This solution allows you to create a new template page within your theme which will be used for all WooCommerce taxonomy and post type displays. While an easy catch-all solution, it does have a draw back in that this template will be used for all WC taxonomies (product categories etc) and post types (product archives, single product pages). Developers are encouraged to use the hooks instead.

To set up this template page perform the following steps:

Duplicate page.php

Duplicate your theme’s page.php file, and name it woocommerce.php. This file should be found like this: wp-content/themes/YOURTHEME/woocommerce.php.

Edit your page (woocommerce.php)

Open up your newly created woocommerce.php in a text editor (or the editor of your choice).

Replace the loop

Next you need to find the loop (see The_Loop). The loop usually starts with a:

<?php if ( have_posts() ) :

and usually ends with:

<?php endif; ?>

This varies between themes. Once you have found it, delete it. In its place put:

<?php woocommerce_content(); ?>

This will make it use WooCommerce’s loop instead. Save the file. You’re done.

Please note: when creating woocommerce.php in your theme’s folder, you won’t be able to override the woocommerce/archive-product.php custom template as woocommerce.php has the priority over archive-product.php. This is intended to prevent display issues.

Using hooks ↑ Back to Top

The hook method is more involved than using woocommerce_content, but is more flexible. This is similar to the method we use when creating our themes. It’s also the method we use to integrate nicely with Twenty Ten and Eleven.

By inserting a few lines in your theme’s functions.php file, 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 functions to display the wrappers your theme requires;

add_action('woocommerce_before_main_content', 'my_theme_wrapper_start', 10);
add_action('woocommerce_after_main_content', 'my_theme_wrapper_end', 10);

function my_theme_wrapper_start() {
  echo '<section id="main">';
}

function my_theme_wrapper_end() {
  echo '</section>';
}

Make 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 your theme’s page.php for a guide.

Declare WooCommerce support ↑ Back to Top

Once you’re happy that your theme fully supports WooCommerce, you should declare it in the code to hide the “Your theme does not declare WooCommerce support” message. To do so you should add the following to your theme support function;

add_theme_support( 'woocommerce' );

If all else fails…

If you cannot work out the above methods, and don’t have access to a developer, we strongly recommend looking at our WooCommerce Themes which work out of the box as a hassle free solution.

We also have our team of Affiliated WooWorkers should you find that you are still unable to make it work, or are needing more custom development for your site.

Back to the top