WooCommerce supports several default product types: simple products, grouped products, external/affiliate products, and variable products. Beyond these, we can also add custom product types to meet our specific needs. For example, we could add a custom product type named “Coupon product” to implement a feature where users receive coupons automatically after purchasing that type of product.
Registering a New Product Type Class
First, we need to create a new product type class and hook it to the init hook. With this, WooCommerce will know we’ve created a product type named “coupon”.
add_action('init', function ()
{
class WC_Product_Coupon extends WC_Product
{
public function __construct($product)
{
$this->product_type = 'coupon';
parent::__construct($product);
}
}
});Adding the New Product Type to the Product Type Dropdown
Just creating the product type class isn’t enough; we also need to add this product type to the dropdown menu when creating products, so we can add products of this type.
add_filter('product_type_selector', function ($types)
{
$types[ 'coupon' ] = __('Coupon product', 'coupon_product');
return $types;
});Adding a New Product Type Tab
A new product type will surely have some custom data different from standard product types. We can add a tab to the product attribute metadata box to add custom data for this product type.
add_filter('woocommerce_product_data_tabs', function ($tabs)
{
$tabs[ 'coupon' ] = [
'label' => __('Coupon Product', 'coupon_product'),
'target' => 'coupon_product_options',
'class' => 'show_if_coupon_product',
];
return $tabs;
});Adding Fields to the Tab
With the tab, we can add custom fields to it. As shown below, we added a text field named coupon_product_info to the custom product type tab.
add_action('woocommerce_product_data_panels', function ()
{
?>
<div id='coupon_product_options' class='panel woocommerce_options_panel'>
<div class='options_group'>
<?php
woocommerce_wp_text_input(
[
'id' => 'coupon_product_info',
'label' => __('Coupon Product Spec', 'coupon_product'),
'placeholder' => '',
'desc_tip' => 'true',
'description' => __('Enter Coupon product Info.', 'coupon_product'),
'type' => 'text',
]
);
?>
</div>
</div>
<?php
});Saving Custom Field Values
Then, when saving the product, we also need to save the data for the custom field added above.
add_action('woocommerce_process_product_meta_coupon_product', function ($post_id)
{
$coupon_product_info = $_POST[ 'coupon_product_info' ];
if ( ! empty($coupon_product_info)) {
update_post_meta($post_id, 'coupon_product_info', esc_attr($coupon_product_info));
}
});Displaying Frontend Data Based on Article Type
After saving the data, we can display it on the frontend for this product type. As shown below, we created a coupon template to display product information of this type.
add_action('woocommerce_single_product_summary', function ()
{
global $product;
if ('coupon' == $product->get_type()) {
$template_path = plugin_dir_path(__FILE__) . 'templates/';
// Load the template
wc_get_template('single-product/add-to-cart/coupon.php',
'',
'',
trailingslashit($template_path));
}
}, 60);The above is the basic workflow for adding custom product types during WooCommerce development. After adding it, we still need to perform some processing based on our business logic; since business logic varies, we won’t detail it here. Interested friends can reach out to us via the contact methods below.
