By default, Woocommerce provides us with four types of products namely Simple product, Variable product, Group product and External/Affiliate Product.
What if you need to add a new product type according to your need. Having your own product type, allows you to have control on product settings. For example, you could set default values like price, visibility, etc.
In this article, we will learn how to
- Register a new product type.
- Add a corresponding tab to it when selected.
- Add fields to the created tab.
- And finally show those details on the front at product page.
So, lets start by firstly registering a product type. In my case, I am creating a product type ‘demo’.
Below code snippets shows you how to register a new product type which executes at ‘init’ hook at the function file of the plugin.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
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 above code, we create a new product type as ‘demo’ by extending the Woocommerce WC_Product class.
Than, 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 want to make. For that we add our new product type with default product type provided by Woocommerce as shown in below code.
|
1 2 3 4 5 6 7 |
add_filter( 'product_type_selector', 'add_demo_product_type' ); function add_demo_product_type( $types ){ $types[ 'demo' ] = __( 'Demo product', 'dm_product' ); return $types; } |
After adding 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. This can be done by
|
1 2 3 4 5 6 7 8 9 10 11 |
add_filter( 'woocommerce_product_data_tabs', 'demo_product_tab' ); function demo_product_tab( $tabs) { $tabs['demo'] = array( 'label' => __( 'Demo Product', 'dm_product' ), 'target' => 'demo_product_options', 'class' => 'show_if_demo_product', ); return $tabs; } |
And for adding field to it we need to add the execute following code on ‘woocommerce_product_data_panels’ hook.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
add_action( 'woocommerce_product_data_panels', 'demo_product_tab_product_tab_content' ); function 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 } |
The last step to do in admin side process is to save the details of the field ‘ Demo Product Spec ‘ .
To save those details we will use the hook ‘ woocommerce_process_product_meta’ and add save the data in the postmeta as shown in below code snippet :
|
1 2 3 4 5 6 7 8 9 10 11 |
add_action( 'woocommerce_process_product_meta', 'save_demo_product_settings' ); function 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 in below screenshot:
At last, we need to show the information that we added to the demo product type at the product page.
For that we’ll execute the below code on hook ‘ woocommerce_single_product_summary ‘ and add the details to the product page in the front as :
|
1 2 3 4 5 6 7 8 9 10 |
add_action( 'woocommerce_single_product_summary', 'demo_product_front' ); function 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 in 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 query then just comment below.
Thanks for reading 🙂
