Third party / custom / non-WC theme compatibility

WooCommerce looks great with all WordPress themes as of version 3.3, even if they are not WooCommerce-specific themes and do not formally declare support. Templates render inside the content, and this keeps everything looking natural on your site.

Here’s a before and after of the same non-WooCommerce theme — on the left is the theme without 3.3; on the right is the theme using 3.3.

Non-WooCommerce themes, by default, also include:

  • Zoom feature enabled – ability to zoom in/out on a product image
  • Lightbox feature enabled – product gallery images pop up to examine closer
  • Comments enabled, not Reviews – visitors/buyers can leave comments, same as a post, and not product ratings or reviews

Should you be using a version of WooCommerce prior to 3.3, we recommend updating to the latest version. It’s also our first suggestion, if you’re experiencing issues with your theme as this will likely be the solution.

Sites/stores not using WooCommerce 3.3

Issues arise when the default WooCommerce content wrappers do not match your chosen theme. This manifests itself by breaking your layout on WooCommerce pages and shifting 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
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; or use a WooCommerce theme. We’re unable to assist with customization under our Support Policy, as the issue is with your theme and not WooCommerce.

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 ↑ Back to top

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) ↑ Back to top

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

Replace the loop ↑ Back to top

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.

Use a WooCommerce theme ↑ Back to top

If unable to work out the above methods or involve a developer, we recommend looking at our WooCommerce Themes that work out of the box as a hassle-free solution.

 

 

WooCommerce - the most customizable eCommerce platform for building your online business.

Back to the top