Home
/
Blog
/
How to create a simple plugin for WooCommerce and add new type of product

How to create a simple plugin for WooCommerce and add new type of product

WooCommerce is the best WordPress plugin (and the most popular) for e-commerce. WooCommerce is a very powerful plugin and has wide functionality and a large set of settings.

There are four types of products in WooCommerce.

Simple Product
Grouped Product
External/Affiliate Product
Variable Product

In many cases, these types of products are enough when using the plug-in for the online store. But sometimes they are not enough. WooCommerce allows you to create custom types of products, and customize them for specific needs.

Let’s see how to create a custom type of product and configure it in such a way as to add useful functionality for the product page of our store.

The idea is: Add notes under the product title on the product pages. The text of the note can be of different colors and sizes.

The code given in this post can be added to function.php of child WordPress theme, or you can create a plugin and add code to it. We will create a simple WooCommerce plugin for WordPress.

1. Create a WordPress plugin

Create in your computer folder with name: woocommerce-simple-plugin

In this folder create the file named woocommerce-simple-plugin.php

Open this file for edition and add this code to the beginning of the file:


<?php
/*
Plugin Name: WooCommerce Simple Plugin
Plugin URI: https://bytescout.com
Description: This is Simple Plugin for WooCommerce shop.
Version: 1.1
Author: Dzianis
Author URI: https://bytescout.com
Text Domain: woocommerce-simple-plugin
*/

?>;

That’s it, the plugin is ready, but for now, it does nothing. Let’s add functionality to it.

2. Register custom product type in WooCommerce

To create a custom type of product, we have to create a class that extends the existing class WC_Product, call the class as WC_Product_With_Notes. And for custom class get product_with_notes name.

Name of the new class must be WC_Product_{product_type}

Add this piece of code to our plugin file:

add_action( 'init', 'bytescout_create_custom_product_type' );

function bytescout_create_custom_product_type(){
   class WC_Product_With_Notes extends WC_Product {
      public function get_type() {
         return 'product_with_notes';
      }
   }
}

add_filter( 'woocommerce_product_class', 'bytescout_woocommerce_product_class', 10, 2 );

function bytescout_woocommerce_product_class( $classname, $product_type ) {
   if ( $product_type == 'product_with_notes' ) {
      $classname = 'WC_Product_With_Notes';
   }
   return $classname;
}

3. Add Product type to the Types of Product Drop-Down list.

We created a new custom type. Now our product type with notes needs to be added to the list for other types so that we can select it.

For this purpose, WooCommerce provides with product_type_selector filter which can add new product types to the drop-down list.

add_filter( 'product_type_selector', 'bytescout_add_custom_product_type' );

function bytescout_add_custom_product_type( $types ){
    $types[ 'product_with_notes' ] = 'Product with Notes';
    return $types;
}

4. Add a tab for our new custom product type

Now we can select our new product type in the drop-down list, but so far there are no additional settings for this product, there is an only standard tab with settings: Shipping, Linked Products, Attributes, Linked Products, and Advanced.

Let’s add a new tab on which we will place the settings for our notes and named it with Product Notes

Use woocommerce_product_data_tabs filter for that purpose.

add_filter( 'woocommerce_product_data_tabs', 'product_notes_tab' );
 
function product_notes_tab( $tabs) {
         
    $tabs['product_notes'] = array(
      'label'    => __( 'Product Notes', 'woocommerce-simple-plugin' ),
      'target' => 'product_notes_options',
      'class'  => 'show_if_product_with_notes',
     );
    
    return $tabs;
}

5. Add fields(settings) to the Product notes tab

Now we add settings to our tab so that we can customize the notes (note text, color, size), which we will post on the product page.


add_action( 'woocommerce_product_data_panels', 'bytescout_product_tab_content' );
 
function bytescout_product_tab_content() {
 
 ?><div id='product_notes_options' class='panel woocommerce_options_panel'><?php
 ?><div class='options_group'><?php
                 
    woocommerce_wp_text_input(
    array(
        'id' => 'product_notes',
        'label' => __( 'Product notes', 'woocommerce-simple-plugin' ),
        'placeholder' => '',
        'desc_tip' => 'true',
        'description' => __( 'Enter additional notes for the product', 'woocommerce-simple-plugin' ),
        'type' => 'text'
    )
    );
    
    woocommerce_wp_select(
    array(
        'id' => 'product_notes_color',
        'label' => __( 'Notes Color', 'woocommerce-simple-plugin' ),
        'desc_tip' => 'true',
        'description' => __( 'Select product notes color', 'woocommerce-simple-plugin' ),
        'options' => [
            'inherit' => 'default',
            'red' => 'red',
            'green' => 'green',
            'blue' => 'blue',
        ]
    )
    );
    
    woocommerce_wp_select(
    array(
        'id' => 'product_notes_size',
        'label' => __( 'Notes Text Size', 'woocommerce-simple-plugin' ),
        'desc_tip' => 'true',
        'description' => __( 'Select product notes text size', 'woocommerce-simple-plugin' ),
        'options' => [
            'inherit' => 'default',
            'small' => 'small',
            'large' => 'large',
        ]
    )
    );
    
 ?></div>
 </div>
<?
}

6. Product Notes settings Saving

Settings are saved in the post meta using woocommerce_process_product_meta.

add_action( 'woocommerce_process_product_meta', 'bytescout_save_product_settings' );
     
function bytescout_save_product_settings( $post_id ){
         
    $product_notes = $_POST['product_notes'];
    $product_notes_color = $_POST['product_notes_color'];
    $product_notes_size = $_POST['product_notes_size'];
    
    var_dump($product_notes);
         
    if( !empty( $product_notes ) ) {
 
        update_post_meta( $post_id, 'product_notes', esc_attr( $product_notes ) );
        update_post_meta( $post_id, 'product_notes_color', esc_attr( $product_notes_color ) );
        update_post_meta( $post_id, 'product_notes_size', esc_attr( $product_notes_size ) );
        
    }
}

7. Add Product Notes to the WooCommerce product page

And finally. Our customized notes can be placed on the product page. To do this, you first need to define a template for a custom product page. There is an option:

Create your own product page template (upload it to the plugin folder, and connect it).
Use existing WooCoommerce template.

Let’s use the second option for our task and connect the simple.php template with wc_get_template.
And using woocommerce_single_product_summary, we actually add notes on the custom page.
That’s it!

add_action( 'woocommerce_single_product_summary', 'gift_card_template', 60 );
function gift_card_template () {
	global $product;
	if ( 'product_with_notes' == $product->get_type() ) {
		$template_path = ABSPATH . 'wp-content/plugins/woocommerce/templates/';
		// Load the template
		wc_get_template( 'single-product/add-to-cart/simple.php',
			'',
			'',
			trailingslashit( $template_path ) );
	}
}

add_action( 'woocommerce_single_product_summary', 'bytescout_product_front' );

function bytescout_product_front () {
    global $product;
    
    $product_notes = get_post_meta( $product->get_id(), 'product_notes' )[0];
    $product_notes_color = get_post_meta( $product->get_id(), 'product_notes_color' )[0];
    $product_notes_size = get_post_meta( $product->get_id(), 'product_notes_size' )[0];;
    
    if ( $product->get_type() == 'product_with_notes' ) {
        echo '<span style="color:'. $product_notes_color .';font-size:'. $product_notes_size .'">' . $product_notes . '</span>' ;
    }
}