Overview The General Data Protection Regulation (GDPR) requires websites to protect their users' data. If…
How to Create a Custom Product Type in WooCommerce: A Step-by-Step Developer Guide
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:
- Basic knowledge of PHP and WordPress development.
- A WordPress site with WooCommerce installed.
- Access to your site’s code (via a child theme or custom plugin).
Step 1: Set Up Your Development Environment
Create a Child Theme or Custom Plugin
To avoid losing changes during theme updates, it’s best to create a custom plugin. For simplicity, we’ll focus on using a custom plugin in this guide.
Create a Plugin Folder
In the wp-content/plugins directory, create a folder named custom-product-type.
Create a Main Plugin File
Inside your plugin folder, create a file called custom-product-type.php. 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
In your custom-product-type.php file, create a new 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 the following code to register the custom product 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
To include your custom product type in the admin panel dropdown, use this code:
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 and Options
Use hooks to add custom fields to the product data panel. For example:
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.
All Code :
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.
Related Posts
This Post Has 0 Comments