Woocommerce Custom Product Type
By default, WooCommerce boasts a repertoire of four distinct product types, each tailored to cater to diverse merchandising needs:
- Simple Product: A straightforward product type without elaborate variations or complexities.
- Variable Product: Ideal for items with multiple attributes and options, granting customers the freedom to choose.
- External/Affiliate Product: Designed for products available on external sites, allowing seamless redirection to affiliated platforms.
- Downloadable Product: Suited for digital goods, enabling secure and efficient delivery of downloadable content.
What if you need to add a new product type according to your needs? Having your own product type, allows you to have control over product settings. For example, you could set default values like price, visibility, etc.
How to Create a Custom WooCommerce Product Type?
Crafting a new WooCommerce product type is fairly straightforward but involves some coding. To proceed, gaining familiarity with crafting custom WordPress / WooCommerce plugins and adding code is advised.
In this guide, we will walk you through the process of creating a custom product type step by step. By the end of this article, you’ll be able to:
- Register a New Product Type: Define a new product type that suits your unique requirements, including adding a price option, virtual and downloadable checkboxes, and more.
- Add a Corresponding Tab: Create a dedicated settings tab for your custom product type in the product editor.
- Add Fields to the Created Tab: Populate the settings tab with custom fields that capture specific details for your product type.
- Show Details on the Front Product Page: Display the information you’ve captured in the custom fields on the front-end product page.
Register Custom WooCommerce Product Type
In your WordPress admin panel, navigate to your WordPress installation directory and locate the wp-content/plugins folder. Inside this folder, create a new directory named custom_product_type. Within this new directory, create a file named custom_product_type.php
Inside custom_product_type.php, start by defining your plugin:
<?php
/**
* Plugin Name: Custom Product Type
* Description: Create a custom product type in WooCommerce
* Author: Webkul
* Author URI: https://webkul.com/
* Version: 1.0
*/
if (!defined('ABSPATH')) {
return;
}
Below code snippets show you how to register a new product type which executes at the ‘init’ hook at the function file of the plugin.
add_action( 'init', 'register_demo_product_type' );
function register_demo_product_type() {
class WC_Product_Demo extends WC_Product {
public function __construct( $product ) {
$this->product_type = 'demo';
parent::__construct( $product );
}
}
}
In the above code, we create a new product type as ‘demo’ by extending the Woocommerce WC_Product class.
Add Custom WooCommerce Product option
After registering the product type we need to add the product type to the product type selector for choosing what kind of product the user wants to make. For that, we added our new product type with the default product type provided by Woocommerce as shown in the below code.
add_filter( 'product_type_selector', 'wk_add_demo_product_type' );
function wk_add_demo_product_type( $types ){
$types[ 'demo' ] = __( 'Demo product', 'dm_product' );
return $types;
}
This code will add your custom product type to the Product data dropdown list using the $types[‘demo’] = __( ‘Demo product’, ‘dm_product’ ) line. You can change the text from Custom Product Type to anything such as Demo Product, Custom order, Gift card, etc.
Now, open your WP Admin Dashboard and create a new product. Under the Product Type dropdown menu, you should see a new option named ‘Demo Product.’
Adding a Custom Product Type Tab
After adding an option to select the new product type we need to add a new tab associated with it and we will add a field ‘ Demo Product Spec ‘ for describing the product type. Insert this code to forge the “Custom Product Details” tab:
add_filter( 'woocommerce_product_data_tabs', 'wk_demo_product_tab' );
function wk_demo_product_tab( $tabs) {
$tabs['demo'] = array(
'label' => __( 'Demo Product', 'dm_product' ),
'target' => 'demo_product_options',
'class' => 'show_if_demo_product',
);
return $tabs;
}
Ensure to replace ‘demo’ with your actual product_type ID in $tabs[‘demo’] = array if you’ve created your own product_type earlier.
The array comprises three parameters:
- label: Determines your custom product tab’s name.
- target: Establishes an identifier for adding settings to the tab.
- class: Employs show_if_Demo_product, displaying the tab solely when your custom product type is chosen.
Add Custom Product Type Tab Fields
To add the field to it we need to add the following code on ‘woocommerce_product_data_panels’ hook.
add_action( 'woocommerce_product_data_panels', 'wk_demo_product_tab_product_tab_content' );
function wk_demo_product_tab_product_tab_content() {
?><div id='demo_product_options' class='panel woocommerce_options_panel'><?php
?><div class='options_group'><?php
woocommerce_wp_text_input(
array(
'id' => 'demo_product_info',
'label' => __( 'Demo Product Spec', 'dm_product' ),
'placeholder' => '',
'desc_tip' => 'true',
'description' => __( 'Enter Demo product Info.', 'dm_product' ),
'type' => 'text'
)
);
?></div>
</div><?php
}
This introduces a text field for the product, but you can expand the settings with various WooCommerce functions like woocommerce_wp_select() for dropdown lists, woocommerce_wp_textarea_input() for text areas, and more. Our demo focuses on exhibiting uncomplicated text details, which administrators can conveniently tailor from the backend.
Saving Custom WooCommerce Product Type Tab Fields
To save those details we will use the hook ‘ woocommerce_process_product_meta’ and save the data in the post meta as shown in below code snippet below:
add_action( 'woocommerce_process_product_meta', 'wk_save_demo_product_settings' );
function wk_save_demo_product_settings( $post_id ){
$demo_product_info = $_POST['demo_product_info'];
if( !empty( $demo_product_info ) ) {
update_post_meta( $post_id, 'demo_product_info', esc_attr( $demo_product_info ) );
}
}
Now the admin side work is done. Now you will be able to select the new post type registered, see the new tab associated with it, and finally add the details in the field as shown below screenshot:
Add Content for the Custom Product Type
At last, we need to show the information that we added to the demo product type on the product page.
For that, we’ll execute the below code on the hook ‘ woocommerce_single_product_summary ‘ and add the details to the product page in the front as :
add_action( 'woocommerce_single_product_summary', 'wk_demo_product_front' );
function wk_demo_product_front () {
global $product;
if ( 'demo' == $product->get_type() ) {
echo( get_post_meta( $product->get_id(), 'demo_product_info' )[0] );
}
}
After doing all this we’ll now see the demo product that we created in the front end with the information added to its custom field as shown below :
Hope this blog will help you to develop custom functionality in your plugin in a better way. Try this and if you have any queries then just comment below.
You may also hire WooCommerce developers to work on your custom WooCommerce projects.
Thanks for reading 🙂