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

Question

我已成功在编辑产品页面中添加产品搜索字段，但我需要能够清除选择。我怎样才能实现这个目标？

或者：如果我在选择组件上设置了多个产品，如何设法只能选择 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 版本，因为它是 2017 年的 3.0），

所以您得到：

// 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…', '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' );

结果：

---

“或者：如果我在选择组件上设置了多个产品，如何设法只能选择 1 个产品？”

只需添加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"..

---

相关：从 WooCommerce 后端的 Select2 字段保存值的问题