如何以編程方式創建自定義 WooCommerce 產品類型

在構建複雜的 WooCommerce 商店時，您可能需要針對特定問題創建自己的解決方案。 這些問題之一是缺少特定的 WooCommerce 產品類型。 這就是為什麼我們在 QuadLayers 為您帶來了關於如何為您的網站創建自定義 WooCommerce 產品類型的指南。

我們將研究如何定義您的產品類型、為它們啟用特定選項和價格等等。 但首先，讓我們看看 WooCommerce 產品類型以及自定義產品類型可以做什麼。

為什麼要在 WooCommerce 中添加自定義產品類型？

默認情況下，WooCommerce 有四種獨特的產品類型。 這些都是：

• 簡單的產品
• 可變產品
• 外部/關聯
• 可下載產品

當然，使用外部 WooCommerce 插件，您可以添加更多產品類型，如訂閱產品、可預訂產品、會員資格等。

但是，如果您想創建這些特定類型以外的產品類型怎麼辦？ 如果您有默認 WooCommerce 產品類型無法滿足的特殊要求，或者如果您想在不使用第三方插件的情況下創建自定義產品類型（例如會員資格或拍賣產品），那麼您可以使用一些創建自定義產品類型編碼。

使用自定義產品類型意味著向產品類型添加不同的、唯一的設置。 例如，如果您想要特定的可變產品類型並為其添加不同的可見性或定價設置，那麼您可以使用自定義產品類型來實現。 此外，您還可以為一種獨特的產品定義特定的產品類型，並且僅在您願意時才更改產品類型設置。

無論您的需求如何，擁有自定義產品類型都可以讓您在自定義和定義您在網站上銷售的產品時更加靈活。

如何創建自定義 WooCommerce 產品類型？

創建 WooCommerce 產品類型的過程非常簡單，但確實需要一定程度的編碼。 如果您想繼續閱讀本文，我們建議我們的客戶了解更多有關創建自定義 WordPress 插件和向其添加代碼的信息。

一旦您了解了在您的網站目錄中創建WordPress 插件的基礎知識，請繼續並打開您的WP 安裝目錄，打開wp-content/plugins並創建文件夾“ QuadLayers_custom-product-type ”。 對於我們的演示，我們將使用我們的本地主機目錄。

之後，創建一個名為“ Quadlayers_custom-product-type.php ”的文件。 這是您的主文件，它作為插件其他功能的入口。

打開此文件並將以下代碼行粘貼到文件中：

 <?php

/**
* 插件名稱：Quadlayers 自定義產品類型
* 說明：Quadlayers 創建自定義 WooCommerce 產品類型指南的代碼
*/

如果（！定義（'ABSPATH'））{
返回;
} 

這組代碼通過添加插件名稱和描述來定義您的插件。 現在，這就足夠了，因為我們需要向該文件添加更多代碼才能使其正常運行。 現在，您需要激活新創建的插件。 我們將在本教程中保持插件激活狀態，並在進行過程中添加更多代碼。

因此，繼續並打開您的WP Admin Dashboard並單擊Plugins 。 在這裡，您應該會看到一個名為 Quadlayers Custom Product Type 的新插件。 繼續並激活它並轉到教程的下一步。

註冊自定義 WooCommerce 產品類型

接下來，我們將創建一個函數來定義我們的自定義產品類型並將其註冊為 WooCommerce 產品類型。 為此，將此代碼添加到插件的主文件中：

 add_action( 'init', 'register_demo_product_type' );
函數 register_demo_product_type() {
類 WC_Product_Demo 擴展 WC_Product {

公共函數 __construct( $product ) {
$this->product_type = '演示';
父母::__構造（$產品）；
}
}
}

這將註冊一個名為demo 的自定義產品類型。 如果要更改產品類型的名稱，只需更改$this->product_type = 'demo';中的文本即可。

添加自定義 WooCommerce 產品選項。

在此之後，我們需要將自定義產品類型添加到產品類型下拉列表中。 當您在WP 管理儀表板上創建或編輯產品時，這使您可以選擇產品類型。 將此代碼添加到插件的主文件中，您應該會在產品類型列表中看到一個新選項。

 add_filter( 'product_type_selector', 'add_demo_product_type' );
函數 add_demo_product_type( $types ){
$types[ 'demo' ] = __( '演示產品', 'dm_product' );
返回$類型； 
}

此代碼將使用$types['demo'] = __('Custom Product Type')行將您的自定義產品類型添加到產品數據下拉列表中。 您可以將文本從自定義產品類型更改為任何內容，例如演示產品、自定義訂單、禮品卡等。

