将自定义 Select2 搜索字段添加到 WooCommerce 产品数据元数据框中

Question

我已在我的编辑产品页面中成功添加了产品搜索字段，但我需要能够清除 selection。我怎样才能做到这一点？

或者：如果我在 select 组件上设置多个，我如何设法只能 select 1 个产品？

我的代码如下所示：

add_action('woocommerce_product_data_panels', function() {
    global $post, $woocommerce;

    $product_ids = get_post_meta( $post->ID, '_stock_sync_data_ids', true );
    if( empty($product_ids) )
        $product_ids = array();
    ?>
    <div id="stock_sync_data" class="panel woocommerce_options_panel hidden">
        <?php if ( $woocommerce->version >= '3.0' ) : ?>
            <p class="form-field stock_sync_data">
                <label for="stock_sync_data"><?php _e( 'Select product to sync with. (Only select 1 item)', 'woocommerce' ); ?></label>
                <select class="wc-product-search" style="width: 50%;" id="stock_sync_data" name="stock_sync_data[]" data-placeholder="<?php esc_attr_e( 'Search for a product&hellip;', 'woocommerce' ); ?>" data-action="woocommerce_json_search_products_and_variations">
                    <?php
                        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 product to syncronize stock.', 'woocommerce' ) ); ?>
                
            </p>
        <?php endif; ?>
    </div>
    <?php
});

Answer 1

你的代码尝试已经非常接近了，但我稍微调整了一下并删除了一些不必要的检查（比如 WooCommerce 版本，因为它是 3.0.. 从 2017 年开始）

所以你得到：

// Add custom product setting tab
function filter_woocommerce_product_data_tabs( $default_tabs ) {
    $default_tabs['custom_tab'] = array(
        'label'     => __( 'Custom Tab', 'woocommerce' ),
        'target'    => 'stock_sync_data_tab',
        'priority'  => 80,
        'class'     => array()
    );

    return $default_tabs;
}
add_filter( 'woocommerce_product_data_tabs', 'filter_woocommerce_product_data_tabs', 10, 1 );

// Contents custom product setting tab
function action_woocommerce_product_data_panels() {
    global $post;

    $product_ids = get_post_meta( $post->ID, '_stock_sync_data_ids', true );
    if ( empty ( $product_ids )  ) { 
        $product_ids = array();
    }
    ?>
    <!-- Note the 'id' attribute needs to match the 'target' parameter set above -->
    <div id="stock_sync_data_tab" class="panel woocommerce_options_panel hidden">
        <p class="form-field stock_sync_data">
            <label for="stock_sync_data"><?php esc_html_e( 'Select product to sync with. (Only select 1 item)', 'woocommerce' ); ?></label>
            <select class="wc-product-search" multiple="multiple" style="width: 50%;" id="stock_sync_data" name="stock_sync_data[]" 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
                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 ) . '>' . esc_html( wp_strip_all_tags( $product->get_formatted_name() ) ) . '</option>';
                    }
                }
                ?>
            </select> <?php echo wc_help_tip( __( 'Select product to syncronize stock.', 'woocommerce' ) ); // WPCS: XSS ok. ?>
        </p>
    </div>
    <?php
}
add_action( 'woocommerce_product_data_panels', 'action_woocommerce_product_data_panels' );

结果：

"Alternatively: how do I manage to only be able to select 1 product if I set multiple on the select component?"

Just add data-maximum-selection-length="1"

所以你得到：

<select class="wc-product-search" multiple="multiple" style="width: 50%;" id="stock_sync_data" name="stock_sync_data[]" data-maximum-selection-length="1"..

将自定义 Select2 搜索字段添加到 WooCommerce 产品数据元数据框中

Add custom Select2 search field into WooCommerce product data metabox

wordpress

product

backend

woocommerce

hook-woocommerce