How To Make Any WordPress Theme WooCommerce Compatible?

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 taxonomy pages (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.

There are two ways to resolve this; using hooks (for advanced users/developers) or using catch-all woocommerce_content() function inside your theme.

Read More At: Third party / custom / non-WC theme compatibility

Before going below, make sure that you installed WooCommerce – excelling eCommerce Plugin and if you are a newbie then first knowHow To Install Plugin In WordPress Blogs?

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.

How To Make WooCommerce Template Page?

To set up this template page perform the following steps:
Step 1:) First of all, login to your FTP.
Step 2:) Now navigate to /home/mysite/www/wp-content/themes/YOUR_THEME.
Step 3:) Now find page.php and make a copy of it there.
Step 4:) Now rename that copy with woocommerce.php. This file should be found like this: /home/mysite/www/wp-content/themes/YOUR_THEME/woocommerce.php.
Step 5:) Now edit woocommerce.php page.
Step 6:) Here you need to find the loop. The loop usually starts with a < ?php if ( have_posts() ) : and usually ends with < ?php endif; ?>.
Step 7:) Now delete the entire codes between them.
Step 8:) Now add < ?php woocommerce_content(); ?> where you just deleted between the loop.
Step 9:) This will make it use WooCommerce’s loop instead.
Step 10:) Save the file. You’re done.

Note: When creating woocommerce.php in your theme’s folder, you won’t be able to override the woocommerce/archive-product.php custom template as woocommerce.php has the priority over archive-product.php. This is intended to prevent display issues.

Declare WooCommerce Support:

Once you’re happy that your theme fully supports WooCommerce, you should declare it in the code to hide the below error on your WordPress admin dashboard.

Your theme does not declare WooCommerce support

To do so you should add the following to your theme support function;
Step 1:) Now open function.php file from the list of your theme file in FTP.
Step 2:) Copy the below code and Paste it in the end of function.php file.

add_theme_support( 'woocommerce' );

Step 3:) Save the file. You’re done.

Add WooCommerce DEMO CSS:

Once its all ready, you will start seeing WooCommerce pages in your theme but all will be messed up so you have to design its all css but now to help you, here we are sharing a simple CSS code that will make your theme readable and later you can design it completely.
To do so you should add the following to your theme support function;
Step 1:) Now open style.css file from the list of your theme file in FTP.
Step 2:) Copy the below code and Paste it in the end of style.css file.

/* -----------------------------------------------
-- WooCommerce DEMO CSS --
----------------------------------------------- */
h1.page-title{font-size:20px;}
p.woocommerce-result-count{font-size:14px;}
ul.products{}
ul.products li{list-style-type:none;float:left;width:300px;text-align:center;border:1px solid #efefef;margin:5px;}
nav.woocommerce-pagination{clear:both;width:100%;}
ul.page-numbers{text-align:center;clear:both;}
ul.page-numbers li{list-style-type:none;display:inline;}
.product .images{float:left;margin-right:20px;}
.product .woocommerce-tabs{clear:both;}
.product .woocommerce-tabs ul.tabs{clear:both;}
.product .woocommerce-tabs ul.tabs li{list-style-type:none;display:inline;}

Step 3:) Save the file. You’re done.

Theme Files Editing Warning:

Keep in mind that every code that you will add in your themes files will be removed when you will change the theme. So after changing your theme, you have to follow this article again and you will get everything back same as it is now.

Last Words:

This is what we have and shared in easy steps for newbies so that they can easily know how it works. Stay with us because we are going to share a whole guide step by step about WordPress and make it easy for you. If you liked it then share it and be with us to get next tutorial. If you have any problem then feel free to ask us. We will help you with what we can or have.