Search the site:

Home Blog How to add a new custom product type in WooCommerce

How to add a new custom product type in WooCommerce

WooCommerce has four product types, Simple Product, Grouped Product, External/Affiliate Product and Variable Product. In many cases, the default product types are not enough. You might need to add new product types such as Subscription product, Membership product, Bookable product & so on. In this post, we will try to add a new custom product type in WooCommerce: Gift Card. We will also see how to add settings to it and how to create a template for it.

As we all know, WooCommerce gives us flexibility at each and every point to extend the functionality by its hooks/filters, so using them we will add custom product type. Let’s start with it.

We will check this post in two different sections as below:

  1. Admin side
  2. Front-end

Admin Side

We will kick off by registering our Gift Card custom product type.

Register Gift Card custom product type in WooCommerce

First, you need to create a class that is extending the existing class WC_Product. You can register it as below. We need to use WordPress action plugins_loaded.

In my example, I called my class WC_Product_Gift_Card.

You need to make sure that your class name must start with WC_Product_{product_type} if you do not name your class properly then it will not work.

Add Product type to the Product type Drop Down

Registering product type isn’t enough if this type is not selectable from Product type drop down. You need to make sure that you give the $type array key same as you have declared in your class.

WooCommerce provides filter product_type_selector, this filter allows you to add more product type to the drop down.

In my example, I have used ‘gift_card‘ when registering the product type, so that’s what I will use below as well.


That’s it! You will now be able to select your new product type from the drop down on the Product data meta box on add/edit product pages.

Add a New Custom Product type in WooCommerce - drop-down
Custom product type added in drop down

In the next part, I will show a couple examples on how you can further extend your own custom product type by adding a new tab for settings, saving the data and template for your custom product.

Add a new tab for your custom product type

When you register and display your custom product type in WooCommerce, it will show your product type in the drop down but it doesn’t have any specific settings related to it. It will only show the default 4 settings tabs: Shipping, Linked Products, Attributes & Advanced.

To add a new tab for the custom product type, we will use woocommerce_product_data_tabs filter. This filter allows you to add an extra tab to your Product data meta box. We are attaching the gift_card_tab() to the filter.

Let’s get to the details.

You need to make sure that you give the $tabs array key same as you have declared in your class. In my example, I need to give key as $tabs [ 'gift_card ' ].

Above code will create the new settings tab as “Gift Card”, when you select the product type Gift Card, then your settings tab will appear.

Add a New Custom Product type in WooCommerce - custom-product-setting-tab
Added custom products settings tab

As you can check that I have added 3 parameters in my example for adding the settings tab.

  1. label   – Name of your settings tab.
  2. target – Identifier for adding the settings field ( We will see it in the later part of the post ).
  3. class   – Identifier when custom setting tab should be displayed.

Here, if you do not give the proper class name then our custom setting tab will be available for all product type. You need to give the class name as show_if_{product_type}.

In my example, I need to give key as show_if_gift_card.

Add a New Custom Product type in WooCommerce - class-name-wrong
If class name is wrong

Add fields / settings to the custom product tab

Now, that you have your custom product type, it is understandable, you would probably need to add some extra settings fields, for your custom product type.

I have mentioned above in adding tab section that we will study later about the target parameter. The target parameter is used for adding the fields or settings for your custom WooCommerce product type.

We will use WooCommerce action woocommerce_product_data_panels for adding the settings for your custom product type.  Let’s check how you can add the settings to your tab.

In the function wcpt_gift_card_options_product_tab_content you need to pay attention at the id of your div tag. If your “id” in the div tag does not match to your “target” then your settings will not be displayed in the tab.

In my example, I need to give id as <div id="gift_card_options" class="panel woocommerce_options_panel">.

The above code snippet will add 2 fields in your Gift Card tab as shown below:

Add a New Custom Product type in WooCommerce - settings-added
Added setting for the custom product in custom tab

You can also check some other WooCommerce functions for adding the settings.

Saving the custom product type Settings

So, this was fairly simple to do. But just showing these settings is not enough. We need to save and use these settings.

We will use WooCommerce action woocommerce_process_product_meta for saving the setting to the post meta table. We are attaching function save_gift_card_options_field to the action, this function will save the settings of our custom product.


Once you have added the above code snippet, then your settings will be saved when you Publish/Update the product.

Front-end

So far we have seen all part of the admin side of registering the product, displaying the product type in the drop down, creating a new tab for setting, adding settings in a new tab.

So, doing these much won’t help you to display the settings to your customers. It will require you to create a template and design your custom product type’s page. If we do not have any templates for our Gift Card product type then it will just show the name on the front-end.

Add a New Custom Product type in WooCommerce - without-template
Gift Card custom product front-end without any template

So let’s check how we can display settings for your Gift Card product on the front end.

Display settings for your custom product type on front end

