Agregue el campo de búsqueda Select2 personalizado en el metabox de datos del producto de WooCommerce

He agregado con éxito un campo de búsqueda de productos en mi página de edición de productos, pero necesito poder borrar la selección. ¿Cómo puedo conseguir esto?

Alternativamente: ¿cómo me las arreglo para poder seleccionar solo 1 producto si configuro varios en el componente de selección?

Mi código se ve a continuación:

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

Está muy cerca de su intento de código, pero lo modifiqué ligeramente y eliminé algunos controles innecesarios (como la versión de WooCommerce, ya que es 3.0 … de 2017)

Entonces obtienes:

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

Resultado:

“Alternativamente: ¿cómo me las arreglo para poder seleccionar solo 1 producto si configuro varios en el componente de selección?”

Solo agrega data-maximum-selection-length="1"

Entonces obtienes:

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

Relacionado: Problema al guardar el valor del campo Select2 en el backend de WooCommerce