現在，打開您的WP 管理儀表板並創建一個新產品。 在“產品類型”下拉菜單下，您應該會看到一個名為“ Demo Product ”的新選項。

添加自定義產品類型選項卡

以下函數將為您的自定義產品類型構建一個新的設置選項卡。 通過這種方式，您可以向您的產品類型添加不與其他產品類型共享的特定詳細信息。

粘貼此函數以構建一個選項卡自定義產品詳細信息：

 add_filter( 'woocommerce_product_data_tabs', 'demo_product_tab' );
函數 demo_product_tab($tabs){

$tabs['演示'] = 數組(
'label' => __( 'Demo Product', 'dm_product' ),
'target' => 'demo_product_options',
'class' => 'show_if_demo_product',
);
返回 $ 標籤；
}
}

如果您在上面定義了自己的 product_type，請記住在$tabs['demo'] = array中使用您的product_type ID而不是 'demo'。

我們使用的數組中的三個參數是：

標籤：這定義了您的自定義產品選項卡的名稱。
target：這設置了一個標識符，我們將使用它來向選項卡添加設置。
類：這使您可以檢查何時顯示自定義產品選項卡。

在這裡，在類參數中，我們使用了 show_if_Demo_product，這意味著此選項卡僅在選擇您的自定義產品類型時顯示。

添加自定義產品類型選項卡字段

接下來，讓我們向選項卡添加一些設置和字段，以便您可以為您的自定義產品類型設置價格和各種選項。 為此，將此代碼添加到插件的主文件中：

 add_action( 'woocommerce_product_data_panels', 'QL_custom_product_options_product_tab_content' );

函數 QL_custom_product_options_product_tab_content() {
// 不要忘記將 div 中的 id 更改為產品選項卡的目標
?><div class='panel woocommerce_options_panel'><?php
?><div class='options_group'><?php

woocommerce_wp_checkbox(數組(
'id' => '_enable_custom_product',
'label' => __( '啟用自定義產品類型'),
));

woocommerce_wp_text_input(
大批（
'id' => 'demo_product_info',
'label' => __( 'Custom Product details', 'dm_product' ),
'佔位符' => '',
'desc_tip' => '真',
'description' => __( '輸入演示產品詳細信息。', 'dm_product' ),
'類型'=>'文本'
)
);


?></div>
</div><?php
}

這將添加一個複選框選項以啟用自定義產品類型和產品的自定義文本字段。 當然，您可以使用其他 WooCommerce 函數添加更多設置，例如用於下拉列表的 woocommerce_wp_select()、用於文本區域的 woocommerce_wp_textarea_input() 等等。

但對於我們的演示，我們只會顯示有關自定義產品管理員可以從後端自定義的簡單文本信息。

您可以在此處了解有關這些功能以及如何使用它們的更多信息。

保存自定義 WooCommerce 產品類型選項卡字段

現在我們已經創建了產品類型設置，我們必須將它們保存到我們的數據庫中。 這是使用 woocommerce_process_product_meta 掛鉤完成的。 為此，我們將使用這些代碼行：

 add_action( 'woocommerce_process_product_meta', 'save_demo_product_settings' );

函數 save_demo_product_settings( $post_id ){

$demo_product_info = $_POST['demo_product_info'];

如果（！空（$demo_product_info））{
update_post_meta( $post_id, 'demo_product_info', esc_attr( $demo_product_info ) );
}
}

將此代碼添加到插件的主文件後，您將能夠在更新或發布產品時保存自定義產品類型設置。

但是，這些代碼僅適用於後端，現在將顯示在您產品的前端，直到我們定義一個模板供 WooCommerce 使用。 為此，我們將使用教程的下一步來顯示自定義產品類型的內容。

為自定義產品類型添加內容

您剛剛為您的網站創建了自定義產品類型，但您還需要向 WooCommerce 指定您希望該產品類型具有的內容類型。 為此，我們將使用 woocommerce_single_product_summary 掛鉤來添加我們添加到“自定義產品詳細信息”選項卡的產品信息。

 add_action( 'woocommerce_single_product_summary', 'demo_product_front' );

函數 demo_product_front () {
全球$產品；
如果（'演示'== $product->get_type()）{ 
echo( get_post_meta( $product->get_id(), 'demo_product_info' )[0] );
}
}

