Mizanur Rahaman Mizan / July 29, 2013

How to make WordPress theme WooCommerce Compatible

Last week, I was working on a client’s website that they have built couple of years ago using WordPress. My Job was to integrate WooCommerce so that they can sell their service using that particular design. I quickly grab the job and then all of a sudden when I installed and done all the basics for WooCommerce a very eternal thing happened! The whole website broke up in clattered pieces!

How to make WordPress theme WooCommerce Compatible
How to make WordPress theme WooCommerce Compatible

Thanks to WooCoomerce as it always shows you what happened in the Dashboard. It gave me the idea that my theme isn’t WooCommerce compatible. The problems is when the default WooCommerce content wrappers do not match your chosen themes then it happens. This will make position for itself by breaking the layout on WooCommerce pages and shifting your sidebars into incorrect positions.

This problem can largely affect the shop page, the single product page and the taxonomy pages (categories and tags) due to the fact that 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.

Now what is the solution! Yes there is solution! In fact, we have 2 ways to do that: using hooks (for advanced users/developers) or using our 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 content. While an easy catch-all solution, it does have a draw back in that this template will be used for all WooCommerce pages. Product categories, the shop page, single products. 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:

and usually ends with:

This varies between themes. Once you have found it, delete it. In its place put:

This will make it use WooCommerce’s loop instead. Save the file. You’re done.

Using hooks

The hook method is more involved that using woocommerce_content, but is more flexible. This is similar to the method we use when creating our themes. It’s also the method we use to integrate nicely with Twenty Ten and Eleven.

By inserting a few lines in your theme’s functions.php file, First unhook the WooCommerce wrappers;

Then hook in your own functions to display the wrappers your theme requires;

Make sure that the markup matches that of your theme. If you’re unsure of which classes or ID’s to use take a look at your theme’s page.php for a guide.

Declare WooCommerce support

Once you’re happy that your theme fully supports WooCommerce, you should declare it in the code to hide the “Your theme does not declare WooCommerce support” message. To do so you should add the following to your theme support function;

If the problem still persists ..

If you cannot work out the above methods, and don’t have access to a developer, I strongly recommend to change the theme or hire someone like me to work with! Share your thought by commenting. If you have any query don’t hesitate to comment also. I will try my best to answer!

FILED UNDER : Open Source , WordPress

Comments

  • Dharmendra kumar says

    hi

    Costum child theme:

    I use a parent theme twenty twelve and i develop a my_child theme costum install but image and js jquery file pick the parents theme and style.css pick a my_child theme so that my question is pick a image and other file from child folder.
    so please talk me a right Answare

    thanks

  • barthal mai says

    i following same steps but the product ,shop and other pages are not show prefect according to WC page . kindly help me.

  • andrew mcbride says

    This is just copied and pasted from other blogs and woocommerce’s documentation. What a terrible blog post and guide. Please remove this so google doesn’t see it and bring unsuspecting hopefuls like myself here.

    A total waste of time.

    Want to be helpful? Don’t copy and paste. Write original content.

    • Mizanur Rahaman Mizan says

      Dear Andrew, Thank you for your comment. This is a common problem so the solution would be common to all the sites. So it is not copied and pasted article. If it was a copy pasted article you won’t get it on Google as it is surviving as unique content to the eye of the search engine for a long time. You can check the content through any copy checker. The instruction steps are same throughout the web so that don’t lie in copy pasted content category. Anyway, let me know if you are having trouble to make your theme woocommerce compatible. I would be more than happy to help.

  • cute says

    Cute writer

Submit a Comment

Must be required * marked fields.

:*
:*

Mizanur Rahaman Mizan

Life-long student of technology, a teacher , a tourist & a foodie.

Get me @: My Page | FB Profile | Twitter

For special content , subscribe!

Subscribe to our mailing list

* indicates required
Read more:
SEO (Search Engine Optimization/সার্চ ইন্জিন অপটিমাইজেশন) কি?

আপনি একটা সাইট তৈরী করলেন যেটা অনেক তথ্যবহুল এবং আশা করেছিলেন যে হাজার হাজার ভিজিটর পাবেন,কিন্ত তা পাচ্ছেন না।কারন এখনও...

Top 20 Wireframing and Mockup Tools for Developers Plus 9 bonus

I guess you already know, wireframing is the key to efficient UX development for mobile and web applications. Wireframing tools...

Close