如何在Woocommerce链接产品中添加更多自定义字段 [英] How to add more custom field in Linked Product of Woocommerce
问题描述
感谢StackOverflow上的所有开发人员.
Thanks to all developers at StackOverflow.
我想在Woocommerce的链接产品部分中添加更多字段.这些字段应类似于Upsell/Crosssell.
I want to add more fields in Linked Product Section of Woocommerce. The fields should be similar to Upsell/Crosssell.
到目前为止，我的代码:-
My code so far:-
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个字符时，它将显示一个可以选择的匹配产品列表.类似于追加销售/交叉销售.
In the above code i need the combobox, For example when you type 3 characters in input box, it will show a list of matched products which can be selected. Similar to Upsell / Cross Sell.
请任何人帮助我实现此自定义字段.预先感谢.
Please anyone help me implement this custom field. Thanks in Advance.
有人吗?
推荐答案
上面的代码中缺少几件事.
There are several things missing in your code above.
- 您在第一行使用的钩子不存在.右钩称为
woocommerce_product_options_related - 您设计自定义字段的代码不在任何函数中.
- 您正在创建一个标准文本字段.如果要选择产品"下拉菜单，则应使用另一种方法. 这应该在您在挂钩中使用的函数内.
- 您缺少一个钩子和一个函数，实际上没有从您的自定义字段中保存数据
- The hook you have used on the first line, do not exist. The right hook is called
woocommerce_product_options_related - The code where you've designed your custom field, is not inside any function.
- You are creating a standard text-field. If you want a "Select Product"-dropdown, you should use another approach. This should be inside that function that you're using in the hook.
- You are missing a hook and a function the actually save the data from your custom field
1.找到正确的勾子/动作
要找到合适的钩子，只需在WoocCommerce插件中搜索"woocommerce_product_options _" ，然后应显示大约6个PHP文件.这些文件之一称为"html-product-data-linked-products.php" .该文件包含该特定WooCommerce部分中的所有现有选项.它还包含用于显示这些选项的钩子.
1. Finding the right hook/action
To find the right hook to use, just search for "woocommerce_product_options_" inside the WoocCommerce plugin, and about 6 PHP-files should appear. One of those files is called "html-product-data-linked-products.php". This file contains all the existing options in that specific WooCommerce section. It also contains the hook used to display those options.
打开文件并签出.该挂钩位于页面底部
Open the file and check it out. The hook is at the bottom of the page
完整路径: /wp-content/plugins/woocommerce/includes/admin/metaboxes/views/
Full Path: /wp-content/plugins/woocommerce/includes/admin/metaboxes/views/
2.创建下拉列表
要创建包括产品搜索的选择下拉列表，您需要的代码与上面的代码大不相同.
2. Creating the dropdown
To create a select-dropdown including a product search, you need a much different code than the one above.
腾出一些时间，您只需复制上面提到的文件中的现有选项之一，然后根据需要进行修改即可.
The spare some time, you can just copy-paste one of the existing options, in the file mentioned above, and then modify it, to your needs.
所有这些都应放在名为woocom_linked_products_data_custom_field()的函数内.
All this should be placed inside a function called: woocom_linked_products_data_custom_field().
2.1.修改ID/名称
您需要在代码中进行修改的第一件事，当然是字段的唯一ID/名称.
将其放置在label-标签(for)和select-标签(id和name)中.
The first things you need to modify in the code, is of course the unique ID/name of the field.
This is placed in the label-tag (for) and the select-tag (id and name).
在您的示例中，ID/名称应为upsizing_products，标签文字为Upsizing Products:
In your example the ID/name should be upsizing_products and the label-text 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…', '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部分中显示并高亮显示已选择的产品，并下拉显示其自身.
The next thing, is to show and highligt already chosen products in the WooCommerce section and the dropdown it self.
为此，将$product_ids-变量和整行替换为:
To do this replace the $product_ids-variable and the entire line with:
$product_ids = get_post_meta( $post->ID, '_upsizing_products_ids', true );
与此相反，将从数据库中的自定义字段中检索产品ID，而不是现有选项之一(例如，cross_sell_ids).
With this instead, the product id's is retrieved from your custom field in the database instead of one of the existing options (cross_sell_ids for example).
注意:
_upsizing_products_ids是数据库中的元密钥名称.与此键相关的元值包含您所有的字段数据.这用于存储和检索自定义字段.
Note: The
_upsizing_products_idsis 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部分中显示字段
最后，应正确挂钩该功能，以便可以在链接的产品部分中显示该功能:
Lastly, the function should be properly hooked, so it can be displayed in the Linked Products section:
add_action( 'woocommerce_product_options_related', 'woocom_linked_products_data_custom_field' );
3.保存并存储数据
现在，您的自定义字段显示在右侧部分中.接下来是将数据保存并存储在数据库中.
3. Save and store the data
Now your custom field is displayed inside the right section. The next thing is to save and store the data in the database.
在新功能中，使用$_POST从字段中检索数据，并使用update_post_meta将数据存储在包含后ID，唯一字段ID/名称(meta-键)及其自身的数据(元值).
Inside a new function, use $_POST to retrieve the data from the field, and update_post_meta to store the data in the database containing the post-ID, the unique field-id/name (meta-key) and the data it self (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或插件文件中:
Here's the full code. Put it inside your themes functions.php or a plugin file:
// 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…', '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:
To display the stored data use _upsizing_products_ids:
echo get_post_meta( $post->ID, 'my-field-slug', true );
查看本指南掌握WooCommerce产品 自定义字段以获取有关WooCommerce自定义字段的更多信息.
Check out this guide Mastering WooCommerce Products Custom Fields for more information about Custom Fields for WooCommerce.
这篇关于如何在Woocommerce链接产品中添加更多自定义字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
