skip to Main Content

How to Create a Custom Product Type in WooCommerce: A Step-by-Step Developer Guide


Table of Contents

  1. Prerequisites
  2. Step 1: Set Up Your Development Environment
  3. Step 2: Register the Custom Product Type
  4. Step 3: Add Custom Product Type to the Product Data Panel
  5. Step 4: Implement Product Type-Specific Data and Options
  6. Step 5: Display Custom Product Type Data on the Frontend
  7. Step 6: Test Your Custom Product Type
  8. Full Code Implementation
  9. FAQ

Overview

WooCommerce is a versatile e-commerce platform for WordPress that allows extensive customization. One advanced feature is creating your own product type. This guide will walk you through adding a custom product type to WooCommerce. Here are particular Auction Product type added.


Prerequisites

Before you start, ensure you have:


Step 1: Set Up Your Development Environment

Create a Plugin Folder

Navigate to the wp-content/plugins directory and create a folder named custom-product-type.

Create a Main Plugin File

Inside your plugin folder, create a file called custom-product-type.php and add the following header:

<?php
/*
Plugin Name: Custom Product Type
Description: Adds a custom product type to WooCommerce.
Version: 1.0
Author: Your Name
*/

// Hook for initializing plugin functionality
add_action('plugins_loaded', 'custom_product_type_init');

function custom_product_type_init() {
    // Code to initialize the custom product type will go here
}



Step 2: Register the Custom Product Type

Define your custom product type class and register it with WooCommerce:

class WC_Product_Custom_Type extends WC_Product {
    public function __construct($product) {
        $this->product_type = 'custom_type';
        parent::__construct($product);
    }
    public function get_type() {
        return 'custom_type';
    }
}

add_action('init', 'register_custom_product_type');
function register_custom_product_type() {
    if (class_exists('WC_Product')) {
        class WC_Product_Custom_Type extends WC_Product {
            public function __construct($product) {
                $this->product_type = 'custom_type';
                parent::__construct($product);
            }
            public function get_type() {
                return 'custom_type';
            }
        }
    }
}


Step 3: Add Custom Product Type to the Product Data Panel

Add Product Type to Dropdown

Use this code to add your custom product type to the product editor dropdown:

add_filter('product_type_selector', 'add_custom_product_type');

function add_custom_product_type($types) {
    $types['custom_type'] = __('Custom Type', 'text-domain');
    return $types;
}

Step 4: Implement Product Type-Specific Data and Options

Add Custom Fields

Add custom fields to the product data panel:

add_action('woocommerce_product_options_general_product_data', 'add_custom_fields');

function add_custom_fields() {
    global $woocommerce, $post;
    echo '<div class="options_group">';
    woocommerce_wp_text_input(array(
        'id' => '_custom_field',
        'label' => __('Custom Field', 'text-domain'),
        'description' => __('Enter the custom field value.', 'text-domain'),
        'desc_tip' => 'true',
    ));
    echo '</div>';
}


Save Custom Fields Data
Use the following code to save the custom field data:

add_action('woocommerce_process_product_meta_custom_type', 'save_custom_fields');

function save_custom_fields($post_id) {
    $custom_field = isset($_POST['_custom_field']) ? sanitize_text_field($_POST['_custom_field']) : '';
    update_post_meta($post_id, '_custom_field', $custom_field);
}


Step 5: Display Custom Product Type Data on the Frontend

Modify the Product Display
To adjust how your custom product type is shown on the frontend, use this code:

    add_action('woocommerce_single_product_summary', 'display_custom_field', 20);
    
    function display_custom_field() {
        global $post;
        if ('custom_type' === get_post_meta($post->ID, '_product_type', true)) {
            $custom_field = get_post_meta($post->ID, '_custom_field', true);
            if (!empty($custom_field)) {
                echo '<p>' . __('Custom Field Value: ', 'text-domain') . esc_html($custom_field) . '</p>';
            }
        }
    }
    
    

    Step 6: Test Your Custom Product Type

    Add a New Product
    Go to the WooCommerce product editor. You should see your custom product type in the dropdown.

    Verify Data Entry and Display
    Enter data into the custom fields. Check both the backend and frontend to ensure everything displays correctly.


      Full Code Implementation

      Please find all the code to create a custom product type in WooCommerce below:

      <?php
      /*
      Plugin Name: Custom Product Type
      Description: Adds a custom product type to WooCommerce.
      Version: 1.0
      Author: Your Name
      */
      
      // Hook for initializing plugin functionality
      add_action('plugins_loaded', 'custom_product_type_init');
      
      function custom_product_type_init() {
          // Define Your Custom Product Type Class
          class WC_Product_Custom_Type extends WC_Product {
              public function __construct($product) {
                  $this->product_type = 'custom_type';
                  parent::__construct($product);
              }
      
              public function get_type() {
                  return 'custom_type';
              }
          }
      
          // Register the Product Type with WooCommerce
          add_action('init', 'register_custom_product_type');
          function register_custom_product_type() {
              if (class_exists('WC_Product')) {
                  class WC_Product_Custom_Type extends WC_Product {
                      public function __construct($product) {
                          $this->product_type = 'custom_type';
                          parent::__construct($product);
                      }
      
                      public function get_type() {
                          return 'custom_type';
                      }
                  }
              }
          }
      
          // Add Product Type to Dropdown
          add_filter('product_type_selector', 'add_custom_product_type');
          function add_custom_product_type($types) {
              $types['custom_type'] = __('Custom Type', 'text-domain');
              return $types;
          }
      
          // Add Custom Fields and Options
          add_action('woocommerce_product_options_general_product_data', 'add_custom_fields');
          function add_custom_fields() {
              global $woocommerce, $post;
              echo '<div class="options_group">';
              woocommerce_wp_text_input(array(
                  'id' => '_custom_field',
                  'label' => __('Custom Field', 'text-domain'),
                  'description' => __('Enter the custom field value.', 'text-domain'),
                  'desc_tip' => 'true',
              ));
              echo '</div>';
          }
      
          // Save Custom Fields Data
          add_action('woocommerce_process_product_meta_custom_type', 'save_custom_fields');
          function save_custom_fields($post_id) {
              $custom_field = isset($_POST['_custom_field']) ? sanitize_text_field($_POST['_custom_field']) : '';
              update_post_meta($post_id, '_custom_field', $custom_field);
          }
      
          // Modify the Product Display
          add_action('woocommerce_single_product_summary', 'display_custom_field', 20);
          function display_custom_field() {
              global $post;
              if ('custom_type' === get_post_meta($post->ID, '_product_type', true)) {
                  $custom_field = get_post_meta($post->ID, '_custom_field', true);
                  if (!empty($custom_field)) {
                      echo '<p>' . __('Custom Field Value: ', 'text-domain') . esc_html($custom_field) . '</p>';
                  }
              }
          }
      }
      
      

      FAQ

      What if I want to add more custom fields?

      You can repeat the process of adding fields in the add_custom_fields function.

      How can I change the name of the custom product type?

      Simply replace 'Custom Type' in the add_custom_product_type function with your desired name. Click Here.

      Will this custom product type work with existing products?

      No, this custom product type only applies to new products created after implementing this code. Existing products will not have this functionality.

      Can I use this code in a theme instead of a plugin?

      While it’s possible, using a plugin is recommended to prevent loss of functionality during theme updates.


      I’m a WordPress developer with 10+ years of experience in WooCommerce and custom plugins. I combine technical expertise with design flair to help you create standout, user-friendly websites. Let’s transform your digital presence!

      This Post Has 0 Comments

      Leave a Reply

      Your email address will not be published. Required fields are marked *

      Back To Top