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

3 minutos de lectura

avatar de usuario
mikkeldalby

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

avatar de usuario
7uc1f3r

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:

ingrese la descripción de la imagen aquí


“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

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad