WooCommerce (WC) and themes from WooThemes go hand in hand when building an e-commerce website. But what if you wanted to use a theme not from WooThemes? There may be some compatibility issues but it could still work. To solve these problems, we’ll need to set it up in such a way that your non-WC or custom theme supports woocommerce and make the integration flawless.
WC gives us two methods to do this in their documentation: either we use hooks or make use of their catch-all woocommerce_content() function. The second method is the easier of the two so I’ll only talk about the second method of the catch-all woocommerce_content() function in this post.
To start, know that it’s basically divided into 5 simple steps of which I’ll clearly outline below:
STEP 1: Duplicate your page.php file and rename it as woocommerce.php
For this, you’ll need to access your website files using an FTP program of your choice or cPanel file manager. Find your page.php file which is usually located in wp-content/themes/[YOURTHEME]/page.php.
All themes should have this file so simply make a copy of yours then rename it as woocommerce.php. Basically, you’re creating a file called woocommerce.php in which the code written inside is the same as in page.php.
Minor disclaimer: if you’re using a child theme, you’ll need to copy the page.php of the parent theme and place woocommerce.php on the child theme so that you don’t have to worry about it being overwritten when the theme is updated.
STEP 2: Edit woocommerce.php and locate the loop
After creating the file woocommerce.php, you then need to edit it with the editor of your choice. When it’s opened, browse through and look for code that looks like the one below:
It usually starts with
<?php if ( have_posts() ) :
and ends with
<?php endif; ?>
but in our case it ends with
so it’s not always the same. This bit is called the loop and you just need to determine where it starts and where it ends.
STEP 3: Replace the loop with <?php woocommerce_content(); ?>
Now, after finding the loop, replace it with:
<?php woocommerce_content(); ?>
I know what you’re thinking and the answer is yes. That lengthy bit of code will be replaced by just this one line. And that’s entirely the point – nothing to be alarmed of. And when you’ve done that, it should look like the one below:
Now, save it.
STEP 4: Declare support for WooCommerce
Next, we’ll do something about the notice message that looks like the one below.
To do this, we’ll need to add:
add_theme_support( 'woocommerce' );
to our functions.php. If you’re using a child theme, you’ll need to find the functions.php file that is inside the child theme folder. Once you’ve found the correct functions.php, place the code exactly at the end. Now, save. And that’s it – that pesky notice should be gone now.
STEP 5: Bask in your success
Yup, you heard that right. We’re done here. Bask in your success a little.
So that’s about it – that’s how to integrate woocommerce into a non-Woothemes Theme. For the unavoidable instances that you need to make use of a non-WC or custom theme, you just need to follow those steps above and you’re free to use woocommerce however you like.
Do you have any other suggestions? Feel free to comment below.