WooCommerce provides template for each product type. Templates are the layout of the product displayed to the customers. Like for simple product, we have Product Price and Add to cart button. For a variable type of product, we have a drop down for the attributes and then price for attribute and then Add to cart button.

So for our Gift Card custom product type, we do not have any template. We need to create one template for our custom product type.

We will use WooCommerce action woocommerce_single_product_summary for adding the template for our product type. You can add the below code for adding the template:

Adding this much code will help us to display the template? No, it will not display any content until it finds the template on the path which we have mentioned in wc_get_template function.

First things first. We need to make sure that we are adding the template for Gift Card custom product type.

In my example, I have checked that if the product type is gift_card then only load the custom template.

Now, you need to create the directory structure for the template. It will be like /templates/single-product/add-to-cart.

Oce you have created the directory structure for the template you need to create “gift_card.php” file, in this file, we will place our templates layout for our Gift Card custom product.

In my example, I have created two settings for the Gift Card custom product, so I have created one simple template file which displays the Price of the product along with the Add to cart button. Check the template code:

Add a New Custom Product type in WooCommerce - with-template
Gift Card custom product front-end with a template

That’s it!!

Now, at the end, everyone wants to have all pieces of code in one single file. Yes, it is possible to have all code in a single file, but the directory structure and the code for template file need to be created by yourself.

Below are mainly 3 ways to apply the custom code on WordPress website.
1. Use the Code Snippets Plugin
2. Use a Custom Plugin
3. Use Your Child Theme functions.php

From 3 options I would recommend you to create a new custom plugin, as it requires you to create the directory structure for the template.

At the end, we can say that using WooCommerce actions and filters we can create new custom product type, create settings tab, save the settings also we can create new templates for the custom product type.

Please feel free to comment if you need any further information.

Browse more in: Code Snippets, How Tos, WooCommerce How Tos, WooCommerce Tutorials

12
Leave a Reply

avatar
6 Comment threads
6 Thread replies
3 Followers
 
Most reacted comment
Hottest comment thread
7 Comment authors
EmilioGuestCosminmostafaBhavik Kiri Recent comment authors

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  Subscribe  
newest oldest
Notify of
mohsin
Guest
mohsin

Hi, I have a question. Can we combine two product types . For example i want to add one product of two type rent and simple product . I want to add both rental and sale price in one product and on front end user select from drop down that he want to buy the product or take the product on rent . In short i want to merge two type of product to create a single type. Because my client do not want to create two different product for rent and sale. He want a single product having option… Read more »

Bhavik Kiri
Guest
Bhavik Kiri

Hi Mohsin,

It is not possible to give 2 product type in a single product.

You can use our Booking & Appointment Plugin for WooCommerce plugin for renting your WooCommerce products.

Ron
Guest
Ron

hi
first this was very good, i only have 2 issues:
one, when i edit the gift card the drop down shows the regular product options. so the gift card is not selected.
two, the template file doesn’t load when i enter the gift card product page. i have created in my theme root: templates/single-product/add-to-cart/gift_card.php

any idea why?

best regards

Bhavik Kiri
Guest
Bhavik Kiri

Hi Ron,

Thank you for appreciating it.

1. Can you please share the screenshot of the issue? So I can help you to resolve the issue.

2. For template path, please make sure you have given the correct path in the function “gift_card_template()”.

I have given a path for the plugin directory and then given the directory name.

You need to make changes in “$template_path = plugin_dir_path( __FILE__ ) . ‘templates/’;” variable. Here, you can give the path for your theme directory.

Please let me know if you need any help.

Ron
Guest
Ron

hi thanks for the answer
i have checked the product type before it goes to the template :
var_dump($product->get_type());
and i get “simple”
so i guess this is the cause for both issues: the product type select tag doesn’t select the gift, and the template part is not executed, since it is considered a simple product.
so the issue i guess is that the product is saved as a simple product and not as a gift?

Ron
Guest
Ron

ok once i used the init hook it does work. the select choose the right product type and the template does load.
just use:
add_action(‘init’, ‘wcpt_register_gift_card_type’);

Bhavik Kiri
Guest
Bhavik Kiri

That’s great.

Thank you for sharing your solution.

I’m glad to know that you are able to resolve the issue.

Please let me know if you have further queries.

mostafa
Guest

hi
how get custom product type data ( date and day and active/deactive and … ) on loop ?

Cosmin
Guest
Cosmin

Hi
Thank you so much for the article.

Guest
Guest
Guest

Hi, great article
I see in comments you say “I have given a path for the plugin directory and then given the directory name. You need to make changes in “$template_path = plugin_dir_path( __FILE__ ) .”

Can we download sample code/plugin for Gift Card type you explain in the article?
I didn’t see a link anywhere.

Thanks.

from purchased

Subscribe Now