Let’s see how to make our theme compatible with WooCommerce, either for our projects or for our clients’ projects.
And it is that sometimes we are working with a theme that works great for us and that we love (either to us or to our clients) and when we install WooCommerce we get the notice that you can see above.
“Your theme does not declare WooCommerce support – Please read our integration guide or check out our Storefront theme which is totally free to download and designed specifically for use with WooCommerce”
Well, let’s see what exactly this integration they talk about consists of, which in reality isn’t that big of a deal.
What if your theme is not compatible with WooCommerce?
Actually not much is going to happen on a functional level. Everything that can be spoiled will be at the design level. Normally the pages that can give problems are some of the WooCommerce ones: Store, product, categories Y labels of products.
What usually happens is that they look broken, and with the sidebar below the content, instead of next to it.
Curiously, those of Bill, TrolleyY Checkout they are not affected, since they use the design of your own theme, so nothing will happen.
Making a theme compatible with WooCommerce
The bad news is that we will have to touch code. The good news is that we will only have to duplicate a page and replace a function, so that only by following what I am going to tell you will you be able to have it ready, even if you do not know what you are doing.
The first thing will be to look for the “page.php” file of our theme. This file is the one that is in charge of the layout of the pages. And it turns out that the products are “pages” of product. If we don’t have it, we can use “single.php” or badly “index.php”.
Next we will double the file. We can do this with our FTP program. To the new generated file (the copy) we will call it “woocommerce.php”. We’ll leave it right there where the other one was. Cheer up, we only have one step left.
The next step will be to open that file that we just created, and we are going to look for the so-called “loop”. The loop is nothing more than a few lines of code that start like this:
And they end like this:
There can be anything in between, from the simplest to the most complex. In this case we can see that it occupies lines 20 to 23.
In any case, what we have to do is delete it and replace it with this single line:
Once again, in this case the previous example will look like this:
And that’s it! We’ll have everything ready. Everything will work and at the design level everything will appear where it should. But be careful, although the theme is already compatible, now we must “declare” that it is.
Declare compatibility with WooCommerce
They say that Caesar’s wife, this should not only be honored but appear so. So this is what we will do now. Our theme is already supported, but now we need to tell WooCommerce that it is. This is very simple, we just need to add this in our functions.php file:
add_action( ‘after_setup_theme’, ‘woocommerce_support’ );
function woocommerce_support() {
add_theme_support( ‘woocommerce’ );
}
And with this that’s it. We have already told you that our theme is compatible. But beware, in reality this line only “says” that the theme is compatible, but does nothing. It just tells WooCommerce that it is (even if it’s a lie).
Placing this line will remove the message from WooCommerce that the theme is not supported, but if we do nothing else, we will be lying like knaves, and we will have only removed the message, nothing more. It’s like a “tag” from the deme author that says “Hey WooCommerce, I’m compatible with you, huh?”. But nothing else.
Summary and conclusion
To make a theme compatible with WooCommerce we have to create the woocommerce.php page from page.php and replace the WordPress loop with a WooCommerce own function.
Then we must tell WooCommerce that we have done our homework and that we are already compatible, declaring support.
If you want to know more about the fantastic world of WooCommerce, I recommend that you take a look at the course and the . If you subscribe you will have this and more.
Facebook Comments
Disqus