How to make WordPress theme WooCommerce Compatible

Spread the love

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:

<?php if ( have_posts() ) :

and usually ends with:

<?php endif; ?>

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

<?php woocommerce_content(); ?>

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;

remove_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10);
remove_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10);

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

add_action('woocommerce_before_main_content', 'my_theme_wrapper_start', 10);
add_action('woocommerce_after_main_content', 'my_theme_wrapper_end', 10);

function my_theme_wrapper_start() {
  echo '<section id="main">';
}

function my_theme_wrapper_end() {
  echo '</section>';
}

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;

add_theme_support( 'woocommerce' );

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!


Spread the love

6 thoughts on “How to make WordPress theme WooCommerce Compatible

  1. 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

  2. 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.

    1. 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.

Leave a Reply

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

Related Articles

বাংলাদেশ রেলওয়ের অনলাইন টিকেট বুকিং এর বিভিন্ন টিকেট ক্লাস

Spread the love

Spread the loveআজ বাংলাদেশ রেলওয়ের টিকেট কিনলাম অনলাইনে। একটা প্রোগ্রাম এটেন্ড করতে যাব প্লাস কিছু গেস্ট আসবে এই কারনে। তো অনলাইনে টিকেট কিনতে যাবার পর ঘটলো বিপত্তি। কারন আমি নরমালি ৩ টা সিট নিয়ে ধারনা রাখি। শোভন চেয়ার সুলভ আর স্নিগ্ধা তো যখন টিকেট কিনতে


Spread the love

Yoda Style Conditionals ( Yoda Condition) Explained (Bengali/বাংলায়)

Spread the love

Spread the loveআমরা যারা প্রোগ্রামিং কিংবা ডেভেলপমেন্ট করি তাদের অনেকসময় সবকিছু ঠিকঠাকমত কন্ডিশন লেখার পরও দেখা যায় প্রোগ্রাম ভুল বিহেভ করে। এর পিছনে কিন্তু বিশাল একটা কিছুর হাত আছে। আমরা যখন কোন অপারেশন চালাই সেটা যদি ঠিকমত ঘটে তাহলে তাকে প্রোগ্রামিং এর ভাষায় ট্রু কেইস


Spread the love

দুই তিন মাসেই হয়ে যান লাখপতি, অনলাইন ক্যারিয়ারের মাধ্যমে! কতখানি সম্ভব?

Spread the love

Spread the loveএকটা কমন ট্রেন্ড লক্ষ্য করছি যে, সবাই শেষ ভরসা হিসেবে চেষ্টা করছেন অনলাইনে কিছু একটা উপার্জন করতে অথবা ফ্রিল্যান্স করতে। ব্যাপারটা কেমন একটা হাস্যকর বিষয় হয়ে যায় অর্থাৎ আপনি সর্বশেষ সব কিছুতে যখন ফেইল করছেন তখনই আসলে অনলাইনকে ক্যারিয়ার হিসেবে বেঁছে নিতে আসছেন।


Spread the love