確保您的產品類型 ID 與代碼匹配if ('demo' == $product->get_type() ，如上所述。保存此代碼後，您將在正面看到您的自定義產品詳細信息。

完整的代碼片段

為了您的方便，我們將不同的代碼組合成一個集合，因此您只需將其粘貼到插件的主文件中並根據需要進行編輯。

 <?php
/**
* 插件名稱：QuadLayers 自定義產品類型
* 描述：用於向 WooCommerce 添加自定義產品類型的插件
* 作者：四層
* 作者 URI：https://www.quadlayers.com
*版本：1.0
*/


定義（'ABSPATH'）或退出；

add_action( 'init', 'register_demo_product_type' );
函數 register_demo_product_type() {
類 WC_Product_Demo 擴展 WC_Product {

公共函數 __construct( $product ) {
$this->product_type = '演示';
父母::__構造（$產品）；
}
}
}


add_filter( 'product_type_selector', 'add_demo_product_type' );
函數 add_demo_product_type( $types ){
$types[ 'demo' ] = __( '演示產品', 'dm_product' );
返回$類型； 
}


add_filter( 'woocommerce_product_data_tabs', 'demo_product_tab' );
函數 demo_product_tab($tabs){

$tabs['演示'] = 數組(
'label' => __( 'Demo Product', 'dm_product' ),
'target' => 'demo_product_options',
'class' => 'show_if_demo_product',
);
返回 $ 標籤；
}


add_action( 'woocommerce_product_data_panels', 'demo_product_tab_product_tab_content' );
函數 demo_product_tab_product_tab_content() {
?><div class='panel woocommerce_options_panel'><?php
?><div class='options_group'><?php


woocommerce_wp_checkbox(數組(
'id' => '_enable_custom_product',
'label' => __( '啟用自定義產品類型'),
));


woocommerce_wp_text_input(
大批（
'id' => 'demo_product_info',
'label' => __( '演示產品詳細信息', 'dm_product' ),
'placeholder' => '在此處插入要在前端顯示的文本',
'desc_tip' => '真',
'description' => __( '輸入演示產品信息', 'dm_product' ),
'類型'=>'文本'
)
);
?></div>
</div><?php
}

add_action( 'woocommerce_process_product_meta', 'save_demo_product_settings' );

函數 save_demo_product_settings( $post_id ){

$enable_custom_product = isset( $_POST['_enable_custom_product'] ) ? '是' : '否';
update_post_meta( $post_id, '_enable_custom_product', $enable_custom_product );
$demo_product_info = $_POST['demo_product_info'];

如果（！空（$demo_product_info））{
update_post_meta( $post_id, 'demo_product_info', esc_attr( $demo_product_info ) );
}
}


add_action( 'woocommerce_single_product_summary', 'demo_product_front' );

函數 demo_product_front () {
全球$產品；
如果（'演示'== $product->get_type()）{ 
echo( get_post_meta( $product->get_id(), 'demo_product_info' )[0] );
}
}

當然，我們在本教程中展示的所有步驟都非常簡單，您可以而且應該嘗試向您的自定義產品類型添加更多字段、設置和內容。 此外，如您所見，本教程的編程工作量有點大。 因此，如果您不熟悉 WordPress 或編碼，您可以隨時在評論部分尋求我們的幫助。 此外，您還可以做一些完全不同的事情，使用主題的 functions.php 文件將所有這些代碼添加到您的網站。

這將跳過創建 WordPress 插件的步驟，但請注意，如果您更改或更新主題（除非您使用子主題），您的更改將會消失。我們強烈建議使用此方法的插件，但如果您願意要使用 functions.php 文件，您可以這樣做。

永遠記得在更改 functions.php 文件之前對您的 WordPress 網站進行完整備份。 這樣，萬一出現任何問題，您可以隨時恢復到工作版本。

只需單擊外觀 > 主題文件編輯器，然後單擊主題文件右側欄中的主題函數或 functions.php。

然後，您只需將上述代碼粘貼到編輯器中，然後單擊“更新文件”即可完成。

結論

這結束了以編程方式創建自定義 WooCommerce 產品類型所需的所有步驟。 讓我們快速總結一下創建自定義產品類型所需的所有步驟：

• 為您的自定義 WooCommerce 產品類型創建並激活插件。
• 註冊您的新產品類型。
• 為單個產品頁面的自定義產品類型添加一個選項卡。
• 將字段和設置添加到您的產品選項卡。
• 保存產品選項卡上的字段和設置。
• 在前端顯示您的產品標籤內容。

最後，為了您的方便，我們將所有不同的代碼片段組合在一起，為您提供完整的代碼。 因此，您可以將整個代碼複製到您的主文件中，並根據需要進行更改。

我們希望您覺得這篇文章對您有所幫助。 如果您想了解有關設置各種 WooCommerce 設置和產品選項的更多信息，為什麼不查看我們的其他一些文章：

• 如何設置 WooCommerce 批量折扣
• 如何以編程方式創建 WordPress 用戶
• 以編程方式創建 WordPress 自定義字段