如何在 Woocommerce 的鏈接產品中添加更多自定義字段

Question

感謝 StackOverflow 的所有開發人員。

我想在 Woocommerce 的鏈接產品部分添加更多字段。 這些字段應類似於追加銷售/交叉銷售。

到目前為止我的代碼：-

add_action( 'woocommerce_product_options_linked_product_data', 'woocom_general_product_data_custom_field' );

 woocommerce_wp_text_input( 
    array( 
      'id' => '_upsizing_products', 
      'label' => __( 'Upsizing Products', 'woocommerce' ), 
      'placeholder' => 'Upsizing Products',
      'desc_tip' => 'true',
      'description' => __( 'Select Products Here', 'woocommerce' ) 
    )
  );

在上面的代碼中我需要組合框，例如當你在輸入框中輸入 3 個字符時，它會顯示一個可以選擇的匹配產品列表。 類似於追加銷售/交叉銷售。

請任何人幫我實現這個自定義字段。 提前致謝。

編輯：有人嗎？

Answer 1

上面的代碼中缺少幾件事。

1. 您在第一行使用的鈎子不存在。 右勾叫woocommerce_product_options_related
2. 您設計自定義字段的代碼不在任何函數中。
3. 您正在創建一個標准的文本字段。 如果您想要一個“選擇產品”下拉菜單，您應該使用另一種方法。 這應該在您在鈎子中使用的那個函數內。
4. 您缺少一個鈎子和一個函數來實際保存自定義字段中的數據

---

1. 找到正確的鈎子/動作

要找到要使用的正確掛鈎，只需在 WoocCommerce 插件中搜索“woocommerce_product_options_” ，就會出現大約 6 個 PHP 文件。 這些文件之一稱為"html-product-data-linked-products.php" 。 此文件包含該特定 WooCommerce 部分中的所有現有選項。 它還包含用於顯示這些選項的鈎子。

打開文件並檢查它。 鈎子在頁面底部

完整路徑： /wp-content/plugins/woocommerce/includes/admin/metaboxes/views/

---

2. 創建下拉菜單

要創建包含產品搜索的選擇下拉列表，您需要一個與上述代碼大不相同的代碼。

空閑時間，您可以將現有選項之一復制粘貼到上述文件中，然后根據需要對其進行修改。

所有這些都應該放在一個名為： woocom_linked_products_data_custom_field()的函數中。

2.1. 修改ID/名稱

您需要在代碼中修改的第一件事當然是字段的唯一 ID/名稱。 這被放置在label -tag ( for )和select -tag ( id and name ) 中。

在您的示例中，ID/名稱應該是upsizing_products和標簽文本Upsizing Products ：

<label for="upsizing_products"><?php _e( 'Upsizing Product', 'woocommerce' ); ?></label>
<select class="wc-product-search" multiple="multiple" style="width: 50%;" id="upsizing_products" name="upsizing_products[]" data-placeholder="<?php esc_attr_e( 'Search for a product&hellip;', 'woocommerce' ); ?>" data-action="woocommerce_json_search_products_and_variations" data-exclude="<?php echo intval( $post->ID ); ?>">

注意：不要忘記在名稱標簽的末尾放置一個[] ，否則您的數據將不會被存儲。

2.2. 顯示已選擇的產品

接下來，是在 WooCommerce 部分及其自身的下拉列表中顯示和突出顯示已選擇的產品。

為此，將$product_ids變量和整行替換為：

$product_ids = get_post_meta( $post->ID, '_upsizing_products_ids', true );

取而代之的是，從數據庫中的自定義字段而不是現有選項之一（例如 cross_sell_ids）中檢索產品 ID。

注意： _upsizing_products_ids是數據庫中的元鍵名稱。 與此鍵相關的元值包含您的所有字段數據。 這用於存儲和檢索自定義字段。

2.3. 在 WooCommerce 部分顯示該字段

最后，該函數應該正確掛鈎，以便它可以顯示在Linked Products部分：

add_action( 'woocommerce_product_options_related', 'woocom_linked_products_data_custom_field' );

---

3.保存和存儲數據

現在您的自定義字段顯示在右側部分中。 接下來是將數據保存並存儲在數據庫中。

在一個新函數中，使用$_POST從字段中檢索數據，並使用update_post_meta將數據存儲在包含 post-ID、唯一字段 ID/名稱（元鍵）及其自身數據（meta -值） 。

function woocom_linked_products_data_custom_field_save( $post_id ){
    $product_field_type =  $_POST['upsizing_products'];
    update_post_meta( $post_id, '_upsizing_products_ids', $product_field_type );
}
add_action( 'woocommerce_process_product_meta', 'woocom_linked_products_data_custom_field_save' );

---

這是完整的代碼。 把它放在你的主題functions.php或插件文件中：

// Display the custom fields in the "Linked Products" section
add_action( 'woocommerce_product_options_related', 'woocom_linked_products_data_custom_field' );

// Save to custom fields
add_action( 'woocommerce_process_product_meta', 'woocom_linked_products_data_custom_field_save' );


// Function to generate the custom fields
function woocom_linked_products_data_custom_field() {
    global $woocommerce, $post;
?>
<p class="form-field">
    <label for="upsizing_products"><?php _e( 'Upsizing Product', 'woocommerce' ); ?></label>
    <select class="wc-product-search" multiple="multiple" style="width: 50%;" id="upsizing_products" name="upsizing_products[]" data-placeholder="<?php esc_attr_e( 'Search for a product&hellip;', 'woocommerce' ); ?>" data-action="woocommerce_json_search_products_and_variations" data-exclude="<?php echo intval( $post->ID ); ?>">
        <?php
            $product_ids = get_post_meta( $post->ID, '_upsizing_products_ids', true );

            foreach ( $product_ids as $product_id ) {
                $product = wc_get_product( $product_id );
                if ( is_object( $product ) ) {
                    echo '<option value="' . esc_attr( $product_id ) . '"' . selected( true, true, false ) . '>' . wp_kses_post( $product->get_formatted_name() ) . '</option>';
                }
            }
        ?>
    </select> <?php echo wc_help_tip( __( 'Select Products Here.', 'woocommerce' ) ); ?>
</p>

<?php
}

// Function the save the custom fields
function woocom_linked_products_data_custom_field_save( $post_id ){
    $product_field_type =  $_POST['upsizing_products'];
    update_post_meta( $post_id, '_upsizing_products_ids', $product_field_type );
}

要顯示存儲的數據，請使用_upsizing_products_ids ：

echo get_post_meta( $post->ID, 'my-field-slug', true );

查看本指南掌握 WooCommerce 產品自定義字段，了解有關WooCommerce 自定義字段的更多信息。