How to add custom post type to WooCommerce

The biggest question in WooCommerce that nobody seems to have a solution: “How to add custom post type to WooCommerce?”

WooCommerce is a free eCommerce plugin that allows you to sell anything, beautifully. Built to integrate seamlessly with WordPress, WooCommerce is the world’s favorite eCommerce solution that gives both store owners and developers complete control.

WooCommerce has its own custom post type “product” for its catalog or shop. Which lead to the question, how to add your own custom post type. At this time of writing, WooCommerce has no built in functions or filters that can do this easily. In short, WooCommerce does not support it.

That might disappoint you if you already have a website with products and catalogs on it. And your WordPress theme has its own design that you really like. Thus, using WooCommerce, you need to migrate your products and catalogs. You then have to choose whether to use the default WooCommerce design or to fight your way and try to change the style and use what your theme already have.

That would be a pain.

But of course, I’m not here just to tell you that. Here are some steps I know. Make sure you activated WooCommerce plugin before doing things below.

The first step. A product (any post type) can be added to the cart if it has a price. That said, your post type should have a custom field price. If your theme already supports this, then that would be awesome (if not, we will make one). We just have to make sure that its meta key is “_price”. How to check that? You can try to inspect the element. Visit your post type admin page. Try to add or edit a post in your post type admin page. Look for the text box that has the price label and right click on the text box. You should find its name attribute to be “_price”. Usually the name is the meta key for a custom field.

Showing the name attribute of the text box.

Showing the name attribute of the text box.

If by chance your meta key is not “_price”, worry not, we have a work around for that. Add this code to your functions.php (skip if your meta key is “_price”). If your meta key is “price”, do something like this:


Line #4 above will check for your custom post type. Change accordingly. In above code example I’m trying to get the post meta price and return it. I’m also checking if the post type is “post” so other post types will not be affected.

By this time, you can now add any post that has price set. So after setting the price of a post, try adding “?add-to-cart=ID” in your browser url. Where ID is the ID of your post. So if the ID of your post is 1, you’re link should be like this: http://localhost/wordpress/cart/?add-to-cart=1.

After visiting that link, you will see something like this image below.

How to add custom post type to WooCommerce: After visiting this link: http://localhost/wordpress/cart/?add-to-cart=1

After visiting this link: http://localhost/wordpress/cart/?add-to-cart=1

The next step. If you’re now able to add a post to the cart, we now have to create our “Add to Cart” button. There are so many ways this can be achieved. But the goal is to have a form that has quantity and an “Add to Cart” button.

Here’s a quick demonstration. I’m not saying this is an elegant way, but this is just for demonstration purpose.

Paste this in your functions.php: (I’m using the_content filter, but please user other filter/action that suits the need.)

Link: https://gist.githubusercontent.com/reigelgallarde/2b0ea5069f8f3df1aa60/raw/be5b69d7c7845c272b8169f1874dacd99f155dc1/rei_add_to_cart_button.php

This code will add quantity and “Add to Cart” button to your post type. Take note that, still, we are checking the post type as to not affect other post types.

How to add custom post type to WooCommerce: Showing Add to Cart button with quantity

Showing Add to Cart button with quantity

Again! This is not the elegant way of doing it. But this will demonstrate and give you the idea of how to do it. You can place the form anywhere you want. You can even just paste the form inside your single-{post_type}.php.

Another thing to note is that you have to call “wc_print_notices()” function in your single-{post_type}.php. This will display the messages like ““Hello world!” has been added to your cart.”.

If you have done all this correctly, you will have something like this video below.

That’s all. Thank you for reading. If you have questions, comment below.

You may also want to try my plugin that does this with more options: WooCommerce WooRei Shop Manager

You may also like...