Welcome Here And Thanks For Visiting. Like Us On Facebook...

EXEIdeas – Let's Your Mind Rock » WordPress / WordPress Tricks » How To Make Any WordPress Theme WooCommerce Compatible?

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.

Recommended For You:
How To Add rel=”canonical” META Tag In WordPress Without Plugin?

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.

Recommended For You:
All In One Blogger Importer WordPress Plugin: Full ScreenShot Tutorial

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 --
----------------------------------------------- */{font-size:20px;}
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%;}{text-align:center;clear:both;} 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.

Recommended For You:
Wordpress Development: Why It Makes Sense?

You Like It, Please Share This Recipe With Your Friends Using...

2 Responses to “How To Make Any WordPress Theme WooCommerce Compatible?”

  1. Lorrie Ann says:

    Hello, i followed you instruction on how to incorperater woocommerce into a wordpress them. I was extremely happy when all seemed well and my them wasn’t upside down. But not all was good. It wasn’t until i clicked on the “Shop” link did I realize something wasn’t right, the server cannot find my “shop”. It is there, I can see it in the directory, but the server cannot find it, please help 😀 Ty

    • EXEIdeas says:

      Welcome here and thanks for reading our article and sharing your views. Can you share the link of your DEMO site…???

Leave a Reply

Your email address will not be published. Required fields are marked *