在 Woocommerce 中添加自定义多选字段以管理产品选项设置 [英] Add a custom multi-select field to admin product options settings in Woocommerce

问题描述

我遵循了这个答案

这是我的代码:

//在链接产品"部分显示自定义字段add_action('woocommerce_product_options_related', 'woocom_linked_products_data_custom_field');//保存到自定义字段add_action('woocommerce_process_product_meta', 'woocom_linked_products_data_custom_field_save');//生成自定义字段的函数函数 woocom_linked_products_data_custom_field() {全球 $woocommerce, $post;$product = wc_get_product( $post->ID );?><p class="form-field"><label for="subscription_toggle_product"><?php _e('订阅切换产品', 'woocommerce');?></label><select class="wc-product-search" style="width: 50%;"id="subscription_toggle_product" name="subscription_toggle_product" data-placeholder="<?php esc_attr_e('搜索产品&hellip;', 'woocommerce'); ?>"data-action="woocommerce_json_search_products_and_variations" data-exclude="<?php echo intval( $post->ID ); ?>"><?php$product_id = get_post_meta( $post->ID, '_subscription_toggle_product_id', true );如果($product_id){$product = wc_get_product( $product_id );如果 ( is_object( $product ) ) {echo '<option value="' . esc_attr( $product_id ) . '"' .选择(真，真，假).'>'.wp_kses_post( $product->get_formatted_name() ) .'</选项>';}}?></选择></p><?php}//函数保存自定义字段函数 woocom_linked_products_data_custom_field_save( $post_id ){如果(isset($_POST['subscription_toggle_product'])){$product_field_type = $_POST['subscription_toggle_product'];update_post_meta( $post_id, '_subscription_toggle_product_id', $product_field_type );}}

解决方案

这种选择字段仅适用于定义的 multiple 属性和值数组.所以你不能将它用于简单的 ID.如果您添加到您的选择字段 multiple="multiple" 属性，它将起作用.

此外，自从 Woocommerce 3 事情发生了变化:
- 有更好的钩子来保存数据.
- 您现在可以使用 CRUD 对象和相关方法.

以下代码适用于多个产品 ID(产品 ID 数组):

//在链接产品"部分显示自定义选择字段add_action('woocommerce_product_options_related', 'display_linked_products_data_custom_field');函数 display_linked_products_data_custom_field() {全球 $product_object, $post;?><p class="form-field"><label for="subscription_toggle_products"><?php _e( '订阅切换产品', 'woocommerce');?></label><select class="wc-product-search" multiple="multiple" style="width: 50%;"id="subscription_toggle_ids" name="_subscription_toggle_ids[]" data-placeholder="<?php esc_attr_e('搜索产品&hellip;', 'woocommerce'); ?>"data-action="woocommerce_json_search_products_and_variations" data-exclude="<?php echo intval( $post->ID ); ?>"><?php$product_ids = $product_object->get_meta('_subscription_toggle_ids');foreach ( $product_ids 作为 $product_id ) {$product = wc_get_product( $product_id );如果 ( is_object( $product ) ) {echo '<option value="' . esc_attr( $product_id ) . '"' .选择(真，真，假).'>'.wp_kses_post( $product->get_formatted_name() ) .'</选项>';}}?></选择></p><?php}//将值保存到产品中add_action('woocommerce_admin_process_product_object', 'save_linked_products_data_custom_field_value', 10, 1);函数 save_linked_products_data_custom_field_value( $product ){$data = isset( $_POST['_subscription_toggle_ids'] ) ?array_map('intval', (array) $_POST['_subscription_toggle_ids']): array();$product->update_meta_data('_subscription_toggle_ids', $data);}

代码位于您的活动子主题(活动主题)的 function.php 文件中.经测试有效.

I have followed this answer How to add more custom field in Linked Product of Woocommerce to add a custom select field to my Linked Product screen in Woocommerce. This new field is meta key is subscription_toggle_product.

It's working fine, but once you have selected a product, you can't delete it (there is no "Empty" option or cross symbol). I haven't got a clue how I can allow the selection to be deselected. I've tried adding an <option> with an empty value, but it hasn't worked.

Here is my code:

// 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;
    $product = wc_get_product( $post->ID );
?>
<p class="form-field">
    <label for="subscription_toggle_product"><?php _e( 'Subscription Toggle Product', 'woocommerce' ); ?></label>
    <select class="wc-product-search" style="width: 50%;" id="subscription_toggle_product" name="subscription_toggle_product" 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_id = get_post_meta( $post->ID, '_subscription_toggle_product_id', true );            

            if ( $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>
</p>

<?php
}

// Function the save the custom fields
function woocom_linked_products_data_custom_field_save( $post_id ){
    if (isset($_POST['subscription_toggle_product'])) {
        $product_field_type =  $_POST['subscription_toggle_product'];
        update_post_meta( $post_id, '_subscription_toggle_product_id', $product_field_type );
    }
}

解决方案

This kind of select field only works with a defined multiple attribute and work with an array of values. so you can't use it for a simple ID. If you add to your select field multiple="multiple" attribute it will work.

Also since Woocommerce 3 things have changed:
- There are better hooks to save the data.
- You can now use CRUD Objects and related methods.

The following code will work for multiple product IDs (an array of products IDs):

// Display a custom select field in "Linked Products" section
add_action( 'woocommerce_product_options_related', 'display_linked_products_data_custom_field' );
function display_linked_products_data_custom_field() {
    global $product_object, $post;
    ?>
    <p class="form-field">
        <label for="subscription_toggle_products"><?php _e( 'Subscription Toggle Products', 'woocommerce' ); ?></label>
        <select class="wc-product-search" multiple="multiple" style="width: 50%;" id="subscription_toggle_ids" name="_subscription_toggle_ids[]" 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 = $product_object->get_meta( '_subscription_toggle_ids' );

                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>
    </p>
    <?php
}

// Save the values to the product
add_action( 'woocommerce_admin_process_product_object', 'save_linked_products_data_custom_field_value', 10, 1 );
function save_linked_products_data_custom_field_value( $product ){
    $data = isset( $_POST['_subscription_toggle_ids'] ) ? array_map( 'intval', (array) $_POST['_subscription_toggle_ids'] ) : array();
    $product->update_meta_data( '_subscription_toggle_ids', $data );
}

Code goes in function.php file of your active child theme (active theme). Tested and works.

这篇关于在 Woocommerce 中添加自定义多选字段以管理产品选项设置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！