How to Fix the WooCommerce Template or Layout Problem on Certain WordPress Themes

I’ve been doing quite a bit of work with WooCommerce recently and it has quickly become one of my favorite e-commerce solutions for WordPress. WooCommerce is a free plugin by WooThemes.

I am not planning on review WooCommerce or it’s features other than to say I like it because there are plenty of reviews out there.

I did, however, want to discuss a simple fix for when the WooCommerce shop doesn’t work well with your theme and the layout of the store is messed up. WooCommerce works flawlessly with WooTheme’s that are specifically designed for WooCommerce. That doesn’t mean that you can’t use it with other themes or your current theme – I’ve used it with StudioPressm themes and free themes and have rarely run into issues. Occasionally, there is a layout issue and the following should almost always correct the problem.

The fix

1. Make a copy of your page.php template. You can do this under Appearance > Editor > page.php Most themes will have one but it is possible that your theme won’t. Copy the text and paste it into a text editor.
2. Save the copy as woocommerce.php
3. Look for the loop. The loop will start with

   <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

   and ends with

   <?php endwhile; else: ?>
   <p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
   <?php endif; ?>

   or something very similar. There is more information about the WordPress Loop in the WordPress Codex.

4. Replace the loop with

   <?php woocommerce_content(); ?>

5. Upload the new woocommerce.php file into your theme directory. You will need to use ftp to do this.
6. All layout issues with the WooCommerce shop should be resolved. I’ve done this a couple of times and it fixed the layout problems I was having.

If you would like assistance with setting up WooCommerce, please contact me to discuss availability and rates.

photo credit: 30302870@N08