woocommerce shop page layout

woocommerce shop page layout

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 taxonomypages (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.

This can be fixed by using the catch-all woocommerce_content() function inside your theme.

Using woocommerce_content()

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.

Note: I found out that this technique will not work for certain themes so you need to enclose

<?php woocommerce_content(); ?> in a div like this:
<div class="woocommerce">
<?php woocommerce_content(); ?>
</div>

There are no comments published yet.

Leave a Comment