如何在 Woocommerce 的链接产品中添加更多自定义字段

Question

感谢 Whosebug 的所有开发人员。

我想在 Woocommerce 的链接产品部分添加更多字段。这些字段应类似于 Upsell/Crosssell.

到目前为止我的代码：-

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

上面的代码中缺少一些东西。

您在第一行使用的钩子不存在。右勾拳叫做woocommerce_product_options_related
您设计自定义字段的代码不在任何函数中。
您正在创建标准文本字段。如果你想要一个“Select Product”-dropdown，你应该使用另一种方法。这应该在您在挂钩中使用的那个函数内。
您缺少一个钩子和一个实际保存自定义字段数据的函数

1。寻找合适的 hook/action

要找到合适的钩子使用，只需在 WoocCommerce 插件中搜索 "woocommerce_product_options_"，应该会出现大约 6 个 PHP-文件.其中一个文件名为 "html-product-data-linked-products.php"。此文件包含该特定 WooCommerce 部分中的所有现有选项。它还包含用于显示这些选项的挂钩。

打开文件并查看。挂钩在页面底部

Full Path: /wp-content/plugins/woocommerce/includes/admin/metaboxes/views/

2。创建下拉菜单

要创建包含产品搜索的 select 下拉菜单，您需要的代码与上面的代码大不相同。

空闲一些时间，您可以将现有选项之一复制粘贴到上述文件中，然后根据需要进行修改。

所有这些都应该放在一个名为：woocom_linked_products_data_custom_field().

的函数中

2.1。修改ID/name

代码中首先要修改的，当然是字段的唯一性ID/name。这被放置在 label-标签 (for) 和 select-标签 (id 和name).

在您的示例中，ID/name 应该是 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 ); ?>">

Note: Don't forget to put an [] and the end of the name-tag, or your data will not be stored.

2.2。显示已选择的产品

下一步是在 WooCommerce 部分和下拉菜单中显示并突出显示已选择的产品。

为此，将 $product_ids 变量和整行替换为：

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

取而代之的是，产品 ID 是从数据库中的自定义字段而不是现有选项之一检索的 （例如 cross_sell_ids）.

Note: The _upsizing_products_ids is the meta-key name in the database. The meta-value related to this key, contains all your field data. This is used to store and retrieve the custom field.

2.3。在 WooCommerce 部分显示字段

最后，函数应该正确挂钩，所以它可以显示在 Linked Products 部分：

add_action( 'woocommerce_product_options_related', 'woocom_linked_products_data_custom_field' );

3。保存数据

现在您的自定义字段显示在右侧部分中。接下来就是将数据保存并存入数据库。

在一个新函数中，使用 $_POST 从字段中检索数据，并使用 update_post_meta 将数据存储在包含 post-ID 的数据库中，唯一的 field-id/name (meta-key) 及其自身的数据 (meta-value).

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 );

Check out this guide Mastering WooCommerce Products Custom Fields for more information about Custom Fields for WooCommerce.

如何在 Woocommerce 的链接产品中添加更多自定义字段

How to add more custom field in Linked Product of Woocommerce

php

wordpress

woocommerce

hook-woocommerce

1。寻找合适的 hook/action

2。创建下拉菜单

3。保存数据