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 it’s 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 that will be used for all WooCommerce taxonomy and post type displays. While an easy catch-all solution, it does have a drawback in that this template is 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.

Note: When creating woocommerce.php in your theme’s folder, you will not be able to override the woocommerce/archive-product.php custom template as woocommerce.php has 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.

Insert 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 IDs 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. Do this by adding the following to your theme support function:

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 that work out of the box as a hassle-free solution.

We also have our team of Affiliated WooWorkers if you are still unable to make it work, or need custom development for your site.

Back to the top