WooCommerce Docs

Documentation, Reference Materials, and Tutorials for your WooCommerce products

Search

Third party / custom / non-WC theme compatibility

Note: Note that this is a Developer level doc. Select a WooExpert or Developer for help if you’re unfamiliar with code/templates and resolving potential conflicts. We’re unable to assist with customization under our Support Policy, as the issue is with your theme and not WooCommerce.

For the most part, WooCommerce templates will integrate nicely with most WordPress themes.

Where you may run into issues when the default WooCommerce content wrappers do not match your chosen theme. This manifests itself by breaking your layout on WooCommerce pages and shifting your sidebars into incorrect positions.

This can potentially affect the shop page, single product page and 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 unaffected because they use your theme’s page.php template.

There are two ways to resolve this:

  • Using hooks (for advanced users/developers)
  • 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 is 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:

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 themes. It’s also the method we use to integrate nicely with Twenty Ten to Twenty Sixteen themes.

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 guidance.

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.

Back to the top